Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Sass and Compass for Designers
  • Table Of Contents Toc
Sass and Compass for Designers

Sass and Compass for Designers

By : Ben Frain
4.6 (35)
Buy this Book
close
close
Sass and Compass for Designers

Sass and Compass for Designers

4.6 (35)
By: Ben Frain
Buy this Book

Overview of this book

A step-by-step tutorial guide, taking you through how to build a responsive Sass and Compass powered website. If you understand HTML and CSS, this book is all you need to take your code to the next level with Sass and Compass. No prior understanding of CSS preprocessors or programming conventions is needed.
Table of Contents (11 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started with Sass and Compass
Icon
1. Getting Started with Sass and Compass
Icon
Why do we need CSS preprocessors?
Icon
Why you should use Sass and Compass
Icon
What is Sass?
Icon
What is Compass?
Icon
Install Sass and Compass
Icon
Installing and working with Sass and Compass on the command line
Icon
Graphical tools for working with Sass and Compass
Icon
How to work with Sass files in text editors
Icon
Summary
2
2. Setting Up a Sass and Compass project
Icon
2. Setting Up a Sass and Compass project
Icon
Setting up a Sass and Compass project
Icon
Understanding the config.rb file
Icon
Creating and using partial files
Icon
Sass comment formats
Icon
A basic index.html file
Icon
A base for future projects
Icon
Summary
3
3. Nesting, Extend, Placeholders, and Mixins
Icon
3. Nesting, Extend, Placeholders, and Mixins
Icon
Styling a site with Sass and Compass
Icon
Separating layout from visuals
Icon
What nesting is and how it facilitates modules of code
Icon
Using the @extend directive to extend existing rules
Icon
Use placeholder selectors to extend styles only when needed
Icon
What mixins are and how we can use them to easily produce oft-needed code
Icon
A cautionary note about generated CSS
Icon
Summary
4
4. Manipulate Color with Ease
Icon
4. Manipulate Color with Ease
Icon
Only define a color once
Icon
The lighten and darken functions
Icon
Markup amendments and diversions
Icon
Back to colors
Icon
The complement (and invert) functions
Icon
The invert function
Icon
The adjust-hue function
Icon
The saturate and desaturate functions
Icon
The transparentize/fade-out functions
Icon
The opacify/fade-in functions
Icon
The grayscale function
Icon
The rgba function
Icon
The mix function
Icon
The adjust-color function
Icon
The scale-color function
Icon
The shade and tint functions
Icon
Putting it all together
Icon
Summary
5
5. Responsive and Flexible Grids with Sass and Compass
chevron up
Icon
5. Responsive and Flexible Grids with Sass and Compass
Icon
Arguments against grids
Icon
Reasons to use a grid system
Icon
What is Susy?
Icon
Installing the Susy Compass plugin
Icon
Including Susy in a project
Icon
Setting up a Susy grid
Icon
Defining a context for the grid
Icon
Making a ‘mobile first’ responsive grid
Icon
Making breakpoints with Susy
Icon
Creating an entirely fluid grid
Icon
Creating a static ‘fixed’ grid
Icon
Using Susy grid helpers
Icon
Pre, Post, Squish, Push, and Pull
Icon
Grids within grids
Icon
Sub-pixel rounding issues
Icon
Summary
6
6. Advanced Media Queries with Sass and Mixins
Icon
6. Advanced Media Queries with Sass and Mixins
Icon
Media queries in Sass
Icon
Inline media queries with Sass
Icon
Creating a mixin to easily handle media queries
Icon
How the MQ media query mixin works
Icon
Variations on a theme
Icon
Writing inline media queries
Icon
Gzip and CSS compression = victory!
Icon
Testing the real-world difference between inline and grouped media queries
Icon
Reviewing CSS code
Icon
Summary
7
7. Easy CSS3, Image Sprites, and More with Compass
Icon
7. Easy CSS3, Image Sprites, and More with Compass
Icon
Easy CSS3 with Compass's mixins
Icon
The border-radius syntax
Icon
Multiple columns
Icon
Background gradients
Icon
Adding background images with the Compass image-url helper
Icon
Image width and height helpers
Icon
Compass image sprites
Icon
Compass's text replacement mixins
Icon
Creating data URIs from images
Icon
Easy fallbacks for non-SVG capable devices
Icon
CSS transforms
Icon
CSS Filters
Icon
Transitions
Icon
Summary
8
8. Programmatic Logic with Sass
Icon
8. Programmatic Logic with Sass
Icon
Math calculations with Sass
Icon
Control directives and how to use them
Icon
Stripping and adding units to values
Icon
Writing functions in Sass
Icon
Using the @debug directive
Icon
The @warn directive
Icon
Summary
9
9. Becoming a Sass and Compass Power User
Icon
9. Becoming a Sass and Compass Power User
Icon
Turning off Compass support for specific vendors
Icon
Adding experimental support for bleeding edge CSS features
Icon
Defining experimental values
Icon
The Sass interactive shell
Icon
Adding the Sass globbing plugin to import batches of partial files
Icon
Creating multiple separate style sheets
Icon
Converting partial files to standalone style sheets
Icon
Compass statistics
Icon
Clearing the Sass cache
Icon
One-off Compass compiles
Icon
Mission debrief
Icon
Avoid conjecture with tools and testing
Icon
Parting shots
Icon
Summary
10
Index
Icon
Index

Using Susy grid helpers

Let’s revert to the elastic grid now and comment out those prior variables. Remember that Sass will remove comments on compile so if you would like to leave them in place (for reference), don’t feel bad about it. For clarification, here is the relative section of the _layout.scss partial that defines the grid:

// Grid layout variables (http://susy.oddbird.net/)
// ====================================================================
@import “susy”;
$total-columns  : 12;             // a 12-column grid
$column-width   : 5em;            // each column is 5em wide
$gutter-width   : 1em;            // 1em gutters between columns
$grid-padding   : $gutter-width;  // grid-padding equal to gutters
$border-box-sizing: true;

As mentioned, Susy has a few grid helper mixins to solve common layout issues.

Prefix, Suffix, and Pad

prefix, suffix, and pad are all mixins that make adding padding before or after (or both before and after) columns simple.

Prefix

We’ve already used the...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Sass and Compass for Designers
End of Section 5
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon