Sass, SCSS и Less


Содержание

Please verify you are a human

Access to this page has been denied because we believe you are using automation tools to browse the website.

This may happen as a result of the following:

  • Javascript is disabled or blocked by an extension (ad blockers for example)
  • Your browser does not support cookies

Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking them from loading.

Reference ID: #bd944860-0483-11ea-a1e8-8bd32252d0f3

Что такое sass

Sass — это препроцессорный язык, расширяющий возможности стандартного css. Он позволяет использовать переменные, вложенные правила, mixins, встроенный импорт, и многое другое. Sass полностью совместим с css. Он помогает держать стили хорошо организованными, делает их более читаемыми и компактными. В купе с библиотекой compass, позволяет избавиться от css3 префиксов для разных браузеров, что делает его очень удобным.

Существует старый синтаксис sass и новый. Старый синтаксис ближе к языку ruby. Новый синтаксис более приближен к языку css. Он более понятен для верстальщиков, и в дальнейшем именно он будет описываться на данном сайте.

Я постараюсь сделать свой сайт доступным для большого количества людей. Начинающим верстальщикам, я объясню как можно упростить себе жизнь и сразу верстать на sass-е. Людям у которых уже есть опыт верстки, и которые хотят перейти на какой-нибудь язык препроцессора, я объясню почему стоит выбрать именно sass.

Основные препроцессоры

prepros. Сейчас это наиболее популярная программа для компиляции sass или less файлов. Подходит больше для новичков.

koala. По сути тоже самое, что и первая программа, но более старая.

ruby. Использовать ruby советует официальная документация. Сразу нужно отметить, что файлы таким образом компилироваться будут достаточно долго. Данный способ не совсем удобный. Я не рекомендую им пользоваться.

node.js. Для того, чтобы использовать его как препроцессор, можно установить как дополнительный модуль, так и использовать инструменты для сборки js проектов, такие как grunt или gulp. Я советую использовать gulp для компиляции sass файлов.

Сравнение less и sass

В интернете написано много статей про сравнение less и sass. К сожалению эти статьи старые, и сейчас не являются актуальными.

В одной статье на хабре говорится, что у sass есть сompass, поэтому он лучше. В другой говорилось, что для less есть twitter bootstrap, и он лучше сompass. Что я могу сказать, новичок разницы между twitter bootstrap и compass не увидит. С недавних пор twitter bootstrap есть и на sass (это для фанатов bootstrap). По моему мнению compass все-таки лучше. Почему он лучше? Он более профессиональный. К примеру, twitter bootstrap в своих mixin-ах использует такой метод clearfix-а:

Будем называть его clearfix TB, хотя придумал его Nicolas Gallagher и называется он micro clearfix.

Когда я начинал верстать clearfix был таким:

Будем называть его старым методом clearfix-а.

На мой вопрос почему в twitter bootstrap используется именно этот метод clearfix-а. Один front-end разработчик (фанат LESS-а и bootstrap-а), с пеной у рта стал мне доказывать, что обычный clearfix г. но, он морально устарел, имеет кучу багов (притом ни одного бага назвать не смог). Где-то на форумах gitHub-а написано много блогов почему clearfix TB лучше, и стоит пользоваться только им. Это же twitter bootstrap, они все знают лучше. Я просмотрел кучу статей и могу с уверенностью сказать, что особой разницы нет. Метод clearfix TB не лучше и не хуже старого clearfix-a, просто он позволяет избавиться от «вертикального схлопывания». В большинстве случаев, я не вижу проблемы в вертикальном схлопывании, это нормальное поведение браузера. Нужно просто уметь им пользоваться.

Twitter bootstrap не дает вариантов для выбора, это лучше и все. Человек который верстает с его помощью, он как бы связывает себя, вынужден использовать решения twitter bootstrap и ограничивает себя этими решениями. В библиотеке compass присутствуют оба clearfix-а. Нужно мне избавиться от вертикального схлопывания, я использую clearfix TB. Если не нужно, использую старый clearfix. К примеру, на странице много разно-оформленных блоков, между ними одинаковый вертикальный отступ. Этот отступ больше, чем отступ заголовков и абзацев, один из блоков содержит плавающиий элемент. В нем картинка слева, справо описание к этой картинки. Картинка сделана float-ом, описание просто дивом, float тут не нужен, просто margin или padding слева на длинну картинки. Описание естественно содержит абзацы. При использовании clearfix TB самый верхний заголовок описания окажется ниже картинки, ведь вертикальное схлопывание не происходит. Для верхнего абзаца мне придется создавать дополнительный класс. Если он выглядит по другому (заголовок блока) это приемлемо, а если он выглядит также как и другие абзацы? Всего этого можно избежать если использовать старый метод clearfix-a. Происходит схлопывание, и верхний абзац с картинкой становятся на одном уровне.

На мой взгляд хороший верстальщик должен понимать что он делает, почему используется именно эта технология. Отсюда вывод, twitter bootstrap нужен верстальщикам которым нужны быстрые решения, те думать не надо. Как говорится хренак, хренак и продакшн:). Compass, для верстальщиков которые понимают, что они делают и какого эффекта хотят достичь.

Я стал использовать sass, так как в данном языке есть метом @extend. Что он делает? Представьте, что вы сверстали сайт на sass-е и вам нужно отдать его программисту. Вы верстаете в свободное время, к примеру вечерами. Обычный фриланс. Вам это нравится, да и за это платят деньги. Этот сайт вы серьезно поддерживаете. И вам нужно не просто его сверстать, а еще и как-то поддерживать нормально. Грубо говоря происходит небольшой редизайн, к примеру зимний дизайн сайта перед новым годом. Меняются основные цвета сайта. Меняется цвет ссылок, этот же цвет совпадает с цветом в хедере, левом меню и красиво оформленных блоках. Этим ограничимся, понятно, что если это крупный портал, то там много чего изменится. Как правило, если программист серьезно занимается back-end, то про sass он ничего не слышал. Работать с препроцессором он не умеет. Вам нужно отдать ему готовый css так, чтобы его можно было в дальнейшем удобно использовать уже на готовой CMS-ке. Про переменные придется забыть. При интеграции с CMS-ой он допишет много стилей, так что sass файл и css будут отличаться. Если вы хороший, опытный верстальщик, то при верстке новых макетов, вы не сразу начинаете верстать, а перед этим просматриваете полученные макеты и подмечаете схожие элементы. Одинаковый цвет ссылок, хедера, левого меню и красиво офомленных блоков вы сразу подметили. Естественно, чтобы лучше работать с сайтом эти цвета нужно сгруппировать.

Метод @extend как раз для этого и нужен.

// Тут какие-то классы

// Тут какие-то классы, к примеру классы верхнего меню

// Тут какие-то классы

Тут какие-то классы

// Тут какие-то классы, к примеру классы верхнего меню

Данный метод существенно упрощает работу верстальщика. Конечно можно самому сгруппировать одинаковые свойства, но так удобнее. Обычно, я где-то в самом верху описываю общие классы (потом с css-ой будет проще работать), а если сайт очень большой, то и вообще могу вынести их в отдельный файл. В примере, это общий класс .linkColor. Как правило, я группирую такие свойства как border-radius, border-color, background-color, color и font-family. Как правило в дизайне хедер, футер, левое меню и контентная часть имеют разные шрифты, но в контентной части находятся блоки со шрифтами из левого меню или хедера.

В less-е начиная с версии 1.4.0 тоже появился метод extend, но мало кто им пользуется. В sass-е данный метод был с самого начала. По крайней мере, когда я узнал, что данный метод есть у sass-а, в less-е его еще не было. Это как раз и была причина по которой я подумал о том, чтобы перейти с less-а на sass. Вообще, с появлением синтаксиса scss прослеживается тенденция, что разработчики less-а все больше воруют берут идеи из sass-a. К примеру логика. Когда я только начинал верстать в less-е логики не было.

Так бывает, что при разработке какого-либо проекта (от верстки, до desctop приложения), разработчик не думает о его масштабировании. Он решает сеиминутные задачи, делает как проще и быстрее. И очень часто, с течением времени так получается, что проект становится сложно поддерживать (сайт из сайта визитки превращается в интернет-магазин, desctop приложение должно расширить свой функционал). Тут как правило разработчику приходится или полностью его переделывать или мучиться с его обслуживанием.

Less и sass имеют разный синтаксис. В less-е переменная определяется через @, а в sass-е через $. Все бы хорошо, но @ используется в css. Это и media queries, и некоторые новые свойства css (@keyframes к примеру) и некоторые префиксы для разных браузеров (@-webkit, @-moz, @-ms к сожелению пока без этого никак). Естественно при компиляции less файлов возникают проблемы. К примеру, чтобы умешьшить количество запросов на сервер, я все css компилирую в одну большую css-ку. Что на less-е, что на sass-е это делается @import-ом. У меня есть один файл в котором @import-ом подключаются разные файлы (less это, или sass файлы не важно, я могу настроить и то, и то), дальше я watcher-ом просматриваю изменения в этих файлах и компилирую css при изменении любого из них. Так вот, less таким образом выдавал мне ошибку, когда я пытался скомпилировать css-ку fancybox. Там, если я не ошибаюсь был фильтр для старого эксплорера, который содержал @. На этом компилятор less-а штопорился, ведь для less @ это переменная. Ну это не проблема, старый ie мне был не нужен, я этот фильтр удалил, все скомпилировалось хорошо. И действительно все было хорошо пока.

У меня есть друзья. Однажды они делали сайт, для одной рекламной компании. Сайт содержит вид моего прекрасного города. Но это же рекламная компания, не интересно просто сделать сайт, нужно как-то покреативить. Мы решили немножко его оживить. Посмотрите на него (если у вас маленькое разрешение монитора, то подождите минуту, должен вылетить шарик). На дворе 2014 год, не имеет смысла делать анимацию на js, если можно сделать ее на css3. Равняться на 9 IE тоже смысла не было, ну не вылетит шарик, ну и ладно. Заказчик тоже был не против.

Для того, чтобы сделать анимацию на css3, есть такие свойства как animation и @keyframes. Для свойства animation задается имя исполняемой анимации, ее продожительность, easing и будет ли она повторяться. Свойство @keyframes это и есть наша анимация. В чем проблема, если на IE можно не обращать внимания, то с другими браузерами так не получится, а многие из них поддерживают эти свойства только с префиксами.

Ниже я приведу код, который описывает движения шарика (код без префиксов).

animation : balloon 180s linear Infinite ;

Для того, чтобы все это работало в разных браузерах для свойства animation нужно будет добавить префиксы -o-animation, -moz-animation, -webkit-animation. Это впринципе не трудно. А вот со свойством @keyframe сложнее. Мне нужно будет помимо префиксов @-webkit-, @-moz-, @-ms- еще и код продублировать. Сразу нужно сказать, что первоначально движение шарика и его начальная точка были другими. Шарик стартовал с середины экрана, ведь не у всех же широкие мониторы. Кто-то может эту анимацию грубо говоря и не дождаться. Вообще его траектория менялась раза 4. Тогда я верстал на less-е, но уже начал интересоваться sass-ом, после этого я как раз на него полностью перешел. Мне хотелось описать анимацию один раз, а не дублировать ее по 4 раза. Естественно я планировал для @keyframes написать какой-нибудь mixin. В итоге скажу так, ничего у меня не получилось. Mixin не получилось написать так как less думал, что @keyframes это переменная. Написать @keyframes с префиксами и вставить туда mixin с анимацией тоже не вышло. Скажу фанатам less-а, решение я нашел. Есть такая библиотека less hat. С ней мою анимацию можно осуществить на less-е. А вот теперь я приведу mixin less-а и mixin sass-а.


@mixin keyframes ( $name ) <

По моему, это хороший пример того, как необдуманная конструкция может осложнить жизнь разработчика. С самого начала разработчики less-а с объявлением переменной ошиблись. Могу предположить, что в будующем будут появляться другие интересные вещи вроде свойства @keyframes. На sass-е я без проблем смогу написать для них mixin. А вот на less-е мне придется ждать разработчиков less hat, что не есть хорошо.

Защитники less-а, приводят довод, что порог вхождения в less меньше чем в sass. Новичку будет проще его освоить. Давайте посмотрим, что новичку будет проще освоить.

font-family : Arial, «Helvetica CY», «Nimbus Sans L», sans-serif ;

// Создание mixin-а, будем задавать к примеру размер для логотипа, он сделан ссылкой, display: block и background к нему спрайтом

@mixin size ( $widthLogo: 20px , $heightLogo: 20px ) <

@include size ( 50px , 50px );

background : url(../images/top-logo.png) no-repeat ;

// Группируем похожие шрифты

// Вводим логику в наш проект

@if $footerBottom == true <

font-family : Arial, «Helvetica CY», «Nimbus Sans L», sans-serif ;

// Создание mixin-а, будем задавать к примеру размер для логотипа, он сделан ссылкой, display: block и background к нему спрайтом

.size ( @widthLogo: 20px ; @heightLogo: 20px ) <

.size ( 50px ; 50px );

background : url(../images/top-logo.png) no-repeat ;

// Группируем похожие шрифты

// Вводим логику в наш проект

& when not ( @footerBottom ) <

Я привел основные конструкции, кроме циклов. Первое, что бросается в глаза, это разный синтаксис. По разному объявляются переменные и логические конструкции. Не знаю как у других, но у меня не возникает ощущения, что less проще и новичок быстрее его освоит. Less — это такой же препроцессорный язык. Он создавался как ответ на старый синтаксис sass. Напомню, что старый синтаксис sass был более приближен к языку ruby. Less практически все полезные идеи брал из sass, поэтому многие вещи похожи, единственное пишутся по другому. Никак нельзя сказать, что less проще. Правильнее сказать он имеет все те же конструкции, что и sass, но пишутся эти конструкции по другому. Сразу бросается в глаза, что less-ие конструкции выглядят короче sass-их. Это от того, что sass более структурный. На форумах говорится, что less более лаконичен чем sass, и это его плюс. Я же в этом плюса не вижу, ну используется в less-е & when вместо @if, ну запись mixin-а выглядит короче, разве это можно назвать плюсом? Просто синтаксис другой. Это не плюс и не минус. В less-ая быстрота записи идет в ущерб четкости и структурности. Когда проект маленький и обслуживает его один человек, возможно это и дает какие-то плюсы. Но вот когда проект большой, и обслуживает его несколько человек то тут из-за less-ой «лаконичности» начинаются проблемы.

Less-ие mixin-ы в коде, особенно если есть большая вложенность сразу не увидишь, они же пишутся как классы, соответственно любой редактор подсветит их как классы (не правда ли логично). Чужой проект замучаешься прокручивать пока поймешь что в нем и как. Sass-ие mixin-ы объявляются через @include, соответственно сразу понятно что здесь какая-то логика. Обращаясь к нашему примеру, у нас есть mixin size который задает размеры для верхнего логотипа. Давайте представим, что этот mixin задает размеры для какого-то блока, где-то в середине кода. Кода у нас много. К этому блоку прописано много свойств. Мне нужно эти размеры изменить. Первым делом я буду искать width и height. Естественно ничего я не найду. Mixim подсвечивается как класс, его я не сразу увижу. В итоге я буду долго менять размеры. На sass-е все проще. Я замечу @include, пойму что это mixin, увижу, что числа в нем похожи на длинну и высоту моего блока. В итоге на sass-е я размеры блока поменяю быстрее чем на less-е. На больших проектах sass-ая структурность облегчает жизнь. Все что я выше описал, сложно для восприятия пока с этим не столкнешься.

Когда я только начинал изучать less, логики в нем не было. На форумах это даже в плюс приводили. Зачем она нужна? А спустя какое-то время я просматриваю less-ие новинки и вижу логические конструкции. На самом деле, любой человек изучающий less или sass со временем будет ее использовать. Это вопрос опыта. У sass логика была с самого начала. Я занимаюсь front-end разработкой, мне очень нравится делать анимацию на js. На js я программирую с 2012 года. Sass-ие конструции @if, @else, @else if мне более понятны чем less-ие when, when not. У меня так бывало, что я пишу какой-нибудь плагин, время уже позднее. Нужно что-то поправить на less-е, я его смотрю и логику не вижу. На js ведь тоже if, else. Less-ие конструкции после работы с js я не воспринимал. Возможно & when, & when not и понятны, но для чего их вводить если есть if, else. Я не буду касаться серьезной front-end разработки, но мне кажется, что любой, даже самый начинающий верстальщик так или иначе знаком c js. Хотя бы на уровне подключения плагина. Раз знаком, значит элементарные логические конструкции языка должен знать. В случае с less-ом это вводит лишнюю неразбериху. Ну да это мое восприятие, если человек только начал заниматься версткой, до front-end пока не дорос, он не будет лезть в логику на данных языках.

Илон Маск рекомендует:  Определяем принадлежность времени диаппазону на PHP

Какой из всего этого можно сделать вывод, less он не проще чем sass, просто он менее структурный и имеет более короткие языковые конструкции. Новичок на изучение sass-а потратит не больше времени чем на изучение less-а. Более крупные проекты на less-е сложнее обслуживать чем на sass-е, особенно если проект большой и обслуживают его несколько человек. Со временем, чем больше молодой верстальщик будет развиваться, он будет хотеть большего. Писать свои плагины на js, освоить какую-нибудь cms-ку (хотя бы простенькая интеграция). И если он действительно любит верстать. То он подумает о том, чтобы написать свой простенький css-framework (он будет очень простым, но хотя бы чуть-чуть сократит время разработки). И вот тут-то он и увидит, что less немного не то. Он создавался как аналог старого синтаксиса sass, хотел быть более приближен к css, но вот следом за второй версией css вышла третья. Там много всего появилось, а вот less не развивался с того времени (воровство идей из sass-а не тот путь развития, лучше бы свое придумали). На мой взгляд, чтобы его оживить, его нужно по новому переписать. Переменные по другому объявить, взять логические конструкции такие какие есть во всех нормальных языказ программирования вместо своих & when, & when not.

На одном форуме, все споры o less и sass заканчивались тем, что sass удобный, но время компиляции очень большое. Это сводит все его плюсы на нет. Действительно, если пользоваться sass-ой документацией, установить ruby, то время компиляции будет достаточно большим. Вот средний проект — gaudi. Никаких особых наворотов тут нет. Итоговая css-ка после компиляции составляет 1000 строчек (каждое свойство css идет с новой строки). В качестве библиотеки mixin-ов используется библиотека compass, один файл с собственными mixin-ми и 2 файла с плагинами. Как видите все просто. Но когда я его компилировал через ruby, у меня время компиляции доходило до 2-3 секунд. Это много. Сверстал что-то, сохранил, и жди 2-3 секунды. Это меня не устраивало. Мне понравился sass за его четкость и структурированность. Но на less-е у меня такие проекты компилировались за милисекунды. Это средний проект, а если бы проект был большим, 2-3 секундами не обошлось. Я уже хотел его забросить. Но однажды я обратил внимание на такой сборщик проектов как gulp. У него есть плагин gulp-sass. Я его установил, по новой скомпилировал проект. Время первой компиляции заняло 986 милисекунд. А все последующие изменения у меня занимали 2-3 милисекунды. Он очень быстрый. Можно сказать, что используя gulp возникает ощущение, что работаешь с обычной css-ой, а не с scss файлом. Таким образом вопрос о времени компиляции у меня отпал.

Кто-то при сравнении less и sass учитывает сообщества обоих языков. Сколько их скачивают с gitHub. Потом говорят, что less круче, его и скачивает больше народа и сообщество его больше. На мой взгляд это не показатель. Сообщество может быть каким угодно большим, но если оно состоит из новичков, то толку от такого сообщества ноль. То, что его скачивают больше говорит о том, что less более раскручен в интернете. Но это совсем не показатель качества, это показатель хорошей рекламы, не более. В начале 20 века, после первой мировой войны, американцы употребляли лекарство содержащее радий. Его рекламировали как средство от ревматизма. И действительно радий как радиактивный элемент разрушал кости, людям его употреблявшим было не до ревматизма. Все прекратилось, когда умер один известный 51 летний политик. Это хороший пример рекламы. Выше я уже описывал, недостатки less-а. Это и отсутствие четкого видения развития (многие идеи воруют из sass), и проблемы с непродуманной конструкцией языка (объявление переменной). Для less есть даже библиотека less hat, хотя на самом деле это не библиотека а набор заплаток для less-а, так как дальше он без заплаток развиваться не может. Если кому это мнтересно, посмотрите mixin-ы less hat, большую часть этих mixin-ов вы сами реализовать не сможете. @keyframes это только одно свойство которое без less hat не реализуешь. Проблем с ним много. Невольно возникает вопрос, а нужно это все? У sass есть синтаксис scss, он приближен не к ruby, а к обычному css. Он структурный и понятный, на нем написаны такие css-framework-и как zurb foundation, gumby, bourbon, и это далеко не полный список. Конечно же нельзя обойти внимание и прекрасную библиотеку compass которая полнее twitter bootstrap.

Для многих верстальщиков и front-end разработчиков основным фактором мешающим перейти на sass является отсутствие русской документации по нему. На страницах данного сайта я постараюсь исправить этот недочет.

Сделать выбор между less и sass [закрыт]

Пришло время изучить какой-нибудь CSS фреймворк, естественно выбор стал между LESS и SASS, оба нацелены на гибкость подхода к оформлению стилей. Подскажите какой выбрать, чтоб его возможности перекрывали слабейшего из них для того, что бы не тратить время на изучение уже имеющихся полученных возможностей из другого фреймворка.

Закрыт по причине того, что необходимо переформулировать вопрос так, чтобы можно было дать объективно верный ответ участниками user181100, aleksandr barakin, user194374, Иван Пшеницын, user207618 20 авг ’16 в 20:21 .

Вопрос порождает бесконечные прения и дискуссии, основанные не на знаниях, а на мнениях. Для получения ответа перефразируйте ваш вопрос так, чтобы на него можно было дать однозначно правильный ответ, либо удалите вопрос вовсе. Если вопрос можно переформулировать согласно правилам, изложенным в справке, отредактируйте его.

1 ответ 1

Синтаксис у фич в препроцессорах очень схож между собой, поэтому, изучив их в LESS, и перейдя потом на SASS, у вас не возникнет проблем со старыми знаниями. В этом плане изучать можно любые фреймворки в любом порядке.

По возможностям LESS и SASS близки. Twitter Bootstrap с четвертой версии официально перешел с LESS на SASS. Учитывая популярность бутстрапа, это решение однозначно сыграет на скорости развития SASS по сравнению с LESS.

Но советую обратить внимание на Stylus. С тех пор, как за его развитие взялись ребята из команды яндекс.почты — препроцессор растет очень быстрыми темпами, и по фичам он уже далеко впереди SASS. Те возможности, которые уже есть в Stylus, в SASS висят лишь в виде открытых issue, запланированных на неопределенное будущее. В лучшем случае в SASS мы их увидим через год. А в Stylus можно использовать уже сейчас.

К тому же у Stylus более гибкий синтаксис. Можете писать в CSS/SCSS стиле со скобками, можете в SASS стиле с отступами. Можете опускать двоеточия в css-свойствах, можете присваивать переменные и через двоеточие как в SASS, и через равно, как в императивных языках.

По скорости — SASS и LESS на одном уровне, Stylus в 1.5 раза быстрее. Но у SASS есть версия препроцессора, написанная на C — LibSass, она очень быстрая — в 3.5 раза быстрее Stylus. Быстрее нее — только PostCSS, но это уже не препроцессор в классическом понимании. Можете посмотреть и в его сторону, кстати — развивается в неплохом темпе.

CSS-препроцессоры и преимущество их использования

December 05, 2013

Статья на NetTuts+, написанная Johnathan Croom в 2012 году.

Основная цель статьи — показать преимущество использования любого из трех описанных в ней препроцессоров Sass, LESS и Stylus. Обзор прекрасно подойдет для новичков, которые только открывают для себя эту грань веб-дизайна.

В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров — Sass, LESS и Stylus.


Введение

Препроцессоры CSS были созданы с одной единственной целью — добавить стилевым таблицам CSS мощь и одновременную гибкость без нарушения кросс-браузерности. Все препроцессоры компилируют созданный с помощью их синтаксиса код в стандартный CSS-код, который понимает и использует любой браузер, каким бы древним он (браузер) не был.

Существуют множество преимуществ, которые привносят препроцессоры в таблицы стилей CSS и в этой статье мы рассмотрим только некоторые из них, как хорошо известные, так и мало распространенные. Давайте приступим к обзору.

Синтаксис

Наиболее важной частью при написании кода в любом препроцессоре CSS является его синтаксис. В счастью для нас, синтаксис всех трех препроцессоров, которые мы будем рассматривать, имеют CSS-подобный вид.

Sass & LESS

Оба препроцессора Sass и LESS имеют стандартный CSS-синтаксис. Это делает задачу конвертирования уже существующего CSS-кода в синтаксис любого из этих препроцессоров простой и быстрой. Sass использует для своих файлов расширение , LESS — расширение .

Вид обычного файла в синтаксисе Sass или LESS представлен ниже:

Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.

Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.

Несмотря на то, что такой синтаксис все еще можно применять на практике, он является устаревшим и мы не будем использовать его в наших примерах.

Синтаксис Sass (старая версия) выглядит следующим образом:

Stylus

Для своих файлов этот препроцессор использует расширение . Синтаксис препроцессора Stylus более многословный (прим. переводчика: автор что-то напутал здесь) в нем применяется за основу стандартный синтаксис CSS, но допускается применение различного сочетания скобок, двоеточий и точек с запятой.

Примеры синтаксиса Stylus:

Все варианты синтаксиса, показанные выше, являются валидными и в результате компиляции получается правильный CSS-код. Например, такой код скомпилируется в стандартный CSS без ошибок:

Переменные

В препроцессорах переменные объявляются и используются внутри файлов стилей CSS. Переменные могут принимать любое значение, допустимое в CSS (цвет, число или текст) и может ссылаться из любого места CSS-документа.

В препроцессоре Sass переменная объявляется с помощью символа , при этом имя переменной и ее значение отделяются друг от друга двоеточием так, как это делается в CSS:

Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ :

Stylus

Переменные в Stylus не нуждаются ни в каком знаке для своего объявления, но, тем не менее, могут использовать символ . Как правило, завершающий символ строки точка с запятой также не нужен, за исключением случая, когда имя переменной и ее значение совпадают.

Еще один достойный упоминания момент заключается в том, что Stylus (0.22.4) компилирует код, даже если в нем имя переменной объявлено с помощью символа , но при вызове этой переменной в коде подстановки значения переменной не происходит.

Другими словами, не выполняется такая операция:

Скомпилированный CSS

Каждый из представленных в виде примера файлов компилируется в точно такой же CSS-код. Вы можете включить воображение, чтобы представить, насколько полезными могут быть переменные.

Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.

Прим. переводчика: здесь автор немного утрирует ситуацию, так как в любом нормальном редакторе кода имеется функция поиска.

Ниже представлен CSS-код после выполнения компиляции:

Вложенность (nesting)

Если в коде CSS поставлена задача обратиться одновременно к нескольким элементам, имеющим одного и того же родителя, то писать снова и снова этого родителя — занятие утомительное.

Вместо этого, используя возможности препроцессора, мы можем поместить все дочерние селекторы внутри скобок элемента-родителя. Кроме того, символ является ссылкой (сокращением) на селектор элемента-родителя.

Sass, LESS & Stylus

Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:

Скомпилированный CSS

Ниже показан скомпилированный в CSS результат кода, представленного выше. Сравните с тем кодом, который мы писали в самом начале — абсолютно одинаково. Но какое удобство при использовании преимуществ препроцессора!

Подмешивания (mixins)

Миксины являются функциями, которые позволяют многократно использовать сгруппированные свойства внутри CSS-кода. Вместо того, чтобы просматривать весь код в поисках нужных строчек для их изменения, теперь можно вносить изменения только один раз, внутри миксина.

Применение подмешиваний особенно оправдывает себя при создании специфичных стилей для элементов или простановке браузерных префиксов. Когда миксин вызывается внутри CSS-селектора, происходит распознавание аргументов этого миксина, затем его стили применяются к селектору, который его вызвал.

Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.


Style

Скомпилированный CSS

Результатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:

Наследование (inheritance)

При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:

Все работает прекрасно. Но если потребуется написать стили отдельно для любого из этих селекторов, нужно будет создавать отдельные правила для каждого из них. И сразу же код таблиц стилей становиться неряшливым и трудно поддерживаемым.

В противоположность этому применяются наследование. Наследование — это возможность для одних CSS-селекторов наследовать свойства у другого селектора.

Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы .

Sass & Stylus

Скомпилированный CSS

Препроцессор LESS не поддерживает наследование в полной мере так, как это организовано в Sass или Stylus. Вместо добавления множественных селекторов в один набор свойств, наследование трактуется как миксин без аргументов.

Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.

Вот как может выглядеть LESS-код с наследованием:

Скомпилированный CSS

Как хорошо видно из кода, стили класса добавлены для селекторов, которым требуется задать наследование у этого класса.

Прим. переводчика: код действительно получается избыточным, просто для каждого селектора тупо добавляются строки класса .

Импортирование

В CSS-сообществе к импортированию стилей с помощью директивы существует стойкое негативное отношение, так как такой подход порождает множественные HTTP-запросы к серверу, что замедляет работу браузера и нагружает сам сервер. Однако, в препроцессорах технология импортирования работает иначе.

В любом из трех препроцессоров импортирование одного файла внутрь другого фактически приводит к вставке кода одного файла в другой при компиляции, в результате которой получается один CSS-файл.

Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.

Обратите внимание, что при компилировании файла со стандартным подключением с помощью директивы внутри него компиляции последнего не происходит. А вот миксины или переменные импортируются и используются в стилевом файле, как положено. Технология импортирования очень удобная, так как она позволяет создавать множество отдельных файлов для правильной организации проекта.

Скомпилированный CSS

Функции работы с цветом

“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при и многое другое.

Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation.

“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример — объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета :

Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation.

Ниже показан пример того, как можно применять “цветовые” функции в LESS:

Stylus

Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation.

И пример использования “цветовой” функции в Stylus:

Арифметические операции

Благодаря препроцессорам выполнение арифметических операций внутри CSS-кода теперь осуществляется просто и легко. Такая возможность часто бывает полезной.

Прим. переводчика: стоит упомянуть о функции из CSS3 по имени , которая также позволяет выполнять внутри CSS-кода простые арифметические операции.

Sass, LESS & Stylus

Практические примеры

Вот мы и рассмотрели основные моменты того, что и как умеют делать все три препроцессора. Однако мы еще ни разу не коснулись момента практического применения этих возможностей. Ниже показан список реальных веб-приложений, в которых используются препроцессоры, заметно улучшая при этом весь код.

Браузерные префиксы

Одним из наиболее ярких примеров преимущества использования препроцессоров является написание с их помощью свойств с браузерными префиксами. Один раз создав миксин с поддержкой браузерных префиксов, мы избавляем себя от рутинной работы.

Например, создадим для всех трех препроцессоров миксин скругления углов блока:

Stylus


Скомпилированный CSS

Трехмерный текст

Создание эффекта трехмерности для текста с помощью CSS-свойства является прекрасной идеей. Единственная проблема заключается в работе с цветом, которая достаточно трудная и обременительная.

Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:

Stylus

В примере для Stylus я выбрал вариант написания свойства в одну строку, так как здесь я опустил фигурные скобки.

Скомпилированный CSS

Колонки

Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости) простой и быстрой:

Илон Маск рекомендует:  Что такое код hw_api &#62;content

Stylus

Скомпилированный CSS

Некоторые уловки препроцессоров

Существует несколько хитростей при работе с CSS-препроцессорами. В этой статье я расскажу только о некоторой части из них. Но если эта тема вас заинтересовала, я рекомендую вам внимательно прочитать официальную документацию или же, что еще лучше, просто начните пользоваться препроцессором каждый день в процессе кодинга.

Сообщение об ошибках

Если вы уже пишите код на CSS достаточно давно, то наверняка сталкивались с ситуацией, когда внутри кода закралась ошибка, которую вы никак не можете найти. Если вы попадали в точно такую же ситуацию, то могу вас обрадовать — существует способ решить такую задачу.

CSS-препроцессоры могут сообщать об ошибках в коде и заставить их поступать таким образом достаточно просто. В этом случае препроцессор сам сообщает вам, в каком месте CSS-кода находиться ошибка (и все счастливы).

Если вас заинтересовала подобная возможность во всех трех препроцессорах, то в этой статье подробно описано, как выполнить данную настройку.

Комментирование

В CSS-препроцессоре при компиляции из кода удаляются любые комментарии в виде двойного слеш’а ( ). Но, в тоже время, блочные комментарии ( ) остаются в коде без изменений.

На заметку: при компиляции в минимизированную версию CSS-файла удаляются любые комментарии.

Заключение

Каждый из трех рассмотренный в этой статье CSS-препроцессоров (Sass, LESS и Stylus) обладает своим собственным, уникальным способом решения одной и той же задачи. Это дает в руки разработчика возможность выбора, каким способом выполнить поставленную задачу. Объединяет все препроцессоры способность расширить горизонты кодера с одновременным сохранением кросс-браузерности и чистоты кода.

Я советую вам попробовать все известные препроцессоры, чтобы на личном опыте вы выбрали для себя наиболее предпочтительный. Если же до этого момента вы писали код только на чистом CSS, я настоятельно рекомендую вам научиться работать хотя бы в одном из препроцессоров.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

Знакомство с LESS и сравнение с Sass

Я достаточно пользовался LESS, пока у меня не возникла одна интересная ситуация пару месяцев назад. CSS никогда не было для меня проблемой (хотя там в принципе ничего сложного то и нет), но я был вдохновлен идеей об использовании переменных для создания нечто вроде линий палитры цветов для шаблонов и веб-сайтов. Палитра с фиксированным числом опций помогает предотвратить смешивание цветов и выделение их из выбранного стиля.

Как же понять, для чего использовать LESS, а для чего Sass? В принципе, они достаточно похожи между собой. Давайте рассмотрим их общие характеристики:

* Mixins – классы для классов.
* Parametric mixins – классы, к которым вы можете применить параметры типа функций.
* Nested Rules – классы внутри классов, которые срезают повторяющийся код.
* Operations – математика в пределах CSS.
* Color functions – редактирование цветов.
* Namespaces – группы стилей, которые могут быть вызваны ссылками.
* Scope – произведение локальных изменений в стилях.
* javascript evaluation – javascript-выражения, определенные в CSS.

Основное различие между LESS и Sass заключается в том, каким образом они производятся. LESS – в библиотеке javascript и, соответственно, выполняет работу на стороне клиента.

Sass, в свою очередь, запускает Ruby и работает на серверной стороне. Многие разработчики не пользуются LESS из-за того, на обработку кода движком javascript требуется больше времени, и в результате мы получаем измененный CSS-код для браузера. Существует несколько путей оперирования. Я пользуюсь тем, когда LESS используется только при процессе разработки. Как только я заканчиваю, я копирую и вставляю результат, полученный в LESS в уменьшитель кода, а затем в отдельный CSS-файл, который должен быть включен вместо файлов LESS. Другой способ заключается в применении LESS.app для компиляции и минимизации ваших файлов LESS. Оба способа минимизируют наполнение ваших стилей, а также помогут избежать проблем, которые могут возникнуть, в случае если браузер клиента не поддерживает javascript. Это бывает редко, но данную возможность исключать нельзя.

Просим вас также учитывать отзыв от Адама Стковиака (Adam Stacoviak), который был написан после бурных обсуждений статьи от Smashing Magazine в Twitter: «На самом деле, Sass требует Ruby, хотя он и не должен быть скомпилирован в CSS-документ на сервере. Он может быть скомпилирован локально (как было указано в LESS), и этот скомпилированный файл может быть перемещен вместе с вашим проектом, шаблоном для WordPress, для Expression Engine и так далее. Так как это Smashing Magazine, и контингент пользователей может значительно разниться, я предполагаю, что многие из вас используют Mac. Итак, Ruby по умолчанию есть на всех машинах Mac, так что простая установка Sass позволит вам сразу же приступить к работе.

Как только вы установили Sass, вы можете локально конвертировать его в CSS и переправить код с проектом, как я уже рассказывал. Если вы не уверены в том, как начать работу с Sass (или Compass), то мы написали достаточно детальное руководство под названием «Getting Started with Sass and Compass» (приступаем к работе с Sass или Compass)». Давайте все дружно поблагодарим Адама!

Установка

LESS достаточно просто внедрить в любой проект, над которым вы работаете:

1. Скачайте копию less.js ;
2. Создайте файл, который вы наполните своими стилями (например, style.less);
3. Добавьте следующий код в «head» вашего HTML-документа:

Учитывайте атрибут «rel» у ссылки. Вы обязательно должны закрепить «/less» в конец значения. Это нужно для того, чтобы LESS заработал. Вам также следует включить скрипт сразу же после ссылки на документ таблиц стилей. Если вы работаете на HTML5 (а я не вижу причин, почему бы не работать на нем), то вы можете оставить «type=»text/css»» и «type=»text/javascript»».

Существует также серверная версия LESS. Наипростейший способ установки LESS на сервере производится с помощью Node Package Manager (NPM).

Переменные

Если вы разработчик, то наверняка переменные – ваши лучшие друзья. Если вам требуется несколько раз использовать одну и ту же информацию (например, цвет), настройка переменной имеет огромное значение. Таким образом, вы гарантируете самому себе сплоченность документа и освобождаете себя от постоянного скроллинга документа в поисках нужного hex-значения, чтобы скопировать его и использовать в новом элементе. Вы даже можете позабавиться, добавив или исключив hex-значения, которые вам нужно генерировать. Возьмем данный пример:


Если мы применим данные стили к трём div’ам, то у нас получится эффект градации, созданный при помощи добавления и исключения значения к и от естественного синего:

Переход от @light_blue к @blue к @dark_blue.

Единственная разница между переменными в LESS и Sass заключается в том, что LESS использует «@», а Sass – «$». Существует также и другие отличия, но их не так сложно изучить.

Mixins

По возможности, мы можем создать стиль, предназначенный для использования повторно в одном и том же документе таблиц стилей. Никто не запрещает вам использовать несколько классов, применять их к элементам в HTML, но вы также можете сделать это, не закрывая документ CSS. Нужно лишь использовать LESS. Для того чтобы продемонстрировать это, я ставил некоторый отрывок кода, посредством которого можно стилизовать два элемента на странице.

У вас получится нечто похожее на то, что вы надеялись получить, вернувшись в HTML-документ и добавив класс «.bordered» к обоим элементам. Но важно учесть то, что вы реализовали это, не закрывая документ CSS. Это работает следующим образом:

Как article, так и неупорядоченный список разделяют между собой стиль границы.

С помощью Sass вы объявляете «@mixin» приоритетным для стиля для того, чтобы определить его как mixin. Далее вы объявляете «@include» для того, чтобы вызвать его.

Параметрические Mixins

По типу того, как вы используете функции в CSS, данная функция может быть особо полезной для тех, кто охотно использует и без того, казалось бы, безграничные возможности современных CSS. Самый лучший и полезный пример её использования относится ко множеству префиксов производителей браузеров, с которыми сталкиваемся по время перехода от CSS2 к CSS3. Nettuts+ опубликовали отличный вебкаст и статью от Джеффри Уэя (Jeffrey Way), которая включает в себя детальную информацию о внедрении файла, полностью состоящего из полезных параметрических mixin’ов. Статья охватывает ваши любимые параметры CSS3 с префиксами производителей. Например, простой mixin для управления закругленными углами в различных формах:

В данном случае, класс «.border-radius» имеет радиус в 3 пикселя по умолчанию, но вы можете ввести любое угодное значение, и получить закругленные углы. Например, «.border-radius(10px)» закруглит углы на 10 пикселей.

Синтаксис в Sass очень похож на LESS. Просто для переменных используйте «$», и вызывайте mixin’ы посредством методов «@mixin» и «@include», о которых я упоминал ранее.

Selector Inheritance (наследственность селектора)

Давайте рассмотрим кое-что, чего нет в LESS. С помощью данной возможности, вы можете применить селектор к уже ранее установленному селектору без нужны прибегать к формату с разделением через запятую.

Nested Rules (Разветвленные правила)

Разветвление классов и id в CSS – это, наверное, наилучший способ оградить ваши каскадные таблицы стилей от смешения с, либо наоборот направить их на взаимодействии с другими добавленными таблицами. Но данный подход зачастую может повлечь за собой хорошие объемы кода. Используя селектор типа «#site-body .post .post-header h2», у нас получается очень приятный глазу код, который занимает достаточно много пространства. С помощью LESS вы можете разветвлять id, классы и элементы как вам будет угодно. Используя пример, приведенный выше, вы можете сотворить нечто вроде этого:

Приведенный выше код абсолютно идентичен некрасивому селектору, о котором мы упомянули в предыдущем абзаце, но его гораздо легче прочесть и понять, и занимает он гораздо меньше места. Вы также можете в стилизации элементов сослаться на их псевдо-элементы используя «&» – в данном случае эта функция схожа с «this» в javascript.

Операции

Здесь будет примерно то, чего вы и ожидаете: использование точных чисел или переменных для произведения математических операций в стилях.

К слову, я знаю, что я также могу разделять элементы на 4 и получать переменные типа «@quarter_page», но мне хотелось бы продемонстрировать то, что здесь также уместно правило с круглыми скобками. Скобки также будут обязательными, если вам захочется провести операцию внутри параметра. Например, «border: (@width / 2) solid #000».

Sass гораздо более универсален в случае с цифрами, нежели LESS. Он был встроен в конверсионные таблицы для комбинирования сравниваемых единиц. Sass может работать с неопределенными единицами измерений, а также выявлять их. Данное свойство было представлено в попытке укоренить значимость библиотеки против изменений, которые были внесены в W3C.

Функции цветов

Ранее я уже упоминал о том, как LESS помогает мне орудовать с цветовой схемой в процессе написания кода. С этим также нераздельно связана и функция цветов. Предположу, что вы используете стандартный синий цвет по всему документу стилей, и вам хочется применить данный цвет к отправной кнопке «Submit» в форме. Вы можете открыть Photoshop или любой другой редактор, чтобы получить оттуда hex-значение (для цвета, который немного светлее или темнее). Либо вы можете просто использовать функцию цветов, предусмотренную в LESS.

Функция «lighten» в прямом смысле осветляет цвет по процентной шкале. В данном случае, функция осветлит основной синий на 10%. Данный способ позволяет вам изменять цвет градированных элементов и любые другие элементы с таким же цветом, просто изменяя сам основной цвет. Это может предложить вам значительные возможности в процессе оформления. К тому же, если вы использовали параметрическую функцию (из тех, что описаны выше), вы можете облегчить себе работу над браузерными префиксами, превратить их в нечто вроде «.linear-gradient(lighten(@blue), @blue, 100%);».

С другой стороны, у вас получится достаточно красивый эффект:

Так и получилась наша красивая градированная кнопка Submit, основанная на переменной.

Существуют и другие цветовые функции для затемнения или изменения цветности цветов, а также для вращения цветового колеса к другим цветам. Я рекомендую вам попробовать их для того, чтобы выяснить – какие функции больше всего вам пригодятся.

У Sass, кажется, достаточно много цветовых опций, но вряд ли все эти функции нам реально понадобятся. В большинстве своем, мы используем лишь затемнение и осветление. Если вам интересно узнать больше, то ознакомьтесь с соответствующей статьей на Nex3.

Условности и контроль

Ещё одна достаточно полезная штуковина, предложенная в LESS. С помощью Sass, у вас есть возможность использовать условные выражения «if < >else < >», а также циклы «for < >». Он поддерживает операторы «and», «or» и «not», а также « », « =» и «==».

Namespaces

Namespaces могут быть использованы для того, чтобы добавить еще один уровень в код CSS, что позволяет нам создавать группы наиболее часто используемых стилей, а затем выбирать их них на ходу. Например, если мы создали группу стилей под названием «defaults», мы можем выбрать из этой группы то, что нам нужно, когда соберемся обработать определенный элемент.

Далее, в нашем коде, если мы встречаемся с элементом «ul» внутри элемента «nav», мы будем знать, что нам потребуется стиль default. Итак, мы без труда можем применить его.

Scope (учёт рамок)

Учитывать рамки в программировании – это норма, следовательно, это такая же норма и в LESS. Если вы определите переменную на корневом уровне каскадной таблицы стилей, она будет доступна для всего документа. Если же вы, тем не менее, переопределите переменную и прикрепите её к селектору типа id или class, то она будет доступна лишь с данным значением лишь в рамках данного селектора.

Так как мы заново объявили переменную в селекторе «#header», значение до этой переменной будет отличаться и будет применимо только внутри данного селектора. Всё, что будет до или после него, сохранит значение изначального объявления.

Scope в Sass выполнен немного иным образом. В вышеприведенном коде, когда переменная «@color» изменена на «red», она будет интерпретирована в коде как есть.

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

Данная часть достаточно проста. В LESS валидны два типа комментариев. Стандартный CSS-комментарий «/* comment */» — валиден и будет проведен через обработку и далее представлен. Однострочные комментарии «// comment» также работают, но они не будут проведены и выведены. Следовательно, им можно повесить ярлык «silent».

Импорт

Импорт также вполне стандартен. Стандартный «@import: ‘classes.less’;» работает вполне сносно. Если, тем не менее, вы импортируете другой файл LESS, то расширение файла будет опциональным. Следовательно, и «@import ‘classes’;» также будет работать хорошо. Если вы хотите импортировать что-то без этапа обработки в LESS, то вы можете использовать расширение .css (например, «@import: ‘reset.css’;»).


String Interpolation (Интерполяция строк)

Строчные данные также могут быть использованы в переменных и вызваны в пределах стиля посредством «@».

Escaping

Случаются моменты, когда вам нужно включать значение, которое не валидно для синтаксиса CSS или которое LESS не распознает. Зачастую такая ситуация возникает при необходимости реализовать какой-нибудь хак для нормализации работы приложения в продукции Microsoft. Во избежание ошибок и краха LESS, вам нужно будет исключить их.

javascript Evaluation (Определение javascript)

Это одна из моих любимых частей в работе с LESS: очень просто использовать javascript в стилях. Вы можете использовать выражения, а также обращаться к функциям среды разработки посредством обратного апострофа (`).

Форматирование на выходе

Хотя LESS не имеется настроек при выводе, Sass предлагает 4 версии вывода: ветвистая, компактная, сжатая и расширенная.

Эти две великолепные библиотеки разделяют много общего. Обе являются превосходными инструментами для дизайнеров, кто разрабатывает код, а также они могут помочь разработчикам работать более эффективно и быстрее. Если вы являетесь фанатом Ruby или HAML, то Sass точно вам подойдет. Как по мне (а я разработчик PHP и javascript), я придерживаюсь LESS, так как его гораздо проще интегрировать, а также осуществлять доступ к javascript-выражениям и атрибутам документа. Я сомневаюсь, что когда-либо прибегал к действительно серьезным навыкам программирования, пока разрабатывал таблицы стилей, но думаю, что стоит попробовать. Если вы пользовались обеими библиотеками, то мне бы хотелось услышать ваше мнение и советы! Наш ресурс всегда рад получать комментарии!

Основы Sass

Прежде, чем Вы сможете использовать Sass, Вам необходимо его настроить в вашем проекте. Если Вы хотите просто почитать, то не стесняйтесь — читайте, но мы рекомендуем сначала установить Sass. Установите Sass для того, чтобы разобраться во всех возможностях Sass.

Препроцессинг

Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS , например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.

Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS -файл, который Вы сможете использовать на любом сайте.

Самый простой способ получить такой результат — использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS , используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .

Также, вы можете следить за изменениями только определенных файлов или папок, используя флаг —watch . Данный флаг сообщает Sass, что необходимо следить за изменениями указанных файлов и при наличии таковых производить перекомпиляцию CSS после сохранения файлов. Если вы хотите отслеживать изменения (вместо ручной перекомпиляции) вашего файла, например, input.scss , то вам необходимо просто добавить флаг в команду:

sass –watch input.scss output.css

Вы также можете указать папки для отслеживания изменений и куда сохранять компилированные CSS файлы, для этого достаточно указать пути и разделить их двоеточием, например:

Sass будет отслеживать все файлы в директории app/sass и компилировать CSS в директорию public/stylesheets .

Илон Маск рекомендует:  Как в Excel транспонировать таблицу

Переменные

Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS , которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $ . Рассмотрим пример:

SCSS Syntax

Sass Syntax

CSS Output

Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS -файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

Вложенности

При написании HTML , Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.

Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

SCSS Syntax

Sass Syntax

CSS Output

Вы заметили, что селекторы ul , li , и a являются вложенными в селектор nav ? Это отличный способ сделать ваш CSS -файл более читабельным. Когда вы сгенерируете CSS -файл, то на выходе вы получите что-то вроде этого:

Фрагментирование

Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS , которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss . Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import .

Импорт

CSS имеет возможность импорта, которая позволяет разделить ваш CSS -файл на более мелкие и облегчить @import , то в CSS создается еще один HTTP -запрос. Sass берет идею импорта файлов через директиву @import , но вместо создания отдельного HTTP -запроса Sass импортирует указанный в директиве файл в тот, где он вызывается, т.е. на выходе получается один CSS -файл, скомпилированный из нескольких фрагментов.

Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss . И мы хотим импортировать _reset.scss в base.scss .

SCSS Syntax

Sass Syntax


CSS Output

Обратите внимание на то, что мы используем @import ‘reset’; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss . Sass — умный язык и он сам догадается.

Миксины (примеси)

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3 , где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS , которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform :

SCSS Syntax

Sass Syntax

CSS Output

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin transform . We’re also using the variable $property ins >CSS declaration starting with @include followed by the name of the mixin.

Расширение/Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами. Класс-шаблон — особый тип классов, который выводится только при использовании расширения — это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.

SCSS Syntax

Sass Syntax

CSS Output

Вышеуказанный код сообщает классам .message , .success , .error и .warning вести себя как %message-shared . Это означает, что где бы не вызывался %message-shared , то и .message , .success , .error и .warning тоже будут вызваны. Магия происходит в сгенерированном CSS , где каждый из этих классов получает css-свойства, как и %message-shared . Это позволит вам избежать написания множества классов в HTML элементах.

Вы можете расширить большинство простых CSS селекторов прибавление к классам-шаблонам в Sass, однако, использование шаблонов — простейший способ быть уверенным, что вы не расширяете класс везде, где он используется в ваших стилях, что могло бы привести к непреднамеренным наборам стилей в вашем CSS.

Когда вы генерируете ваш CSS , то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS , так как ни разу не был использован.

Математические операторы

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как + , — , * , / и % . В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article .

SCSS Syntax

Sass Syntax

CSS Output

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

  • Текущие версии:
  • Dart Sass1.20.1
  • LibSass3.5.5
  • Ruby Sass ⚰

Sass © 2006–2020 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, Jina Anne, и многочисленные участники. Доступно для использования и изменения по лицензии MIT.

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

2 –Миксины

Миксины — это функции, позволяющие многократно использовать набор CSS-свойств во всей таблице стилей.
Вместо того, чтобы писать один и тот же код несколько раз, мы можем написать его один раз в миксине и затем использовать.
Это может быть полезно для стилизации определенных элементов и для автоматической расстановки вендорных префиксов.
Когда миксин включен в какой-либо селектор, препроцессор считывает аргументы (если они есть) и подставляет код, который написан в исходном миксине. Миксины определяются немного по-другому в Sass чем Less.
В Sass используется директива @mixin, в Less она определена как селектор класса.
Напимер:

Миксины используются для включения свойств из одного набора правил в другой набор.
Этот метод идёт дальше с селекторами наследования в Sass.
Sass расширяет группы селекторов , которые имеют одинаковые свойства и значения с помощью директивы @extend, вместо того чтобы копировать все свойства.
Напимер:

Условные операторы.


Это то, чего нет в Less!
Sass позволяет использовать операторы If <>, else <>, , =, ==.

Циклы.

Less позволяет использовать циклы только с числовым значениями.
А вот Sass есть возможность перебирать данные любого вида.
Например:

Операции с числами.

Sass и Less поддерживают основные арифметические операции над числами.
Однако есть разница в том, как они обращаются с единицами измерения.
LESS возьмет за единицу измерения значение первой переменной, игнорируя все остальные, например 100px + 2em == 102px.
Sass даст чётко понять что здесь есть ошибка.
Также Sass позволяет проводить математические операции с неизвестными единицами измерения, которые могут появиться в следующих спецификации W3C или в случае вывода нестандартного блока в браузере.

Функции работы с цветами.

Функции для работы с цветом — это встроенные в препроцессор функции, позволяющие манипулировать цветами.
Эти функции могут быть полезны для создания градиентов, более тёмных или светлых цветов при hover’e и так далее.
Это всего лишь короткий список основных функций для работы с цветом в Sass.
Полный список функций доступен в документации.
Полный список функций для работы с цветом можно посмотреть в документации Less.

Переменные.

Переменные могут быть объявлены и использованы в любом месте таблицы стилей.
Они могут содержать в себе любое значение, являющееся значением какого-либо CSS-свойства — например, цвет, число (включая единицы измерения), или текст.

Sass

Переменные в Sass начинаются с символа $ и объявляются точно так же, как и CSS-свойства.

Less

Less-переменные — такие же, как Sass-переменные.
Единственное отличие — в Less они начинаются с символа @.

Вывод

Каждый из препроцессоров, о которых мы говорили (Sass, Less), имеет свой уникальный подход к решению одной и той же задачи — дать разработчикам возможность использовать полезные функции, при этом сохраняя кроссбраузерность и чистоту кода.

CSS-препроцессоры

Если рассматривать препроцессоры вместе с CSS, то получается картина более понятная, нежели чем рассматривать понятие препроцессора отдельно.

Определение

CSS препроцессор (от англ. CSS preprocessor) — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.

Основная задача препроцессора — это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, и тем самым, ускорить разработку и поддержу стилей в проектах.

CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код.

При помощи препроцессоров вы можете писать код, который нацелен на:

  • Читабельность для человека
  • Структурированность и логичность
  • Производительность

И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.

Синтаксический сахар

Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».

Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.

Синтаксический сахар вводит в язык альтернативные варианты записи заложенных в этот язык конструкций. Под альтернативными вариантами записи стоит понимать более короткие или удобные конструкции для человека, которые в конечном итоге будут преобразовываться препроцессором в исходный язык, без синтаксического сахара.

Если попытаться применить это понятие к CSS-препроцессорам, то оно, в общем случае, полностью описывает их суть. Ещё раз напомню, что основной задачей препроцессоров является упрощение и ускорение разработки, а как это ещё можно сделать, если не ввести альтернативные варианты записи?

Какие бывают CSS-препроцессоры?

Пора перейти к более конкретным примерам, а именно к самим CSS-препроцессорам. На момент написания книги можно выделить три популярных препроцессора:

И несколько незначительных для нас игроков:

  • Closure Stylesheets
  • CSS Crush

О первой тройке мы поговорим отдельно немногим ниже, а вот о двух последних разговора вообще не будет, в виду их непопулярности. При желании, описания этих препроцессоров с лёгкостью можно найти в поисковике.

Какой смысл использования препроцессоров?

Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.

Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня. Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными.

CSS — это сложно


Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.

Доступная документация

Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.

Простота использования

Использовать препроцессоры стало проще, чем раньше, причём намного проще. Для этого нужно лишь установить программу, которая будет следить за файлами, предназначенными для препроцессора, и при их изменении будет компилировать содержимое этих файлов в чистый CSS-код.

Для более продвинутых пользователей есть специальные сборщики проектов. Не думайте, что если вы используете программу для препроцессоров, а не сборщик проектов, то вы недостаточно круты. На самом деле, такие сборщики предлагают полный контроль и расширенные настройки, а не делают из вас джедая.

Структура и логичность кода

Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:

Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.

Примеси

Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.

Модульность

Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.

При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.

Почему бы не подождать развития CSS?

Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.

В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.

Так что не стоит ждать в ближайшее время революций и изменений, способных затмить функционал и возможности CSS-препроцессоров.

Разновидности препроцессоров

Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:

Враждующими я их называю, потому что каждый приверженец одного из препроцессоров считает своим долгом поливать нечистотами представителей других, скажем так, конфессий. Такая неприязнь особенно часто проявляется у любителей препроцессора Sass, который считается старейшим и мощнейшим из всех трёх препроцессоров.

Для полной картины, я хочу привести краткую справку по каждому препроцессору:

Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.

Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

  • Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, который основан на идентации. Считается устаревшим.
  • SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

Stylus

Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют : , ; , <> и некоторые скобки).

Из CSS в SASS, LESS и SCSS

Добавить код CSS

Готовый код SASS, LESS или SCSS

Четыре действия для конвертации из css в SASS, LESS или SCSS

  1. Копируем css код в верхнее поле.
  2. Выбираем какой код должен получится на выходе SASS, LESS или SCSS.
  3. Нажимаем кнопку В Less,sass,scss.
  4. Получившийся код из поля внизу копируем в буфер.

Препроцессор SASS.

Sass это решение проблем css при разработки такие как.

  • Упорядоченность.
  • Четкая структура.
  • Отсутствие связи между блоками.

У большого css кода правила начинают перекрываться это приводит к неудобству, чтобы такого не было сделали препроцессоры как sass.

sass добавляет элемент программирования в css, где появятся переменные, наследование, аргументы и миксины.

Полезные миксины для адаптива на SASS и LESS

Данная статья посвящена тому как использовать препроцессоры css (на примере SASS и LESS) при написании медиазапросов.

Данный подход заключается в написании миксинов для необходимых брекпоинтов, после чего вся наша работа сводится к вызову необходимого миксина. Причём вызов миксина осуществляется в том же месте где и дефолтные стили, что существенно упрощает и минимизирует код

Далее приведём пример данного подхода на двух популярных препроцессорах

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL