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

Table of Contents (17 chapters)
close
close
close
Sass and Compass for Designers
Icon
Sass and Compass for Designers
Credits
Icon
Credits
Foreword
Icon
Foreword
About the Author
Icon
About the Author
About the Reviewers
Icon
About the Reviewers
www.PacktPub.com
Icon
www.PacktPub.com
Preface
Icon
Preface
Lock Free Chapter
1
Getting Started with Sass and Compass
Icon
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
Setting Up a Sass and Compass project
Icon
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
Nesting, Extend, Placeholders, and Mixins
Icon
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
Manipulate Color with Ease
Icon
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
Responsive and Flexible Grids with Sass and Compass
Icon
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
Advanced Media Queries with Sass and Mixins
chevron up
Icon
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
Easy CSS3, Image Sprites, and More with Compass
Icon
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
Programmatic Logic with Sass
Icon
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
Becoming a Sass and Compass Power User
Icon
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
1
Index
Icon
Index

Reviewing CSS code

Although when authoring styles in Sass it's probable you will spend less time looking at the resultant CSS, that does not mean you shouldn't review the CSS periodically. Why is this necessary?

For me, principally, it is because with the nesting capability of Sass, sometimes the depth of the generated CSS selector is not obvious from a cursory glance at the Sass file. To exemplify this, currently here is the block of code for the list of chapter summaries that run down the left side on larger viewports:

.chapter-summary {
  a {
    @extend %block;
    padding: .5em;
    color: $color10;
    opacity: .8;
    border: none;
    &:hover {
      opacity: 1;
    }
    &:visited {
      opacity: .9;
    }
    b {
      @extend %block;
    }
    span {
      @extend %block;
      font-size: .8em;
    }
  }
}

Now, that does not look so bad, but with those @extends in place, here is the CSS:

.chapter-summary a, .chapter-summary a b, .chapter-summary a span, .off-canvas-navigation...
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 6
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