Скрипты

ovoo-v2-5-4-cms-онлайн-кинотеатра-и-тв OVOO-это мощная, гибкая и удобная для пользователя CMS с передовой системой управления видеоконтентом. Она была создана, чтобы обеспечить уникальный...
stackposts-v1-5-–-social-marketing-tool Stackposts-это инструмент маркетинга в социальных сетях, который позволяет и помогает вам легко публиковать автоматические сообщения, планировать...
grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Сравнения CSS препроцессоров Sass и Less

Сравнения CSS препроцессоров Sass и Less.

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), имеет свой уникальный подход к решению одной и той же задачи — дать разработчикам возможность использовать полезные функции, при этом сохраняя кроссбраузерность и чистоту кода.


  1. Комментарии (0)

  2. Добавить свои

Комментарии (0)

There are no comments posted here yet

Оставьте свой комментарий

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...