Download - Introduction to SASS
![Page 1: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/1.jpg)
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
![Page 2: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/3.jpg)
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
Two available syntaxes
![Page 4: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/4.jpg)
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;}
}
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
Two available syntaxes
![Page 5: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/9.jpg)
9
Mixins with parameters
• Mixins can also take parameters
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
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);}
![Page 10: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/10.jpg)
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;
}
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
![Page 11: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/11.jpg)
11
Mathematic operations
• You can do simple math operations with your variable values, even if they have units
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
$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
![Page 12: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/12.jpg)
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;
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
![Page 13: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/13.jpg)
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;
}
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
Warning: RubyMine may not recognize this syntax and highlight it as an error
![Page 14: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/14.jpg)
14
Control directives
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
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;}
}
![Page 15: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/15.jpg)
15
Control directives
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
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;
}
![Page 16: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/16.jpg)
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
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
![Page 17: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/20.jpg)
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
Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com
![Page 21: Introduction to SASS](https://reader033.vdocuments.mx/reader033/viewer/2022061217/54b502844a7959c6378b460d/html5/thumbnails/21.jpg)
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