sass-site/source/index.html.haml

---
title: Sass | Syntactically Awesome Style Sheets
---



%h1 CSS with super powers

%p Sass makes writing CSS fun again. Think of Sass as an extension of CSS3 that adds a bunch of missing features like nesting, variables, mixins & extend.

%h2 There are a couple of ways to start using Sass:

%ol.quick-starts
  %li.command-line
    .quick-start-content
      %h3 Command Line
      %p.illustration
        %span.circle= image_tag "illustrations/command-line.png", :width => "48", :height => "48", :alt => "CLI Illustration"
      / Description for Unix users
      %p.description Using Sass on the command line is as simple as using a few commands. To install Sass just 
      type the following into the command line:
    .call-to-action
      / We'll try and point the user to either 
      %p= link_to "CLI Quickstart", '/quickstart/command-line#unix', :class => 'button'
      %pre
        %code
          gem install sass

      %p For Windows users, go check out the <a href="/quickstart/command-line#windows">Windows quickstart guide</a>.

  %li.gui-application
    .quick-start-content
      %h3 GUI Application
      %p.illustration
        %span.circle= image_tag "illustrations/gui.png", :width => "48", :height => "48", :alt => "GUI Quickstart"
      %p.description Get started quickly by installing a Sass for Linux, Mac or Windows.
    .call-to-action
      %p= link_to "GUI Quickstart", '/quickstart/gui', :class => 'button'
      %p= link_to "Get Compass.app", '#', :class => 'button'



- content_for :section_2 do
  .message.current-release
    .container
      %dl
        %dt Current Release:
        %dd Media Mark (3.2.1)
      %ul
        %li= link_to "Release Notes",       "#"
        %li= link_to "Fork Sass on Github", "#"

  .container
    .content
      %h1 Sass Features

      %nav.slide-navigation
        %ul
          %li= link_to "Preprocessing", '#1'
          %li= link_to "Variables",     '#2'
          %li= link_to "Nesting",       '#3'
          %li= link_to "Mixins",        '#4'
          %li= link_to "Inheritance",   '#5'
          %li= link_to "Import",        '#6'
          %li= link_to "Extend",        '#7'
          %li= link_to "Operators",     '#8'

      %ul.slides
        %li
          %h2 Preprocessing
          %p A prepressor lets you take a Sass file and use features that don&rsquo;t exist in CSS like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
          %pre
            %code
              example of preprocessing and css output

        %li
          %h2 Variables
          %p Variables definition
          %pre
            %code
              example of preprocessing and css output

        %li
          %h2 Nesting
          %p nesting definition
          %pre
            %code
              example of nesting and css output

        %li
          %h2 Mixins
          %p mixins definition
          %pre
            %code
              example of mixins and css output

        %li
          %h2 Inheritance
          %p inheritance definition
          %pre
            %code
              example of inheritance and css output

        %li
          %h2 Import
          %p import definition
          %pre
            %code
              example of import and css output

        %li
          %h2 Extend
          %p extend definition
          %pre
            %code
              example of extend and css output

        %li
          %h2 Operators
          %p operators definition
          %pre
            %code
              example of operators and css output

      %ul.pagination
        %li= link_to "Prev", "#", :class => "prev"
        %li= link_to "Next", "#", :class => "next"