SASS For The Win! An introduction to SASS Oct. 13, 2011 1 Created for Magma Rails 2011 - www.magmarails.com Slides posted at http://tinyurl.com/magma-haml- sass le code from this presentation can be found in the following sample https ://github.com/jonathandean/SASS-and-HAML- FTW
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
SASS For The Win!
An introduction to SASS
Oct. 13, 2011 Created for Magma Rails 2011 - www.magmarails.com
Slides posted at http://tinyurl.com/magma-haml-sass
Sample code from this presentation can be found in the following sample app:https://github.com/jonathandean/SASS-and-HAML-FTW
• Syntactically Awesome Stylesheets• Smarter CSS• Gives you variables and methods (mixins) for CSS• Lets you nest declarations• Provides selector inheritance• Lets you do math with your variable values• Works by compiling .sass or .scss files into normal valid .css• Commonly used in Ruby on Rails applications but can be
used in any web project
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
3
SASS and SCSS
SASS
• HAML-style indentation• No brackets or semi-
colons, based on indentation
• Less characters to type• Enforced
conventions/neatness
SCSS
• Semi-colon and bracket syntax
• Superset of normal CSS• Normal CSS is also valid
SCSS• Newer and recommended
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
Two available syntaxes
5
SASS and SCSS
• Both syntaxes have the same functionality• Both of the previous examples compile to:
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
#main{font-size: 12px;color: #333333;
}#main a{
color: #999999;}
• Already demonstrated basic variable usage and nesting• Note: Some examples compile using different formatting, I changed them for the slides for readability
6
More on nesting
• You can reference the parent selector with &
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
#content{font-size: 12px;&, a{
color: #333;}
}
#content{font-size: 12px;
}#content, #content a{
color: #333;}
SCSS Resulting CSS
7
Selector inheritance
• You can also extend other CSS declarations with @extend
.error{color: red;
}.seriousError{
@extend .error;font-weight: bold;
}
Resulting CSS
.error, .seriousError{color: red;
}.seriousError{
font-weight: bold;
}Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
8
Mixins
• Mixins are sets of reusable styles, almost like methods in other languages
width: (500px/2); // becomes width: 250px;– When part of another math expression
width: 10px + 500px/2; // becomes width: 260px;
• To use variables in the CSS version without doing math operations$some-val: 10px;$another-val: 8px;font: #{$some-val}/#{$another-val}; // font: 10px/8px;
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
13
Interpolation
• You can use variables in selectors and property declarations
• Import other .sass or .scss files using @import– @import “reset”;– @import “reset.css.scss”; // File extension also allowed
• You can also create partials that will only be imported to other files and not compiled to .css files themselves– Just name the partial with an underscore in the front, such as _sample.css.scss
– Now import the same way: @import “sample”;
• Handy for organizing styles into multiple files but compiling to only one file for use on the web
• Note: when using the Rails 3.1 asset pipeline, name your files with .css.scss or .css.sass extentions instead of just .scss or .sass
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
17
Nested properties
• Simplify the declaration of name-spaced CSS properties
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
.sassy{font:{
size: 12px;weight: bold;
}}
.sassy{font-size: 12px;font-weight: bold;
}
SCSS Resulting CSS
18
Color operations
• You can also do mathematic operations on color valuescolor: #010203 + #040506; // color: #050709;
• How this is computed#010203 + #040506 = #05070901 + 04 = 0502 + 05 = 0703 + 06 = 09
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
19
Variable defaults
• Will only assign the variable if it hasn’t been defined yet
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
$page-color: #333;$page-color: #666 !default;
$section-color: #999 !default;
// won’t be assigned because $page-color has already been defined// will be assigned because $section-color hasn’t been defined yet
• Handy for when you import a partial in some files but not in all of them and want the value from the partial to take precedence if it has already been defined
• Sass will auto-compile to output.css each time input.css is modified
• Use it for any project you have CSS
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
21
Using SASS in a Rails application
• Rails 3.1– Included by default!– Put your filename.css.scss files in app/assets/stylesheets/– The Asset Pipeline will deal with compiling them for you– See the sample application!
• For older versions– Add the following to your Gemfile
• gem “sass”
– You can put your sass files anywhere, but why not use the new convention introduced by 3.1
– Use sass --watch in the command line or another gem such as Compass
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com