21ru.ru 21ru.ru
расширенный поиск по сайту
автолюбитель Чувашии
Навигация по сайту:
Раздел АВТОРЕМОНТ
События Факты

Языки Sass, LESS - альтернатива CSS.

Автор:Saah | Перейти в раздел: Информационные IT технологии


Языки Sass, LESS - альтернатива CSS.

Существуют несколько очень эффективных альтернатив CSS, о которых стоит рассказать. Посчитав обычный синтаксис CSS повторяющимся, разработчики Хэмптон Кэтлин и Нэйтан Вейзенбаум создали новый синтаксис таблиц стилей, который для экономии времени использует преимущества инструментов, заимствованных у языков написания сценариев. Они назвали свой новый синтаксис Sass (Syntactically awesome style sheets — Синтаксически удивительная таблица стилей). Его более поздняя версия, известная как SCSS (Sassy CSS — Дерзкий CSS) основана на исходном синтаксисе с отступами Sass, но также позволяет применять и обычный синтаксис CSS.

В документах со стилями Sass можно делать то же, что и в сценариях, например задавать имя переменной для значения, которое вы планируете часто использовать. Например на сайтах компании O'Reilly неоднократно используется один и тот же оттенок красного цвета, так что они могли бы создать переменную с именем «oreilly-red» и использовать ее имя для обозначения цвета. Таким образом, если в будущем им понадобится скорректировать оттенок, будет нужно только изменить значение переменной в одном месте. Ниже показано, как выглядит задавание и использование переменной в Sass:

$oreilly-red: #900;
а { border-color: $oreilly-red; }

Вы даже можете многократно использовать целый набор стилей с помощью условного обозначения под названием смешивание (mixin). В следующем примере сохраняется сочетание стилей фона, цвета и границы в смешивании с именем special. Чтобы применить это сочетание стилей, добавьте его в определение с помощью правила @include и укажите его имя.

@mixin special {
color: #fff;
background-color: #befc6d;
border: 1px dotted #59950c;
}
a .nav {
@include special;
}

Кроме того, язык Sass позволяет использовать вложенные правила, выполняет математические операции, а также математически настраивает цвета, и это только несколько функций, заимствованных из языков сценариев. Браузеры не знают, как интерпретировать синтаксис файла .sass или .scss, поэтому вам необходимо будет использовать компилятор Sass (написанный на Ruby), который запускается на сервере. Прежде чем файл Sass доставляется в браузер, компилятор преобразует его в стандартный синтаксис CSS.

Языки Sass, LESS - альтернатива CSS.

LESS — еще один синтаксис CSS, обладающий способностями, напоминающими языки сценариев. Он очень похож на Sass, но в нем отсутствуют некоторые возможности и имеются незначительные отличия в синтаксисе (например, переменные в LESS обозначены символом 0 вместо $, например, 0oreilly-red).

Другое отличие в том, что файл LESS преобразуется в обычный синтаксис CSS с помощью сценария javascript (less.js), а не Ruby. Обратите внимание, что компиляция файла LESS в CSS сильно загружает процессор и будет замедлять работу браузера.
По этой причине лучше преобразовать файл в CSS перед отправкой его на сервер. Для этого рекомендуется использовать инструмент CodeKit (incident57.com/less/) или другие аналогичные приложения.

Как только вы приобретете немного практического опыта и почувствуете, что готовы выводить свои таблицы стилей на новый уровень, изучите некоторые из этих ресурсов (статей) о языках Sass и LESS:
• Веб-сайт Sass (sass-lang.com)
• Веб-сайт LESS (lesscss.org)
• Compass, полнофункциональная основа для создания кода CSS, использующая Sass (compass- style.org).



Свежие публикации: Знания по веб-разработке дизайна сайта. Профессия front-end разработчика.

 
Дата: 25-02-2016 | Автор: Saah | Просмотр: 723

Похожие публикации

Сценарии веб-разработки JavaScript и DOM. Сценарии веб-разработки JavaScript и DOM.
JаvаScript — язык сценариев, который наделяет веб-страницы...

Рисование средствами HTML5. Элемент canvas. Рисование средствами HTML5. Элемент canvas.
Еще одним прекрасным дополнением в спецификации HTML5 является...

Сохраните для себя
Последние новости
Двигатель
Оцените обслуживание клиентов в ГИБДД Чувашии по 5 бальной шкале




© Авто Чувашия © 2012 - 2017