Index
A
- addition function
- about / Addition
- Apple
- about / Creating data URIs from images
- Aptana
- automatic compile
- to CSS, from command line / Automatic compile to CSS from the Command Line
- automatic compression
- automatic RGBA color values
B
- background-position property
- about / Compass image sprites
- background gradients
- about / Background gradients
- background linear-gradient syntax / Background linear-gradient syntax
- background radial-gradient syntax / Background radial-gradient syntax
- background images
- combining, with gradients / Combining background images and gradients
- adding, with image-url helper / Adding background images with the Compass image-url helper
- background linear-gradient syntax / Background linear-gradient syntax
- background radial-gradient syntax / Background radial-gradient syntax
- bare Compass-based project
- creating / Creating a bare Compass project
- bleeding edge CSS features
- experimental support, adding for / Adding experimental support for bleeding edge CSS features
- border-box
- Susy, setting to / Setting Susy to border-box
- border-radius syntax
- about / The border-radius syntax
- Bower
- box-shadow syntax
- about / The box-shadow syntax
- Box Shadow mixin
- about / The Box Shadow mixin
- breakpoints
- about / Media queries the simple way, Making a ‘mobile first’ responsive grid
- creating, with Susy / Making breakpoints with Susy
C
- cache buster
- about / The Compass cache buster
- calculations
- performing, variables used / Calculations using variables
- charityware
- about / What is Compass?
- Chrome Developer Tools
- about / All hail the Chrome Developer Tools
- continuous page repainting / Continuous page repainting
- clearfix
- about / The Compass clearfix
- Coda 2
- CodeKit
- color
- converting from hex, to RGBA / Only define a color once
- column rule syntax
- about / Column rule syntax
- command line
- Compass-based project, creating from / Create a Sass and Compass project from the command line
- Sass-based project, creating from / Create a Sass and Compass project from the command line
- command line install, Mac OS X / Mac OS X command line install
- Command Line Interface (CLI)
- about / The Sass interactive shell
- command prompt install, Windows / Windows command prompt install
- comment formats, Sass
- standard CSS comments / Standard CSS comments
- single line comments / Sass single line comments
- compact output option / The compact output option
- Compass
- using / Why you should use Sass and Compass
- about / What is Compass?
- URL / What is Compass?
- installing / Install Sass and Compass
- versions / Check which version of Sass and Compass you have
- latest version, installing / Installing the latest version of Sass and Compass (including prerelease versions)
- graphical tools / Graphical tools for working with Sass and Compass
- text replacement mixins / Compass's text replacement mixins
- configuration support variables / Configuration support variables
- interactive environment / Compass interactive
- Compass-based project
- creating, from command line / Create a Sass and Compass project from the command line
- setting up / Setting up a Sass and Compass project
- Compass-based projects
- creating / Creating Compass projects
- Compass compiles
- about / One-off Compass compiles
- Compass Modular scale plugin
- about / What is Susy?
- Compass statistics
- about / Compass statistics
- Compass support
- turning off, for specific vendors / Turning off Compass support for specific vendors
- compile
- complement color function
- compressed output option / The compressed output option
- config.rb file / Create a Sass and Compass project from the command line
- about / Understanding the config.rb file
- required plugins, adding / Adding required plugins
- configuration support variables, Compass / Configuration support variables
- conjecture
- avoiding, with testing / Avoid conjecture with tools and testing
- avoiding, with tools / Avoid conjecture with tools and testing
- container relative positioning
- about / Container relative positioning
- context
- defining, for grid / Defining a context for the grid
- about / Defining a context for the grid
- continuous page repainting / Continuous page repainting
- control directives
- about / Control directives and how to use them
- @if / The @if and @else if control directives
- @else if / The @if and @else if control directives
- @for loops / @for loops
- @each loops / @each loops
- counter variable
- create command
- CSS
- about / Why do we need CSS preprocessors?, If it ends up producing CSS, why not just write CSS?, Gzip and CSS compression = victory! , Easy CSS3 with Compass's mixins
- compressing, automatically / Automatic compression of CSS for faster websites
- automatic compile, from command line / Automatic compile to CSS from the Command Line
- CSS3
- with Compass mixins / Easy CSS3 with Compass's mixins
- CSS code
- reviewing / Reviewing CSS code
- CSS Filters
- about / CSS Filters
- CSS output style
- setting / Setting the CSS output style
- CSS output style, setting
- nested output option / The nested output option
- compact output option / The compact output option
- compressed output option / The compressed output option
- comments, removing / Remove the comments, keep the style
- CSS, compressing / Compress the CSS, keep the comments (loud comments)
- relative assets, enabling / Enable relative assets
- CSS preprocessors
- purpose / Why do we need CSS preprocessors?
- CSS transforms
- about / CSS transforms
- CSS Tricks / If it ends up producing CSS, why not just write CSS?
- customized Compass-based project
- creating / Create a customized Compass project
D
- @debug directive
- about / Using the @debug directive
- darken function
- about / The lighten and darken functions
- syntax / Syntax for lighten and darken
- data URIs
- creating, from images / Creating data URIs from images
- defaults
- mixin, writing with / How to write mixins with defaults
- div element
- about / Markup amendments and diversions
- diversions
- about / Markup amendments and diversions
- division functions
- about / Division
- DoDo
E
- @each loops
- about / @each loops
- @else if directive / The @if and @else if control directives
- @extend directive
- about / Using the @extend directive to extend existing rules
- used, for extending rules / Using the @extend directive to extend existing rules
- ems
- about / Markup amendments and diversions
- equality operators
- about / Equality operators
- Espresso 2
- excessive nesting
- dangers / Dangers of excessive nesting
- experimental support
- adding, for bleeding edge CSS features / Adding experimental support for bleeding edge CSS features
- experimental values
- defining / Defining experimental values
F
- @for loops
- about / @for loops
- FitText.js
- about / The text-shadow syntax
- fluid grid
- creating / Creating an entirely fluid grid
- font
- modifying, wtih Modernizr / Changing the font with Modernizr and the parent selector
- font-family property / Changing the font with Modernizr and the parent selector
- fonts
- partial file, creating for / Make a partial file for fonts
- function
- result, using of / Using the result of a function
- functions
- about / Why do we need CSS preprocessors?, Writing functions in Sass
- writing, in Sass / Writing functions in Sass
G
- gem command
- running / Running a gem command
- generated CSS
- warning / A cautionary note about generated CSS
- globbing plugin
- adding, to import batches of partial files / Adding the Sass globbing plugin to import batches of partial files
- gradients
- background images, combining with / Combining background images and gradients
- grid background
- displaying / Showing the grid background
- grid helpers, Susy
- using / Using Susy grid helpers
- prefix mixin / Prefix
- suffix mixin / Suffix
- pad mixin / Pad
- grids
- about / Arguments against grids
- limitations / Arguments against grids
- context, defining for / Defining a context for the grid
- within grids / Grids within grids
- grid system
- reasons, for using / Reasons to use a grid system
- grouped media queries
- versus inline media queries / Testing the real-world difference between inline and grouped media queries
- Gzip
H
- HAML
- about / What is Sass?
- height
- adding, to HTML selector / Add the height and width to each generated HTML selector
- hex
- hide-text mixin
- about / The hide-text mixin
- HiDPI devices
- about / Creating data URIs from images
- HSLA
- HSL colors
- about / Understanding HSL colors
- HTML5 Boilerplate project
- HTML selector
- width, adding to / Add the height and width to each generated HTML selector
- height, adding to / Add the height and width to each generated HTML selector
- HTTP2
- about / Creating and using partial files
- human errors
- fixing / Fixing human errors
I
- @if directive / The @if and @else if control directives
- @import directive
- about / Setting up a Susy grid
- @import statement
- about / Compass image sprites
- @include statement
- about / Compass image sprites
- ID selectors
- about / Are ID selectors bad?
- image-url helper
- background images, adding with / Adding background images with the Compass image-url helper
- images
- data URIs, creating from / Creating data URIs from images
- image sprites
- about / Compass image sprites
- configuration options / Additional sprite configuration options
- layout options / Layout options
- import batches, of partial files
- globbing plugin, adding to / Adding the Sass globbing plugin to import batches of partial files
- index
- about / @each loops
- index.html file / A basic index.html file
- index function
- about / @each loops
- inline-image syntax
- about / The inline-image syntax
- inline media queries
- writing / Writing inline media queries
- versus grouped media queries / Testing the real-world difference between inline and grouped media queries
- installation, Compass / Install Sass and Compass
- installation, Sass / Install Sass and Compass
- installation, Susy Compass plugin / Installing the Susy Compass plugin
- interactive environment, Compass / Compass interactive
- interactive shell
- about / Division, The Sass interactive shell
- interpolation
- about / 'From to' and 'from through'
- using / Understanding interpolation
- isolate-grid mixin
- about / The isolate-grid mixin
L
- layout options, image sprites / Layout options
- LESS
- lighten function
- about / The lighten and darken functions
- syntax / Syntax for lighten and darken
- lint tool
- about / Catching common problems with a lint tool
- used, for catching issues / Catching common problems with a lint tool
- LiveReload
- loud comment
M
- @mixin directive / Basic mixin syntax
- Mac OS X
- package, installing for / Install package for OS X
- command line install / Mac OS X command line install
- markup amendments
- about / Markup amendments and diversions
- math calculations, Sass
- about / Math calculations with Sass
- addition / Addition
- subtraction / Subtraction
- multiplication / Multiplication
- division / Division
- media queries
- about / Media queries the simple way
- Middleman
- mixin
- about / What mixins are and how we can use them to easily produce oft-needed code
- using / What mixins are and how we can use them to easily produce oft-needed code
- syntax / Basic mixin syntax
- writing, with defaults / How to write mixins with defaults
- mixins
- mobile
- responsive grid, creating for / Making a ‘mobile first’ responsive grid
- Modernizr
- font, modifying with / Changing the font with Modernizr and the parent selector
- Multi-column Layout Module
- about / Multiple columns
- multiple box-shadows
- about / Multiple box-shadows
- multiple columns
- about / Multiple columns
- column rule syntax / Column rule syntax
- Box Shadow mixin / The Box Shadow mixin
- box-shadow syntax / The box-shadow syntax
- multiple box-shadows / Multiple box-shadows
- multiple separate style sheets
- creating / Creating multiple separate style sheets
- multiplication function
- about / Multiplication
N
- name
- setting, for project assets / Setting the names and paths for project assets
- namespaces
- naming / Nesting namespaces
- nested output option / The nested output option
- nest rules, Sass / Nesting rules
- non-SVG capable devices / Easy fallbacks for non-SVG capable devices
- nth-omega mixin
- about / nth-omega mixin
O
- oily_png
- about / Compass image sprites
- Opera
- about / Opera is now WebKit based
- WebKit based / Opera is now WebKit based
P
- package
- installing, for Mac OS X / Install package for OS X
- padding
- around images / Extra padding around the images
- pad mixin
- about / Pad
- partial file
- creating / Creating and using partial files
- using / Creating and using partial files
- importing / Importing a partial file
- creating, for fonts / Make a partial file for fonts
- partial files
- about / Enable relative assets
- converting, to standalone style sheets / Converting partial files to standalone style sheets
- paths
- setting, for project assets / Setting the names and paths for project assets
- placeholder selectors
- used, for extending styles / Use placeholder selectors to extend styles only when needed
- plugin.js file
- about / The text-shadow syntax
- post mixin
- about / Post
- prefix mixin
- about / Prefix
- pre mixin
- about / Pre
- project
- Susy, including in / Including Susy in a project
- project assets
- paths, setting for / Setting the names and paths for project assets
- name. setting for / Setting the names and paths for project assets
- project variables, Susy / Susy project variables
- pull mixin
- about / Push and Pull
- push mixin
- about / Push and Pull
R
- @return directive
- about / @return
- relational operators
- about / Relational operators
- relative assets
- enabling / Enable relative assets
- responsive grid
- creating, for mobile / Making a ‘mobile first’ responsive grid
- result
- using, of functions / Using the result of a function
- RGBA
- Ruby
- installing, on Windows / Installing Ruby on Windows
- rules
- extending, @extend directive used / Using the @extend directive to extend existing rules
S
- .sass-cache / Create a Sass and Compass project from the command line
- Salsa grid system
- about / What is Susy?
- Sass
- using / Why you should use Sass and Compass
- colors, defining as variables / Use variables (only define a value once)
- variables, syntax / Understanding the syntax of variables
- nest rules / Nesting rules
- URL / What is Sass?
- about / What is Sass?
- installing / Install Sass and Compass
- versions / Check which version of Sass and Compass you have
- latest version, installing / Installing the latest version of Sass and Compass (including prerelease versions)
- graphical tools / Graphical tools for working with Sass and Compass
- maintainability feature / Sass provides maintainability and production ready code
- production ready code / Sass provides maintainability and production ready code
- syntax, for writing variables / The syntax for writing variables in Sass
- comment formats / Sass comment formats
- math calculations / Math calculations with Sass, Division
- functions, writing / Writing functions in Sass
- sass / Create a Sass and Compass project from the command line
- Sass-based project
- creating, from command line / Create a Sass and Compass project from the command line
- setting up / Setting up a Sass and Compass project
- Sass and Compass framework Foundation 3
- about / What is Susy?
- Sass cache
- clearing / Clearing the Sass cache
- Sass files
- working, in text editors / How to work with Sass files in text editors
- Scout
- selectors
- about / Easy CSS3 with Compass's mixins
- single line comments
- about / Sass single line comments
- span-columns mixin
- about / Prefix
- SPDY
- about / Creating and using partial files
- sprite configuration options
- squish-text mixin
- about / The squish-text mixin
- squish mixin
- about / Squish
- standalone style sheets
- partial files, converting to / Converting partial files to standalone style sheets
- standard CSS comments
- about / Standard CSS comments
- static grid
- creating / Creating a static ‘fixed’ grid
- styles
- extending, placeholder selectors used / Use placeholder selectors to extend styles only when needed
- styles.scss file / Make a partial file for fonts
- stylesheets / Create a Sass and Compass project from the command line
- Stylus
- sub-pixel rounding issues
- about / Sub-pixel rounding issues
- errors / Why sub-pixel rounding errors occur
- sub-pixel rounding issues
- container relative positioning / Container relative positioning
- Sublime Text
- subtraction function
- about / Subtraction
- suffix mixin
- about / Suffix
- Susy
- about / What is Susy?
- URL, for homepage / What is Susy?
- functions / What does Susy actually do?
- including, in project / Including Susy in a project
- project variables / Susy project variables
- setting, to border-box / Setting Susy to border-box
- breakpoints, creating with / Making breakpoints with Susy
- syntax / Standard Susy syntax and output
- output / Standard Susy syntax and output
- Susy Compass plugin
- installing / Installing the Susy Compass plugin
- Susy grid
- setting up / Setting up a Susy grid
- Susy grid helpers
- using / Using Susy grid helpers
T
- testing
- used, for avoiding tools / Avoid conjecture with tools and testing
- used, for avoiding testing / Avoid conjecture with tools and testing
- text-shadow
- with default values / Text shadow with default values
- text-shadow syntax
- about / The text-shadow syntax
- text editors
- about / How to work with Sass files in text editors
- Sass files, working / How to work with Sass files in text editors
- text replacement mixins
- about / Compass's text replacement mixins
- hide-text mixin / The hide-text mixin
- squish-text mixin / The squish-text mixin
- through keyword
- about / 'From to' and 'from through'
- to keyword
- about / 'From to' and 'from through'
- transitions mixin
- about / Transitions
U
- unit
- stripping, from value / Stripping the unit from a value
- adding, to variable value / Adding a unit to a variable value
- unused styles
- searching / Finding unused styles
- URIs (Uniform Resource Identifier)
- about / Creating data URIs from images
- url() function / The Compass cache buster
V
- value
- unit, stripping from / Stripping the unit from a value
- variables
- about / Why do we need CSS preprocessors?, Use variables (only define a value once)
- syntax / Understanding the syntax of variables
- used, for calculations / Calculations using variables
- variable value
- unit, adding to / Adding a unit to a variable value
- vendor prefixes
- about / Forget about vendor prefixes
- vendors
- Compass support, turning off for / Turning off Compass support for specific vendors
W
- @warn directive
- about / The @warn directive
- width
- adding, to HTML selector / Add the height and width to each generated HTML selector
- Windows
- Ruby, installing on / Installing Ruby on Windows
- command prompt install / Windows command prompt install
- with-grid-settings mixin / Grids within grids
Y
- Yeoman
Z
- Zen Grids
- URL / What is Susy?