Introduction to SASS

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
Sample code from this presentation can be found in the following sample app:
https://github.com/jonathandean/SASS-and-HAML-FTW

What is SASS?
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
2

SASS and SCSS
Two available syntaxes
SASS
SCSS
HAML-style indentation
No brackets or semi-colons, based on indentation
Less characters to type
Enforced conventions/neatness
Semi-colon and bracket syntax
Superset of normal CSS
Normal CSS is also valid SCSS
Newer and recommended
Oct. 13, 2011
3

SASS and SCSS
Two available syntaxes
SASS
SCSS
$txt-size: 12px
$txt-color: #333
$link-color: #999
#main
font-size: $txt-size
color: $txt-color
a
color: $link-color
$txt-size: 12px;
$txt-color: #333;
$link-color: #999;
#main{
font-size: $txt-size;
color: $txt-color;
a{
color: $link-color;
}
}
Oct. 13, 2011
4

SASS and SCSS
Both syntaxes have the same functionality
Both of the previous examples compile to:
Oct. 13, 2011
5
#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

More on nesting
You can reference the parent selector with &
Oct. 13, 2011
6
Resulting CSS
SCSS
#content{
font-size: 12px;
&, a{
color: #333;
}
}
#content{
font-size: 12px;
}
#content, #content a{
color: #333;
}

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
7

Mixins
Mixins are sets of reusable styles, almost like methods in other languages
@mixin awesome-text{
font-size: 24px;
font-weight: bold;
color: blue;
}
p{
@include awesome-text;
}
Resulting CSS
p{
font-size: 24px;
font-weight: bold;
color: blue;
}
Oct. 13, 2011
8

Mixins with parameters
Mixins can also take parameters
Oct. 13, 2011
9
SCSS
@mixin awesome-text($size){
font-size: $size;
font-weight: bold;
color: blue;
}
p{
@include awesome-text(24px);
}
li{
@include awesome-text(18px);
}
Resulting CSS
p{
font-size: 24px;
font-weight: bold;
color: blue;
}
li{
font-size: 18px;
font-weight: bold;
color: blue;
}

More advanced mixin example
@mixin image-replace($image-url){
&, & a{
display: block;
background: url($image-url) no-repeat;
}
a{
text-indent: -99999px;
text-decoration: none;
}
}
h1{
@include image-replace(“images/header.gif”);
}
Resulting CSS
h1, h1 a{
display: block;
background: url(“images/header.gif”) no-repeat;
}
h1 a{
text-indent: -99999px;
text-decoration: none;
}
Oct. 13, 2011
10

Mathematic operations
You can do simple math operations with your variable values, even if they have units
Oct. 13, 2011
11
$page-width: 500px;
$sidebar-width: 100px;
$content-width: $page-width - $sidebar-width;
#main{
width: $page-width;
#sidebar{
width: $sidebar-width;
}
#content{
width: $content-width;
}
}
Resulting CSS
#main{
width: 500px;
}
#main #sidebar{
width: 100px;
}
#main #content{
width: 400px;
}

Mathematic operations
Supported operations: +, -, *, /, %
The division operator (/) is also valid in normal CSS
font: 10px/8px; // stays font: 10px/8px;
So it is only used as division in three cases
When one of the values is stored in a variable
$content-width: 500px;
width: $content-width/2; // becomes width: 250px;
When surrounded by parenthesis
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
12

Interpolation
You can use variables in selectors and property declarations
$class-name: wrapper;
$attribute-name: font;
div.#{$class-name}{
#{$attribute-name}-size: 12px;
}
Resulting CSS
div.wrapper{
font-size: 12px;
}
Oct. 13, 2011
13
Warning: RubyMine may not recognize this syntax and highlight it as an error

Control directives
Oct. 13, 2011
14
@if
$type: big;
p{
@if $type == big{
font-size: 24px;
}
}
Resulting CSS
p{
font-size: 24px;
}
@if / @else
$type: small;
p{
@if $type == big {
font-size: 24px;
} @else if $type == medium{
font-size: 18px;
} @else {
font-size: 16px;
}
}
Resulting CSS
p{
font-size: 16px;
}

Control directives
Oct. 13, 2011
15
Resulting CSS
.item-1{
width: 10px; }
.item-2{
width: 20px; }
.item-3{
width: 30px; }
@for
@for $i from 1 through 3 {
.item-#{$i} {
width: 10px * $i;
}
}
@each
@each $item in item1, item2{
.#{$item}{
width: 500px;
}
}
.item1{
width: 500px; }
.item2{
width: 500px; }
@while
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 10px * $i;
}
$i: $i - 2;
}
.item-6{
width: 60px; }
.item-4{
width: 40px; }
.item-2{
width: 20px; }

Importing other SASS files
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.sassextentions instead of just .scss or .sass
Oct. 13, 2011
16

Nested properties
Simplify the declaration of name-spaced CSS properties
Oct. 13, 2011
17
Resulting CSS
SCSS
.sassy{
font:{
size: 12px;
weight: bold;
}
}
.sassy{
font-size: 12px;
font-weight: bold;
}

Color operations
You can also do mathematic operations on color values
color: #010203 + #040506; // color: #050709;
Howthisiscomputed
#010203 + #040506 = #050709
01 + 04 = 05
02 + 05 = 07
03 + 06 = 09
Oct. 13, 2011
18

Variable defaults
Will only assign the variable if it hasn’t been defined yet
Oct. 13, 2011
19
$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

Using SASS without Rails
gem install sass
sass --watch path/to/input.scss:path/to/output.css
Sass will auto-compile to output.css each time input.css is modified
Use it for any project you have CSS
Oct. 13, 2011
20

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
21

http://www.jonathandean.com	469
http://jonathandean.net	74
http://webcache.googleusercontent.com	3

Introduction to SASS

by Jon Dean on Oct 10, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 546

Statistics

Introduction to SASS — Presentation Transcript