Comparison Between LESS and SASS

0 Comments

Webpage

For the CSS developers out there that have been hearing the buzz words of 'LESS' and 'SASS' and not knowing what they are, here's an article for you. After researching these languages, I've found that they are kind of like Javascript files that run on your computer and create CSS files for you. And the reason why you would use them is so that you don't have to do the repititous tasks that CSS requires.

Both languages are pretty awesome and they both have pros and cons. That's why I wanted to write this article:

  1. to compare the pros and cons of LESS and SASS
  2. to write a cheat sheet for both of their syntax

With that goal, enjoy this resource:

  LESS SASS
CSS Converting Link page to your .less file and less javascript file or convert .less file into a .css file with a converter like CodeKit or SimpLESS. Convert .scss or .sass file into a .css file using Ruby on Rails or a converter like CodeKit.
Variable
@blue: #00214D;

span.blue{
   color: @blue;
}
$blue: #00214D;

span.blue{
   color: $blue;
}
Mixin
.small-serif{
   font-size:11px;
   line-height:15px;
   font-family:Georgia, serif;
}

p.small-serif{
   .small-serif;
}
@mixin small-serif{
   font-size:11px;
   line-height:15px;
   font-family:Georgia, serif;
}

p.small-serif{
   @include small-serif;
}
Mixins with Parameters
.border-radius(@radius:5px){
   -webkit-border-radius:@radius;
   -moz-border-radius:@radius;
   border-radius:@radius;
}

div.sqround{
   .border-radius;
}
div.circle{
   .border-radius(10px);
}
@mixin border-radius($radius:5px){
   -webkit-border-radius:@radius;
   -moz-border-radius:@radius;
   border-radius:@radius;
}

div.sqround{
   @include border-radius;
}
div.circle{
   @include border-radius(10px);
}
Nested Rules
a{
   text-decoration:underline;
   span{
      color:#000;
   }
   &:hover{
      color:#c00;
   }		
}
a{
   text-decoration:underline;
   span{
      color:#000;
   }
   &:hover{
      color:#c00;
   }		
}
Operators
@color:#f00;
@padding:10px;
@border:1px;

p.highlight{
   color:@color + #00f;
   border:(@border+5)/2 solid #000;
   padding:@padding @padding +10;
}
$power: on;
$color: if($power=='on',#c00,#666);
$padding:10px;
$border:1px;

p.highlight{
   color:$color + #00f;
   border:($border+5)/2 solid #000;
   padding:$padding $padding +10;
}
Pattern Matching
.alert(error){ //attr specific
   color:#c00;
}
.alert(success){ //attr specific
   color:#069;
}
.alert(other, #0f0){
   color:@color;
}
.alert(@_){
   padding:10px;
   border:1px solid #000;
}
.alert(@_,@_){
   padding:10px;
   border:1px solid #000;
}

@type:error;
p.message{
   .alert(@type);
}
p.other-message{
   .alert(other, #000);
}
N/A
Looping
p.text(@color) when 
(darkness(@color) =< 50%){
   color:lighten(@color, 20%);
}
p.text(@_){
   color:#000;
}

.loop(@index) when (@index > 0){
   .class{
      z-index:@index;
   }
   //call itself
   .loopCount(@index - 1);
}
//stop loop
.loopCount(0){}

//output stuff
.class(10);
$boolean: true;

=conditional-mixin
@if $boolean
   display:block;
@else
   display:none;

.img{
   +conditional-mixin
}

@for $i from 1 through 5{
   div.col{
      width:10px * $i;
   }
}
Functions
p.footnote{
   lighten(@color, 50%);
}
p.footnote{
   lighten(@color, 50%);
}

Hope this resource helps you as much as it does me!

Share:

Comments

Be the first to leave a comment.

Add a comment