So sánh SASS vs LESS

Biến

// Sass
$background: #000000; 
body {
    background-color: $background;
}

// LESS
@background: #00000; 
body {
    background-color: @background;
}

Mixin

// Sass
 @mixin border-radius($radius) { 
    -webkit-border-radius: $radius; 
    -moz-border-radius: $radius; 
    -ms-border-radius: $radius; 
    border-radius: $radius; } 

.box1 { 
    @include border-radius(10px); 
}

// wynik CSS
.box1 { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    border-radius: 10px; 
}

// LESS
.box1 { 
    color:red; 
} 

.boxClass { 
    .box1; 
}

// wynik CSS
.box1 { 
    color: red; 
} 

.boxClass { 
    color: red; 
}

Trong LESS chuyển các đối số cho cấu trúc (đặc biệt trống nếu chúng ta không muốn bất kỳ lớp nào được hiển thị):

// LESS
.class1() { 
    color:red; 
} 

.boxClass { 
    .class1(); 
}

// wynik CSS
.boxClass { 
    color: red; 
}


// LESS
.class2(@color) { 
    color:@color; 
} 

.boxClass { 
    .class2(blue); 
}

// wynik CSS
.boxClass { 
    color: blue;
}

Hàm +, -, *, /

// Sass
$base-line-height: 16px * 1.5; 

@function emCalc($size-in-pixels, $base : $base-font-size) { 
    @return $size-in-pixels / $base * 1em; 
} 

h1 { 
    font-size: emCalc(72px); 
    margin-bottom: emCalc($base-line-height, 72px); 
}

// LESS
@color: #888; 
@width: 10px; 

div { 
    border-top-color: 
    @color + #111; 
    border-right-color: @color - 100; 
    border-bottom-color: @color * 2; 
    border-left-color: @color / 2.5; 
    border-width: @width / 5; 
}

Thừa kế

// Sass
.box2 { 
    color: red; 
}

.box1 { 
    @extend .box2; 
    background: blue; 
} 

// LESS
.box2 { 
    color: red; 
}

.box1 { 
    &:extend(.box2); 
    background: blue; 
} 

Vòng lặp

// Sass
@for $i from 0 through 2 { 
    .mb-#{$i*10} { 
        margin-bottom: 10px * $i; 
    } 
} 

@for $i from 0 to 2 { 
    .mt-#{$i*10} { 
        margin-top: 10px * $i; 
    } 
}


// wynik CSS
.mb-0 { 
    margin-bottom: 0px; 
} 

.mb-10 { 
    margin-bottom: 10px; 
} 

.mt-0 { 
    margin-top: 0px; 
} 

.mt-10 { 
    margin-top: 10px; 
}

// Sass
@each $icon in facebook, gplus, twitter { 
    .icon-#{$icon} { 
        background-image: url('/img/icon/#{$icon}.png'); 
    } 
} 

$vehicles: (car, plane, bike); 
@each $icon in $vehicles { 
    .icon-#{$icon} { 
        background-image: url('/img/icon/#{$icon}.png'); 
    } 
}

// wynik CSS
.icon-facebook { 
    background-image: url("/img/icon/facebook.png"); 
} 
.icon-gplus { 
    background-image: url("/img/icon/gplus.png"); 
} 
.icon-twitter { 
    background-image: url("/img/icon/twitter.png"); 
}
.icon-car { 
    background-image: url("/img/icon/car.png"); 
}
.icon-plane { 
    background-image: url("/img/icon/plane.png"); 
}
.icon-bike { 
    background-image: url("/img/icon/bike.png"); 
}

// Sass
$i: 10; 
@while $i >= 0 { 
    .p-#{$i*10} { 
        padding: 10px * $i; 
    } 
    $i: $i - 2; 
}

// wynik CSS
.p-100 { 
    padding: 100px; 
} 
.p-80 { 
    padding: 80px; 
} 
.p-60 {
    padding: 60px; 
} 
.p-40 { 
    padding: 40px; 
} 
.p-20 { 
    padding: 20px; 
} 
.p-0 { 
    padding: 0px; 
}

LESS:

// LESS
.loop(@counter) when (@counter > 0) { 
    .loop((@counter - 1)); 
    width: (10px * @counter); 
} 

div { 
    .loop(5); 
}

// wynik CSS
div { 
    width: 10px; 
    width: 20px; 
    width: 30px; 
    width: 40px; 
    width: 50px;
}

// LESS
.generate-columns(@n, @i: 1) when (@i =< @n) { 
    .column-@{i} { 
        width: (@i * 100% / @n); 
    } 
    .generate-columns(@n, (@i + 1)); 
}

.generate-columns(4);

// wynik CSS
.column-1 {
    width: 25%; 
} 
.column-2 { 
    width: 50%; 
} 
.column-3 { 
    width: 75%; 
} 
.column-4 { 
    width: 100%; 
}