mirror of
https://github.com/danog/sass-site.git
synced 2024-11-27 04:24:50 +01:00
127 lines
2.7 KiB
Plaintext
127 lines
2.7 KiB
Plaintext
---
|
|
title: Sass | Syntactically Awesome Style Sheets
|
|
---
|
|
|
|
%h1 CSS with super powers
|
|
|
|
%p
|
|
Sass is an extension of CSS 3 with a bunch of added features.
|
|
Already thought CSS was fun? Wait until you add Sass to the mix!
|
|
|
|
%h3 Get up and running quickly with:
|
|
|
|
.command-line
|
|
%h2 Command Line
|
|
%p Feel comfortable using a terminal, Ruby & Gems?
|
|
= link_to "Command Line Quickstart", '#', :class => 'button'
|
|
%span gem install sass
|
|
|
|
.gui
|
|
%h2 GUI Application
|
|
%p Get started quickly by installing a Sass for Linux, Mac or Windows
|
|
= link_to "GUI Quickstart", '#', :class => 'button'
|
|
%span= link_to "Download Compass.app", '#'
|
|
|
|
%h2 Sass Features
|
|
|
|
.feature-slideshow
|
|
%nav
|
|
%ul
|
|
%li= link_to "Preprocessing", '#', :class => 'active'
|
|
%li= link_to "Variables", '#'
|
|
%li= link_to "Nesting", '#'
|
|
%li= link_to "Mixins", '#'
|
|
%li= link_to "Inheritance", '#'
|
|
%li= link_to "Import", '#'
|
|
%li= link_to "Extend", '#'
|
|
%li= link_to "Operators", '#'
|
|
|
|
%ul.content
|
|
%li#preprocessing
|
|
%h3 Preprocessing
|
|
|
|
%p
|
|
A prepressor lets you take a Sass file and use features that don'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
|
|
|
|
= link_to "Variables »", '#', :class => 'button'
|
|
|
|
%li#variables
|
|
%h3 Variables
|
|
|
|
%p Variables definition
|
|
|
|
%pre
|
|
%code
|
|
example of preprocessing and css output
|
|
|
|
= link_to "Nesting »", '#', :class => 'button'
|
|
|
|
%li#nesting
|
|
%h3 Nesting
|
|
|
|
%p nesting definition
|
|
|
|
%pre
|
|
%code
|
|
example of nesting and css output
|
|
|
|
= link_to "Mixins »", '#', :class => 'button'
|
|
|
|
%li#mixins
|
|
%h3 Mixins
|
|
|
|
%p mixins definition
|
|
|
|
%pre
|
|
%code
|
|
example of mixins and css output
|
|
|
|
= link_to "Inheritance »", '#', :class => 'button'
|
|
|
|
%li#inheritance
|
|
%h3 Inheritance
|
|
|
|
%p inheritance definition
|
|
|
|
%pre
|
|
%code
|
|
example of inheritance and css output
|
|
|
|
= link_to "Import »", '#', :class => 'button'
|
|
|
|
%li#import
|
|
%h3 Import
|
|
|
|
%p import definition
|
|
|
|
%pre
|
|
%code
|
|
example of import and css output
|
|
|
|
= link_to "Extend »", '#', :class => 'button'
|
|
|
|
%li#extend
|
|
%h3 Extend
|
|
|
|
%p extend definition
|
|
|
|
%pre
|
|
%code
|
|
example of extend and css output
|
|
|
|
= link_to "Operators »", '#', :class => 'button'
|
|
|
|
%li#operators
|
|
%h3 Operators
|
|
|
|
%p operators definition
|
|
|
|
%pre
|
|
%code
|
|
example of operators and css output |