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 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 o
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 o have the .scss extension Indented syntax (or sometimes just “Sass”) - provides a more concise way o 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-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 o It's a single-click installer that will get everything set up for you super fast. o • LINUX/Ubuntu: $ sudo apt-get install rubygems o $ sudo yum install rubygems o
Sass Installation • Ruby is already pre-installed on Mac • At a terminal or Command Prompt: Verify Rubygem is installed - $ gem –v o Install Sass - $ gem install sass OR $ sudo gem install sass o • LINUX: $ sudo su -c "gem install sass" Verify Sass installation – $ sass -v o
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, o nesting, o mixins, o inheritance and other nifty goodies that make writing CSS fun again o
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/ o sass --watch ./ o • Note style.scss This file will be used to generate style.css o style.css should NEVER be edited. It is a generated file o style.scss imports a partial o Most of our work will be done in the imported partial o
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 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 •
Recommend
More recommend
