Less & Sass

3,003 views

Published on

Basic overview of tho popular css preprocesors

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,003
On SlideShare
0
From Embeds
0
Number of Embeds
1,719
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Less & Sass

  1. 1. LESS & SassOverview
  2. 2. How to START with
  3. 3. Client-side wayDownload less.js Create style.less filehttp://lesscss.org/ Instead of style.css
  4. 4. Link both files with the main HTML doc <link rel="stylesheet/less" href="styles.less" /> <script src="less.js" ></script>
  5. 5. Server-side wayFirst possibility Second possibilityDownload NPM Download Ruby http://www.ruby-lang.org/en/downloadshttps://github.com/isaacs/npmOr get Node.js For Windows usershttp://nodejs.org/ http://rubyinstaller.org Now start the command prompt
  6. 6. If you chose NPM type: $ npm install -g less
  7. 7. If you chose Ruby type: $ gem install less
  8. 8. How to compile the Less code?Client-side way It happens automatically when you hit (F5). You could also use some compilation tools.Server-side way $ lessc style.less > style.css Less compiler Output Css file Less file
  9. 9. LESS CompilersRemember the client-side way, well this is prettymuch the same, but we have tools to help us. simpLess CodeKit LiveReload
  10. 10. How to START with
  11. 11. Just Server-side way (there are dome unofficial client side ways) $ gem install sass
  12. 12. How to compile the Sass code?Server-side way $ sass --watch style.scss : style.cssSass compiler Watch for compilation SASS code file CSS code file
  13. 13. Less & Sass comparison
  14. 14. Variables just a value container
  15. 15. Sometimes we repeat the same valueover and over#firstElement { background: #abcdef}#secondElement { background: #abcdef background : #abcdef}#thirdElement { color : #ff91aa;}... color : #ff91aa#nthElement { color : #ff91aa;}
  16. 16. LESS SASS@bgColor : #abcdef; $bgColor : #abcdef;@justColor : #ff91aa; $justColor : #ff91aa;#firstElement{ #firstElement{ background: @bgColor; background: $bgColor;} }
  17. 17. Mixins variables on steroids
  18. 18. Sometimes we repeat a big chinks of codewith different values over and over#justElement { -moz-bordee-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}#anotherElement { /* if we want the same*/}
  19. 19. LESS SASS.roundBorder( @val : 10px ) { @roundBorder( $val : 10x) { -moz-bordee-radius: @val; -moz-bordee-radius: $val; -webkit-border-radius: @val; -webkit-border-radius: $val; -o-border-radius: @val; -o-border-radius: $val; border-radius: @val; border-radius: $val;} }#justElement{ #justElement{ .roundBorder( ); @include roundBorder()} }#anatherElement{ #anotherElement{ .roundBorder(17px); @include roundBorder(17px)} }
  20. 20. Nested css code no more epic repetition code
  21. 21. If we have a lot of nested content is tedious tohave address the deepest elements<div id=“main”> #main { <p> width:500px <span>Span text</span> } <a href=“#”>Link</a> #main p { </p> width: 150px;</div> } #main p span { color: #abcdef; } #main p a { text-decoration: none; }
  22. 22. LESS and SaSS#main{ width: 500px; FIRST LEVEL NESTING (P ELEMENT) p{ width: 150px; SECOND LEVEL NESTING Span element span { color: #abcdef; } a{ SECOND LEVEL NESTING anchor element text-decoration: none; } }}
  23. 23. Functions & Operations a way to do the math
  24. 24. OperationsLESS example Sass example// width variable // width variable@width: 500px; $width : 500px;#divNewWidth { #divNewWidth { width: (@width + 10) width: ($width + 10);} }Both Sass and Less supports math operators(+|-|*|/|%).
  25. 25. FunctionsBoth Sass and Less supports a variety of Mathand Color functions, that generated specific cssvaluesSass functions:http://sasslang.com/docs/yardoc/Sass/Script/Functions.htmlLess functions:http://lesscss.org/#-color-functions

×