using scss-at-noisestreet

Download Using scss-at-noisestreet

Post on 08-May-2015

137 views

Category:

Technology

1 download

Embed Size (px)

TRANSCRIPT

  • 1.SCSS: The Basics

2. First Things FirstSASS=SCSS. Sass is the name of the framework,while SCSS is basically the file extension nameused for Sass. E.g. style.scss. They are often usedinterchangeably.SCSS files are just CSS files with a .scssextension, i.e. you can still write your old css inan .scss file. 3. Why Use SCSS?1. Better Organization/Modularization of CSS files: 4. It is possible to break down CSS into different fileswithout using SCSS, but then:1. It will be a pain to manually concatenate them intoone or two files2. If we do not concatenate them, and instead rely onthe @import directive, then we will be makingmany HTTP requests to load the respective CSS,thus increasing load time. 5. I.e. SCSS Concatenates ModularizedFiles Automatically and ConvertsThem into Valid CSS Files 6. Why Use SCSS?2. Able to use Variables with CSSE.g. instead of copy-pasting the color #F89939 everywherewe need it, we do:/* Define our custom orange color */$yellow: #ffd320;/* Use it anywhere */.box {border:1px solid $yellow;}div{background-color:$yellow;} 7. Using variables also means: no more Find andReplace String if we decide to change propertyvalues:/*Just change here:*/$yellow: #ffce54;/* And its reflected everywhere */.box {border:1px solid $yellow;}div{background-color:$yellow;} 8. I.e. SCSS Allows Use of Variablesthat Cuts Down Development Time 9. Why Use SCSS?3. Automatic minification of CSS files4. Able to use standard math operations (+, -, *, /,and %) with CSS5. Adjust colors within SCSS, e.g. darken($yellow,20%);6. Use arguments and functions, And More. 10. Everyone Has to Come OnboardE.g. Anthony writes this in his style.scss:$yellow: #ffce54;.button{background-color:$yellow;}Which is converted into the following style.css:.button{background-color:#ffce54;} 11. Everyone Has to Come OnboardBhagaban doesnt use SCSS. Instead, he customizesdirectly on style.css:.button{font-size:10px;background-color:#ffce54;} 12. Everyone Has to Come OnboardAnthony isnt aware of that particular change, andcontinues working off his style.scss:$yellow: #ffce54;.button{color:#000;background-color:$yellow;}Which is converted to the following css:.button{color:#000;background-color:#ffce54;}...hence overwriting Bhagabans font-size:10px;without knowing it. 13. Its Easy to Use SCSS NOW1. With Ruby already installed on Mac, all we needis:gem install sassgem install sass2. Instead of editing a CSS file, we now edit a .SCSSfile. Either I pass you the SCSS file I started off,or you can simply save your CSS file with .SCSSextension. (Every valid CSS rule is valid SCSS, soif you are lazy to learn SCSS syntax at first, youcan write CSS on a .SCSS file.) 14. Its Easy to use SCSS NOW3. Let Sass watch over your file:sass --watchsass --watchstylesheets/scss/app.scssstylesheets/scss/app.scss::stylesheets/css/app.cssstylesheets/css/app.cssWhich basically means Sass will convert all your.scss files inside the scss/ folder into valid CSSfiles inside the css/ folder automatically, withoutyou worrying over it. 15. More ResourcesThe official tutorial on Sass homepage:http://sass-lang.com/tutorial.htmlCompass: sort of a add-on to Sass that provideseven more features: http://compass-style.org/help/, but which I havent found absolutely necessaryto get into so far. 16. Questions?

Recommended

View more >