Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LESS & Sass
Overview
How to START with
Client-side way
Download less.js      Create style.less file
http://lesscss.org/   Instead of style.css
Link both files with the main HTML doc

          <link rel="stylesheet/less" href="styles.less" />




          <script ...
Server-side way
First possibility               Second possibility
Download NPM                    Download Ruby
         ...
If you chose NPM type:




 $ npm install -g less
If you chose Ruby type:




 $ gem install less
How to compile the Less code?
Client-side way
     It happens automatically when you hit (F5).
     You could also use som...
LESS Compilers
Remember the client-side way, well this is pretty
much the same, but we have tools to help us.




 simpLes...
How to START with
Just Server-side way   (there are dome unofficial client side ways)




   $ gem install sass
How to compile the Sass code?
Server-side way
       $ sass --watch style.scss : style.css


Sass compiler

      Watch fo...
Less & Sass comparison
Variables
   just a value container
Sometimes we repeat the same value
over and over
#firstElement {
          background: #abcdef
}
#secondElement {         ...
LESS                           SASS
@bgColor : #abcdef;             $bgColor : #abcdef;
@justColor : #ff91aa;           $j...
Mixins
  variables on steroids
Sometimes we repeat a big chinks of code
with different values over and over
#justElement {
       -moz-bordee-radius: 10p...
LESS                                SASS
.roundBorder( @val : 10px ) {      @roundBorder( $val : 10x) {
    -moz-bordee-ra...
Nested css code
   no more epic repetition code
If we have a lot of nested content is tedious to
have address the deepest elements
<div id=“main”>                   #main...
LESS and SaSS
#main{
         width: 500px;                      FIRST LEVEL NESTING (P ELEMENT)
         p{
             ...
Functions & Operations
             a way to do the math
Operations

LESS example                     Sass example

// width variable                // width variable
@width: 500p...
Functions
Both Sass and Less supports a variety of Math
and Color functions, that generated specific css
values

Sass func...
Upcoming SlideShare
Loading in …5
×

of

Less & Sass Slide 1 Less & Sass Slide 2 Less & Sass Slide 3 Less & Sass Slide 4 Less & Sass Slide 5 Less & Sass Slide 6 Less & Sass Slide 7 Less & Sass Slide 8 Less & Sass Slide 9 Less & Sass Slide 10 Less & Sass Slide 11 Less & Sass Slide 12 Less & Sass Slide 13 Less & Sass Slide 14 Less & Sass Slide 15 Less & Sass Slide 16 Less & Sass Slide 17 Less & Sass Slide 18 Less & Sass Slide 19 Less & Sass Slide 20 Less & Sass Slide 21 Less & Sass Slide 22 Less & Sass Slide 23 Less & Sass Slide 24 Less & Sass Slide 25
Upcoming SlideShare
Emmet - Accelerating the front end development
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Less & Sass

Download to read offline

Basic overview of tho popular css preprocesors

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • mandegary

    Jan. 28, 2014

Basic overview of tho popular css preprocesors

Views

Total views

3,413

On Slideshare

0

From embeds

0

Number of embeds

1,729

Actions

Downloads

29

Shares

0

Comments

0

Likes

1

×