Introduction to SASS

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

http://tinyurl.com/magma-haml-sass

http://tinyurl.com/magma-haml-sass

https://github.com/jonathandean/SASS-and-HAML-FTW



2

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

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


Two available syntaxes

4

SASS and SCSS

SASS$txt-size: 12px$txt-color: #333$link-color: #999

#mainfont-size: $txt-sizecolor: $txt-colora

color: $link-color

SCSS$txt-size: 12px;$txt-color: #333;$link-color: #999;

#main{font-size: $txt-size;color: $txt-color;a{color: $link-color;}

}


Two available syntaxes

5

SASS and SCSS

• Both syntaxes have the same functionality• Both of the previous examples compile to:


#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 &


#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

@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 An Introduction to SASS by Jonathan Dean - www.jonathandean.com

9

Mixins with parameters

• Mixins can also take parameters


Resulting CSSp{

font-size: 24px;font-weight: bold;color: blue;

}li{

font-size: 18px;font-weight: bold;color: blue;

}

SCSS@mixin awesome-text($size){

font-size: $size;font-weight: bold;color: blue;

}p{

@include awesome-text(24px);}li{

@include awesome-text(18px);}

10

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;

}


11

Mathematic operations

• You can do simple math operations with your variable values, even if they have units


$page-width: 500px;$sidebar-width: 100px;$content-width: $page-width - $sidebar-width;

#main{width: $page-width;

#sidebar{width: $sidebar-width;

}#content{

width: $content-width;}

}

#main{width: 500px;

}#main #sidebar{

width: 100px;}#main #content{

width: 400px;}

Resulting CSS

12

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;


13

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;

}


Warning: RubyMine may not recognize this syntax and highlight it as an error

14

Control directives


Resulting CSSp{

font-size: 24px;}

Resulting CSSp{

font-size: 16px;}

@if$type: big;p{

@if $type == big{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;}

}

15

Control directives


Resulting CSS.item-1{ width: 10px; }.item-2{ width: 20px; }.item-3{ width: 30px; }

.item1{ width: 500px; }.item2{ width: 500px; }

.item-6{ width: 60px; }.item-4{ width: 40px; }.item-2{ width: 20px; }

@for@for $i from 1 through 3 {

.item-#{$i} {width: 10px * $i;

}}

@each@each $item in item1, item2{

.#{$item}{width: 500px;

}}

@while$i: 6;@while $i > 0 {

.item-#{$i} {width: 10px * $i;

}$i: $i - 2;

}

16

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.sass extentions instead of just .scss or .sass


17

Nested properties

• Simplify the declaration of name-spaced CSS properties


.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


19

Variable defaults

• Will only assign the variable if it hasn’t been defined yet


$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

20

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


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


Introduction to SASS

Technology

Transcript of Introduction to SASS