mirror of
https://github.com/danog/sass-site.git
synced 2024-11-27 04:24:50 +01:00
122 lines
3.3 KiB
Plaintext
122 lines
3.3 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!
|
|
|
|
%h2 Get up and running quickly with:
|
|
|
|
%ul.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"
|
|
%p.description Feel comfortable using a terminal, Ruby & Gems?
|
|
.call-to-action
|
|
%p= link_to "CLI Quickstart", '#', :class => 'button'
|
|
%pre
|
|
%code
|
|
gem install sass
|
|
|
|
%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", '#', :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’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" |