Категория: CSS.
Sass и Less оба являются препроцессорами CSS, и наиболее часто используемые. Препроцессоры CSS являются очень мощным инструментом, и поможет вам упростить процесс разработки. Они оба имеют много общего в синтаксисе, основным различием между ними является способ обработки. Less это JavaScript библиотека и обрабатывается на стороне клиента. В то время Sass работает на Ruby и он обрабатывается на стороне клиента.
Давайте попробуем разобраться, какая разница между Sass и Less.
Приступая к работе Sass.
Sass требует Ruby для работы.
Ruby предварительно установлен в Mac, но в случае Windows, вы должны сначала установить Ruby.
Кроме того, вы должны установить Sass через терминал или командную строку.
Приступая к работе с Less.
Less установить намного легче, так оно построено на языке JavaScript. Это так же просто как подключить JavaScript в HTML документ. Также существует несколько программ с графическим интерфейсом для работы с Less, например WinLess для Windows.
1-Вложенные правила.
Sass и Less позволяют использовать вложенные правила. Когда мы используем простой CSS, часто встречаются такие участки кода, как например меню навигации на сайте.
Где для каждого элемента мы сначала прописываем родительский тег, и таким образом регулируем наследование правил.
/* -------Sass-------- */
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
/* -------Пример в CSS-------- */
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
/* -------LESS-------- */
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
/* -------Пример в CSS-------- */
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
2 –Миксины
Миксины — это функции, позволяющие многократно использовать набор CSS-свойств во всей таблице стилей. Вместо того, чтобы писать один и тот же код несколько раз, мы можем написать его один раз в миксине и затем использовать. Это может быть полезно для стилизации определенных элементов и для автоматической расстановки вендорных префиксов. Когда миксин включен в какой-либо селектор, препроцессор считывает аргументы (если они есть) и подставляет код, который написан в исходном миксине. Миксины определяются немного по-другому в Sass чем Less.
В Sass используется директива @mixin, в Less она определена как селектор класса.
Напимер:
/* -------Sass-------- */
@mixin border-radius ($values) {
border-radius: $values;
}
nav {
margin: 50px auto 0;
width: 788px;
height: 45px;
@include border-radius(10px);
}
/* -------LESS-------- */
.border(@radius) {
border-radius: @radius;
}
nav {
margin: 50px auto 0;
width: 788px;
height: 45px;
.border(10px);
}
Миксины используются для включения свойств из одного набора правил в другой набор. Этот метод идёт дальше с селекторами наследования в Sass.
Sass расширяет группы селекторов , которые имеют одинаковые свойства и значения с помощью директивы @extend, вместо того чтобы копировать все свойства.
Напимер:
/* -------Sass-------- */
.circle {
border: 1px solid #ccc;
border-radius: 50px;
overflow: hidden;
}
.avatar {
@extend .circle;
}
/* -------Пример в CSS-------- */
.circle, .avatar {
border: 1px solid #ccc;
border-radius: 50px;
overflow: hidden;
}
Условные операторы.
Это то, чего нет в Less!
Sass позволяет использовать операторы If {}, else {}, , =, ==.
/* Sample Sass "if" statement */
@if lightness($color) >; 30% {
background-color: #000;
} @else {
background-color: #fff;
}
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
.border-#{i} {
border: $i solid blue;
}
}
Циклы.
Less позволяет использовать циклы только с числовым значениями. А вот Sass есть возможность перебирать данные любого вида.
Например:
/* -------Less-------- */
.looper (@i) when (@i > 0) {
.image-class-@{i} {
background: url("../img/@{i}.png") no-repeat;
}
.looper(@i – 1);
}
.looper(0);
.looper(3);
//--------------- Outputs: --------------------
//.image-class-3 {
// background: url("../img/3.png") no-repeat;
//}
//.image-class-2 {
// background: url("../img/2.png") no-repeat;
//}
//.image-class-1 {
// background: url("../img/1.png") no-repeat;
//}
/* -------Sass-------- */
@each $beer in stout, pilsner, lager {
.#{$beer}-background {
background: url("../img/beers/#{$beer}.png") no-repeat;
}
}
// ------------------- Outputs: ---------------------
//.stout-background {
// background: url("../img/beers/stout.png") no-repeat;
//}
//.pilsner-background {
// background: url("../img/beers/pilsner.png") no-repeat;
//}
//.lager-background {
// background: url("../img/beers/lager.png") no-repeat;
//}
Операции с числами.
Sass и Less поддерживают основные арифметические операции над числами. Однако есть разница в том, как они обращаются с единицами измерения. LESS возьмет за единицу измерения значение первой переменной, игнорируя все остальные, например 100px + 2em == 102px. Sass даст чётко понять что здесь есть ошибка.
Также Sass позволяет проводить математические операции с неизвестными единицами измерения, которые могут появиться в следующих спецификации W3C или в случае вывода нестандартного блока в браузере.
/* -------Sass-------- */ 1cm * 1em => 1 cm * em 2in * 3in => 6 in * in (1cm / 1em) * 4em => 4cm 2in + 3cm + 2pc => 3.514in 3in / 2in => 1.5 } /* -------LESS-------- */ 1cm * 1em => Error 2in * 3in => 6in (1cm / 1em) * 4em => Error 2in + 3cm + 2pc => Error 3in / 2in => 1.5in
Функции работы с цветами.
Функции для работы с цветом — это встроенные в препроцессор функции, позволяющие манипулировать цветами. Эти функции могут быть полезны для создания градиентов, более тёмных или светлых цветов при hover’e и так далее. Это всего лишь короткий список основных функций для работы с цветом в Sass. Полный список функций доступен в документации.
Полный список функций для работы с цветом можно посмотреть в документации Less.
/* ------Аксессоры:------ */ red($color) green($color) blue($color) hue($color) saturation($color) lightness($color) alpha($color) /* -------Мутаторы:------ */ lighten($color, $amount) darken($color, $amount) saturate($color, $amount) desaturate($color, $amount) adjust-hue($color, $amount) opacify($color, $amount) transparentize($color, $amount) mix($color1, $color2[, $amount]) grayscale($color) compliment($color)
Переменные.
Переменные могут быть объявлены и использованы в любом месте таблицы стилей.
Они могут содержать в себе любое значение, являющееся значением какого-либо CSS-свойства — например, цвет, число (включая единицы измерения), или текст.
Sass
Переменные в Sass начинаются с символа $ и объявляются точно так же, как и CSS-свойства.
/* -------Sass-------- */
$mainSassColor: #ff0087;
p {color: $mainSassColor;}
Less
Less-переменные — такие же, как Sass-переменные.
Единственное отличие — в Less они начинаются с символа @.
/* -------LESS-------- */
@mainLessColor: #ff0087;
p {color: @mainLessColor;}
Вывод
Каждый из препроцессоров, о которых мы говорили (Sass, Less), имеет свой уникальный подход к решению одной и той же задачи — дать разработчикам возможность использовать полезные функции, при этом сохраняя кроссбраузерность и чистоту кода.