Sass vs Less

What is a preprocessor ?

A Few Reasons Why

• It saves time
• Easier to maintain
• Easier to read
• Make your websites looks better
• Frameworks

How Does it Work?

Sass & Less

Introduction

Sass - syntactically awesome stylesheets.

Less - Language for End System Services

lesscss.org

sass-lang.com

Variables

@font-size: 16px;

div {
    font-size: @font-size;
}

$font-size: 16px;

div {
    font-size: $font-size;
}

div {
    font-size: 16px;
}

Nested Selectors

$link-color: #999;
$link-hover: #229ed3;

ul {
    margin: 0;

    li {
        float: left;
    }

    a {
        color: $link-color;

        &:hover {
            color: $link-hover;
        }
    }
}

@link-color: #999;
@link-hover: #229ed3;

ul {
    margin: 0;

    li {
        float: left;
    }

    a {
        color: @link-color;

        &:hover {
            color: @link-hover;
        }
    }
}

ul { margin: 0; }
ul li { float: left; }
ul a { color: #999; }
ul a:hover { color: #229ed3; }

Mixins

@mixin bordered($width) {
    border: $width solid #ddd;

    &:hover {
        border-color: #999;
    }
}

h1 {
    @include bordered(5px);
}

.bordered (@width) {
    border: @width solid #ddd;

    &:hover {
        border-color: #999;
    }
}

h1 {
    .bordered(5px);
}

h1 { border: 5px solid #ddd; }
h1:hover { border-color: #999; }

Mixins with arguments

@mixin bordered($width:2px){
  border:$width 2px black;
}

#menu a{
  @include bordered(4px);
  background: green;
}

.bordered(@width:2px){
  border:@width solid black;
}

#menu a{
  .bordered(4px);
  background: green;
}

#menu a {
  border: 4px 2px black;
  background: green;
}

Selector Inheritance

.block { margin: 10px 5px; }

p {
  @extend .block;
  border: 1px solid #eee;
}

ul, ol {
  @extend .block;
  color: #333;
  text-transform: uppercase;
}

.block { margin: 10px 5px; }

p {
  &:extend(.block);
  border: 1px solid #eee;
}

ul, ol {
  &:extend(.block);
  color: #333;
  text-transform: uppercase;
}

.block, p, ul, ol { 
    margin: 10px 5px; 
}
p { 
    border: 1px solid #eee; 
}
ul, ol {
    color: #333;
    text-transform: uppercase; 
}

Conditionals & control Structures

@if lightness($color) > 30% {
    background-color: black;
}

@else {
    background-color: white;
}

@for $i from 1px to 3px {
    .border-#{i} {
        border: $i solid blue;
    }
}

.mixin (@color) when (lightness(@color) > 30%) {
    background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
    background-color: white;
}

.loop(@counter) when (@counter > 0){
    .loop((@counter - 1));

    .border-@{counter} {
        border: 1px * @counter solid blue;
    }
}

Main question

Thank you for attention!