syntactically awesome stylesheets

Syntactically Awesome

StyleSheetsCSS extension that adds power and

elegance to the basic language

Sass• An extension to CSS that adds power & elegance

to the basic languageo Allows the use of variables

o Allows the use of nested rules

o Allows the use of mixins

o Allows the use of inline imports

o … and much more

o ... all with a fully CSS-compatible syntax

More on Sass• Helps keep large stylesheets well-organized

• Gets small stylesheets up and running quickly

• Provides many useful functions for manipulating colors and other values

• There are two syntaxes available for Sasso SCSS (Sassy CSS) - an extension of the syntax of CSS. Files using this syntax

have the .scss extension

o Indented syntax (or sometimes just “Sass”) - provides a more concise way of writing CSS. Files using this syntax have the .sass extension

Sass syntax• Either syntax can import files written in the other

• Files can be automatically converted from one syntax to the other using the sass-convertcommand line tool:

# Convert Sass to SCSS$ sass-convert style.sass style.scss

# Convert SCSS to Sass$ sass-convert style.scss style.sass

Pre-Sass Installation• Before installing Sass, you need to install Ruby on

your machine

• Windows: o Use Ruby Installer -- http://rubyinstaller.org

o It's a single-click installer that will get everything set up for you super fast.

• LINUX/Ubuntu: o $ sudo apt-get install rubygems

o $ sudo yum install rubygems

Sass Installation• Ruby is already pre-installed on Mac

• At a terminal or Command Prompt:

o Verify Rubygem is installed - $ gem –v

o Install Sass - $ gem install sass OR $ sudo gem install sass• LINUX: $ sudo su -c "gem install sass"

o Verify Sass installation – $ sass -v

Preprocessing• 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 o variables, o nesting, o mixins, o inheritance and other nifty goodies that make writing CSS fun again

Using Sass• # Run Sass from the command line$ sass input.scss output.css

# Watch a single file$ sass --watch input.scss:output.css

# Watch entire directory$ sass --watch app/scss:public/stylesheets

$sass --watch ./

Sublime Text plugin• Install Syntax Highlighting for Sass

1. Control + Shift + P in Sublime Text

2. In the input field type "install p"

3. Choose "Package Control: Install Package"

4. Enter sass then hit ENTER

5. Verify sass installation:1. Repeat 1 – 2 above, in step 2 type “list p”2. Choose “Package Control: List Packages”. Scroll to find sass

Use working example to explore Sass

• Checkout provided html application and open it in Sublime Text

• From the terminal:o $ cd PROJECT_PATH/css/o sass --watch ./

• Note style.scsso This file will be used to generate style.csso style.css should NEVER be edited. It is a generated fileo style.scss imports a partialo Most of our work will be done in the imported partial

Partials• Partial Sass files contain snippets of CSS that you include

in your other Sass files 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

• 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 @import directive

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 @import in CSS it creates another HTTP request.

• Sass builds on top of the current CSS @import

• Sass takes the file that you want to import and combines it with the file you're importing into so you can serve a single CSS file to the web browser

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 $ symbol to make something a variable

$primary-font-stack: "gill sans", "verdana", "arial", san-serif;

Mixins• Some things in CSS are a bit tedious to write,

especially 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 mixinmore flexible

• To create a mixin you use the @mixin directive and give it a name

Inheritance• 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 headers for h1 to h5

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.

Practice!• Rewrite CSS and Scss code for table related

selectors and import in style.scss

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 a few elements

Resources• http://sass-lang.com

• http://leveluptuts.com/tutorials/sass-tutorials/

• http://rubyinstaller.org