Your SlideShare is downloading. ×
0
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Introduction to SASS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to SASS

9,370

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,370
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SASS For The Win!<br />An introduction to SASS<br />Oct. 13, 2011<br />1<br />Created for Magma Rails 2011 - www.magmarails.com<br />Slides posted at http://tinyurl.com/magma-haml-sass<br />Sample code from this presentation can be found in the following sample app:<br />https://github.com/jonathandean/SASS-and-HAML-FTW<br />
  • 2. What is SASS?<br />Syntactically Awesome Stylesheets<br />Smarter CSS<br />Gives you variables and methods (mixins) for CSS<br />Lets you nest declarations<br />Provides selector inheritance<br />Lets you do math with your variable values<br />Works by compiling .sass or .scss files into normal valid .css<br />Commonly used in Ruby on Rails applications but can be used in any web project<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />2<br />
  • 3. SASS and SCSS<br />Two available syntaxes<br />SASS<br />SCSS<br />HAML-style indentation<br />No brackets or semi-colons, based on indentation<br />Less characters to type<br />Enforced conventions/neatness<br />Semi-colon and bracket syntax<br />Superset of normal CSS<br />Normal CSS is also valid SCSS<br />Newer and recommended<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />3<br />
  • 4. SASS and SCSS<br />Two available syntaxes<br />SASS<br />SCSS<br />$txt-size: 12px<br />$txt-color: #333<br />$link-color: #999<br />#main<br />font-size: $txt-size<br />color: $txt-color<br />a<br /> color: $link-color<br />$txt-size: 12px;<br />$txt-color: #333;<br />$link-color: #999;<br />#main{<br /> font-size: $txt-size;<br /> color: $txt-color;<br />a{<br /> color: $link-color;<br /> }<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />4<br />
  • 5. SASS and SCSS<br />Both syntaxes have the same functionality<br />Both of the previous examples compile to:<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />5<br />#main{<br /> font-size: 12px;<br /> color: #333333;<br />}<br />#main a{<br /> color: #999999;<br />}<br /><ul><li>Already demonstrated basic variable usage and nesting
  • 6. Note: Some examples compile using different formatting, I changed them for the slides for readability</li></li></ul><li>More on nesting<br />You can reference the parent selector with &amp;<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />6<br />Resulting CSS<br />SCSS<br />#content{<br />font-size: 12px;<br />&amp;, a{<br /> color: #333;<br />} <br />}<br />#content{<br /> font-size: 12px;<br />}<br />#content, #content a{<br /> color: #333;<br />}<br />
  • 7. Selector inheritance<br />You can also extend other CSS declarations with @extend<br />.error{<br />color: red;<br />}<br />.seriousError{<br />@extend .error;<br />font-weight: bold;<br />}<br />Resulting CSS<br />.error, .seriousError{<br />color: red;<br />}<br />.seriousError{<br />font-weight: bold;<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />7<br />
  • 8. Mixins<br />Mixins are sets of reusable styles, almost like methods in other languages<br />@mixin awesome-text{<br />font-size: 24px;<br />font-weight: bold;<br />color: blue;<br />}<br />p{<br />@include awesome-text;<br />}<br />Resulting CSS<br />p{<br />font-size: 24px;<br />font-weight: bold;<br />color: blue;<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />8<br />
  • 9. Mixins with parameters<br />Mixins can also take parameters<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />9<br />SCSS<br />@mixin awesome-text($size){<br />font-size: $size;<br />font-weight: bold;<br />color: blue;<br />}<br />p{<br />@include awesome-text(24px);<br />}<br />li{<br /> @include awesome-text(18px);<br />}<br />Resulting CSS<br />p{<br />font-size: 24px;<br />font-weight: bold;<br />color: blue;<br />}<br />li{<br />font-size: 18px;<br />font-weight: bold;<br />color: blue;<br />}<br />
  • 10. More advanced mixin example<br />@mixin image-replace($image-url){<br />&amp;, &amp; a{<br /> display: block;<br /> background: url($image-url) no-repeat;<br /> }<br /> a{<br /> text-indent: -99999px;<br /> text-decoration: none;<br /> }<br />}<br />h1{<br />@include image-replace(“images/header.gif”);<br />}<br />Resulting CSS<br />h1, h1 a{<br /> display: block;<br />background: url(“images/header.gif”) no-repeat;<br />}<br />h1 a{<br />text-indent: -99999px;<br />text-decoration: none;<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />10<br />
  • 11. Mathematic operations<br />You can do simple math operations with your variable values, even if they have units<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />11<br />$page-width: 500px;<br />$sidebar-width: 100px;<br />$content-width: $page-width - $sidebar-width;<br />#main{<br /> width: $page-width;<br />#sidebar{<br /> width: $sidebar-width;<br />}<br />#content{<br /> width: $content-width;<br />}<br />}<br />Resulting CSS<br />#main{<br /> width: 500px;<br />}<br />#main #sidebar{<br />width: 100px;<br />}<br />#main #content{<br /> width: 400px;<br />}<br />
  • 12. Mathematic operations<br />Supported operations: +, -, *, /, %<br />The division operator (/) is also valid in normal CSS<br />font: 10px/8px; // stays font: 10px/8px;<br />So it is only used as division in three cases<br />When one of the values is stored in a variable<br />$content-width: 500px;<br />width: $content-width/2; // becomes width: 250px;<br />When surrounded by parenthesis<br />width: (500px/2); // becomes width: 250px;<br />When part of another math expression<br />width: 10px + 500px/2; // becomes width: 260px;<br />To use variables in the CSS version without doing math operations<br />$some-val: 10px;<br />$another-val: 8px;<br />font: #{$some-val}/#{$another-val}; // font: 10px/8px;<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />12<br />
  • 13. Interpolation<br />You can use variables in selectors and property declarations<br />$class-name: wrapper;<br />$attribute-name: font;<br />div.#{$class-name}{<br />#{$attribute-name}-size: 12px;<br />}<br />Resulting CSS<br />div.wrapper{<br /> font-size: 12px;<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />13<br />Warning: RubyMine may not recognize this syntax and highlight it as an error<br />
  • 14. Control directives<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />14<br />@if<br />$type: big;<br />p{<br />@if $type == big{<br />font-size: 24px;<br />}<br />}<br />Resulting CSS<br />p{<br /> font-size: 24px;<br />}<br />@if / @else<br />$type: small;<br />p{<br />@if $type == big {<br />font-size: 24px;<br />} @else if $type == medium{<br /> font-size: 18px;<br />} @else {<br /> font-size: 16px;<br />}<br />}<br />Resulting CSS<br />p{<br /> font-size: 16px;<br />}<br />
  • 15. Control directives<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />15<br />Resulting CSS<br />.item-1{<br />width: 10px; }<br />.item-2{<br />width: 20px; }<br />.item-3{<br />width: 30px; }<br />@for<br />@for $i from 1 through 3 {<br />.item-#{$i} {<br />width: 10px * $i; <br />}<br />}<br />@each<br /> @each $item in item1, item2{<br /> .#{$item}{<br /> width: 500px;<br /> }<br /> }<br />.item1{<br />width: 500px; }<br />.item2{<br />width: 500px; }<br />@while<br /> $i: 6;<br /> @while $i &gt; 0 {<br /> .item-#{$i} {<br /> width: 10px * $i;<br /> }<br /> $i: $i - 2;<br /> }<br />.item-6{<br />width: 60px; }<br />.item-4{<br />width: 40px; }<br />.item-2{<br />width: 20px; }<br />
  • 16. Importing other SASS files<br />Import other .sass or .scss files using @import<br />@import “reset”;<br />@import “reset.css.scss”; // File extension also allowed<br />You can also create partials that will only be imported to other files and not compiled to .css files themselves<br />Just name the partial with an underscore in the front, such as _sample.css.scss<br />Now import the same way: @import “sample”;<br />Handy for organizing styles into multiple files but compiling to only one file for use on the web<br />Note: when using the Rails 3.1 asset pipeline, name your files with .css.scss or .css.sassextentions instead of just .scss or .sass<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />16<br />
  • 17. Nested properties<br />Simplify the declaration of name-spaced CSS properties<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />17<br />Resulting CSS<br />SCSS<br />.sassy{<br />font:{<br /> size: 12px;<br /> weight: bold;<br />}<br />}<br />.sassy{<br />font-size: 12px;<br /> font-weight: bold;<br />}<br />
  • 18. Color operations<br />You can also do mathematic operations on color values<br />color: #010203 + #040506; // color: #050709;<br />Howthisiscomputed<br />#010203 + #040506 = #050709<br />01 + 04 = 05<br />02 + 05 = 07<br />03 + 06 = 09<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />18<br />
  • 19. Variable defaults<br />Will only assign the variable if it hasn’t been defined yet<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />19<br />$page-color: #333;<br />$page-color: #666 !default;<br />$section-color: #999 !default;<br />// won’t be assigned because $page-color has already been defined<br />// will be assigned because $section-color hasn’t been defined yet<br />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<br />
  • 20. Using SASS without Rails<br />gem install sass<br />sass --watch path/to/input.scss:path/to/output.css<br />Sass will auto-compile to output.css each time input.css is modified<br />Use it for any project you have CSS<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />20<br />
  • 21. Using SASS in a Rails application<br />Rails 3.1<br />Included by default!<br />Put your filename.css.scss files in app/assets/stylesheets/<br />The Asset Pipeline will deal with compiling them for you<br />See the sample application!<br />For older versions<br />Add the following to your Gemfile<br />gem “sass”<br />You can put your sass files anywhere, but why not use the new convention introduced by 3.1<br />Use sass --watch in the command line or another gem such as Compass<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />21<br />

×