Successfully reported this slideshow.
Your SlideShare is downloading. ×
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 25 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Less & Sass (20)

Advertisement

Recently uploaded (20)

Advertisement

Less & Sass

  1. 1. LESS & Sass Overview
  2. 2. How to START with
  3. 3. Client-side way Download less.js Create style.less file http://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 way First possibility Second possibility Download NPM Download Ruby http://www.ruby-lang.org/en/downloads https://github.com/isaacs/npm Or get Node.js For Windows users http://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 Compilers Remember the client-side way, well this is pretty much 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.css Sass 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 value over 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 code with 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 to have 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. Operations LESS 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. Functions Both Sass and Less supports a variety of Math and Color functions, that generated specific css values Sass functions: http://sasslang.com/docs/yardoc/Sass/Script/Functions.html Less functions: http://lesscss.org/#-color-functions

×