Before you can use Sass, you need to set it up on your project. There are a couple of ways to start using SASS. You should really want to purchase Compass.app for $10 and use it to monitor files and compile scss into css.
You should NOT want to choose the command line method (free) unless your glutton for punishment.
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.
There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax. Files using this syntax have the .scss extension.
The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.
When the Sass is processed, it takes the variables we define and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.
When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. Here are the partial files I used in this project.
SCSS has the ability to link multiple css files together and then combine them into one single difficult-to-understand.css file. I link all my partials together in a main scss file which becomes the css file delivered to the browser
These are then combined into a large css file with media queries embedded throughout the file.
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. Think of them as functions that you can pass values to and it will output the css. You can even pass in values to make your mixin more flexible.
If you want to use two variables in a mixin, you should read this article.
@mixin graident($start, $end) -- the mixin function
@include graident(#3f3f3f, #272727) -- the mixin call
This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes.
It does not appear to work for extending .mylist li {}
Read More... Continue Cancel Back to Top
Doing math in your CSS is very helpful. Sass has a handful of standard math operators .
