Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Related Content you might be interested in

Current Title:

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

The grayscale function

Treat yourself to a cookie if you can guess what the grayscale function does. Yep, it converts the color passed to it into a grayscale color. Not much more to say really:

&:nth-child(7) a {
  background-color: grayscale($color1);
}

Following is the output on the browser:

Previous Section
End of Section 12
Next Section