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%;
}
