sass-site/source/guide.html.haml

---
title: Sass Basics
---

%p.introduction
  Before you can use Sass, you need to set it up on your project. If you want
  to just browse here, go ahead, but we recommend you go install Sass first.
  = link_to "Go here", "/install"
  if you want to learn how to get everything setup.

- content_for :complementary do
  %h3 Topics
  %ul.anchors
    %li= link_to "Preprocessing", "#topic-1"
    %li= link_to "Variables",     "#topic-2"
    %li= link_to "Nesting",       "#topic-3"
    %li= link_to "Partials",      "#topic-4"
    %li= link_to "Import",        "#topic-5"
    %li= link_to "Mixins",        "#topic-6"
    %li= link_to "Inheritance",   "#topic-7"
    %li= link_to "Operators",     "#topic-8"

%ul.slides
  %li#topic-1
    :markdown
      ## Preprocessing

      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 as a normal CSS file that you can use in your web site.

      The most direct way to make this happen is in your terminal. Once Sass is installed, you can run `sass input.scss output.css` from your terminal. You can watch either individual files or entire directories. In addition, you can watch folders or directories with the `--watch` flag. An example of running Sass while watching an entire directory is the following:

    ~ partial "code-snippets/homepage-sass-watch"

    %hr/

  %li#topic-2
    :markdown
      ## Variables

      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 <code>$</code> symbol to make something a variable. Here's an example:

    %ul
      %li= link_to "SCSS", "#topic-2-SCSS"
      %li= link_to "Sass", "#topic-2-Sass"

    #topic-2-SCSS
      %h3 SCSS Syntax
      ~ partial "code-snippets/homepage-variables-scss"

    #topic-2-Sass
      %h3 Sass Syntax
      ~ partial "code-snippets/homepage-variables-sass"

    :markdown
      When the Sass is processed, it takes the variables we define for the <code>$font-stack</code> and <code>$primary-color</code> 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&nbsp;site.

    ~ partial "code-snippets/homepage-variables-css"

    %hr/

  %li#topic-3
    :markdown
      ## Nesting

      When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.

      Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in
      over-qualified CSS that could prove hard to maintain and is generally considered bad practice.

      With that in mind, here's an example of some typical styles for a site's&nbsp;navigation:

    %ul
      %li= link_to "SCSS", "#topic-3-SCSS"
      %li= link_to "Sass", "#topic-3-Sass"

    #topic-3-SCSS
      %h3 SCSS Syntax
      ~ partial "code-snippets/homepage-nesting-scss"

    #topic-3-Sass
      %h3 Sass Syntax
      ~ partial "code-snippets/homepage-nesting-sass"

    :markdown
      You'll notice that the <code>ul</code>, <code>li</code>, and <code>a</code> selectors are nested inside the <code>nav</code> selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like&nbsp;this:

    ~ partial "code-snippets/homepage-nesting-css"

    %hr/

  %li#topic-4
    :markdown
      ## Partials

      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. You might name it something like <code>_partial.scss</code>. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the <code>@import</code> directive.

      ***

  %li#topic-5
    :markdown
      ## Import

      CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use <code>@import</code> in CSS it creates another HTTP request. Sass builds on top of the current CSS <code>@import</code> but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

      Let's say you have a couple of Sass files, <code>\_reset.scss</code> and <code>base.scss</code>. We want to import <code>\_reset.scss</code> into <code>base.scss</code>.

    %ul
      %li= link_to "SCSS", "#topic-5-SCSS"
      %li= link_to "Sass", "#topic-5-Sass"

    #topic-5-SCSS
      %h3 SCSS Syntax
      ~ partial "code-snippets/homepage-import-1-scss"
      ~ partial "code-snippets/homepage-import-2-scss"

    #topic-5-Sass
      %h3 Sass Syntax
      ~ partial "code-snippets/homepage-import-1-sass"
      ~ partial "code-snippets/homepage-import-2-sass"

    :markdown

      Notice we're using <code>@import 'reset';</code> in the <code>base.scss</code> file. When you import a file you don't need to include the file extension <code>.scss</code>. Sass is smart and will figure it out for you. When you generate the CSS you'll&nbsp;get:

    ~ partial "code-snippets/homepage-import-css"

    %hr/

  %li#topic-6
    :markdown
      ## Mixins

      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. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for <code>border-radius</code>.

    %ul
      %li= link_to "SCSS", "#topic-6-SCSS"
      %li= link_to "Sass", "#topic-6-Sass"

    #topic-6-SCSS
      %h3 SCSS Syntax
      ~ partial "code-snippets/homepage-mixins-scss"

    #topic-6-Sass
      %h3 Sass Syntax
      ~ partial "code-snippets/homepage-mixins-sass"

    :markdown
      To create a mixin you use the <code>@mixin</code> directive and give it a name. We've named our mixin <code>border-radius</code>. We're also using the variable <code>$radius</code> inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with <code>@include</code> followed by the name of the mixin. When your CSS is generated it'll look like this:

    ~ partial "code-snippets/homepage-mixins-css"

    %hr/

  %li#topic-7
    :markdown
      ## Extend/Inheritance

      This is one of the most useful features of Sass. Using <code>@extend</code> 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.

    %ul
      %li= link_to "SCSS", "#topic-7-SCSS"
      %li= link_to "Sass", "#topic-7-Sass"

    #topic-7-SCSS
      %h3 SCSS Syntax
      ~ partial "code-snippets/homepage-extend-scss"

    #topic-7-Sass
      %h3 Sass Syntax
      ~ partial "code-snippets/homepage-extend-sass"

    :markdown
      What the above code does is allow you to take the CSS properties in <code>.message</code> and apply them to <code>.success</code>, <code>.error</code>, & <code>.warning</code>. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks&nbsp;like:

    ~ partial "code-snippets/homepage-extend-css"

    %hr/

  %li#topic-8
    :markdown
      ## Operators

      Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're going to do some simple math to calculate widths for an `aside` & `article`.

    %ul
      %li= link_to "SCSS", "#topic-8-SCSS"
      %li= link_to "Sass", "#topic-8-Sass"

    #topic-8-SCSS
      %h3 SCSS Syntax
      ~ partial "code-snippets/homepage-operators-scss"

    #topic-8-Sass
      %h3 Sass Syntax
      ~ partial "code-snippets/homepage-operators-sass"

    :markdown
      We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like:

    ~ partial "code-snippets/homepage-operators-css"