Syntactically Awesome StyleSheets CSS extension that adds power - - PowerPoint PPT Presentation

Syntactically Awesome StyleSheets

CSS extension that adds power and elegance to the basic language

Sass

• An extension to CSS that adds power & elegance

to the basic language

• Allows the use of variables
• Allows the use of nested rules
• Allows the use of mixins
• Allows the use of inline imports
• … and much more
• ... 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 Sass
• SCSS (Sassy CSS) - an extension of the syntax of CSS. Files using this syntax

have the .scss extension

• Indented syntax (or sometimes just “Sass”) - provides a more concise way
• f 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-convert command 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:
• Use Ruby Installer -- http://rubyinstaller.org
• It's a single-click installer that will get everything set up for you super fast.
• LINUX/Ubuntu:
• $ sudo apt-get install rubygems
• $ sudo yum install rubygems

Sass Installation

• Ruby is already pre-installed on Mac
• At a terminal or Command Prompt:
• Verify Rubygem is installed - $ gem –v
• Install Sass - $ gem install sass OR $ sudo gem install sass
• LINUX: $ sudo su -c "gem install sass"
• 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

• variables,
• nesting,
• mixins,
• 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:
• $ cd PROJECT_PATH/css/
• sass --watch ./
• Note style.scss
• This file will be used to generate style.css
• style.css should NEVER be edited. It is a generated file
• style.scss imports a partial
• 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 mixin

more 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
• f 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