Препроцессор sass что это

Все, что нужно знать о SASS

Что такое SASS?

1. SASS расшифровывается как Syntactically Awesome Stylesheets («синтаксически превосходные таблицы стилей»). Это более простой и мощный способ написания CSS, позволяющий реально экономить время.

2. На самом деле SASS — это препроцессор. Определение SASS сформулируем следующим образом:

SASS — это скриптовый язык препроцессора, который интерпретируется или компилируется в каскадные таблицы стилей CSS.

Почему SASS?

1. Написание стилей для HTML с использованием только CSS выходит очень неорганизованным и «съедает» время. Это одна из главных причин, почему начинающие веб-разработчики переходят на SASS.

2. SASS — это сокращенный вариант CSS.

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

Вкратце о SASS

1. Обладает широкой функциональностью.

2. Совместим со всеми версиями CSS (CSS1, CSS2, CSS3).

3. Зрелый, более 14 лет он активно поддерживается командой разработчиков.

Функциональные возможности SASS

Переменные SASS используются для хранения любых свойств CSS: размера шрифтов, цвета, семейства шрифтов и т. д.

Вот синтаксис объявления переменных в SASS:

Примеси

1) Примеси в SASS задействуются в первую очередь ради возможности многократного использования.

2) Примеси позволяют определять стили для повторного использования во всей таблице стилей.

Объявление примесей:

Пример:

Использование примесей в стилях

Для любого селектора элементов, или класса, или идентификатора выполняется следующее:

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

Импорты

В настоящих проектах все больше и больше страниц с HTML и стилистическим оформлением, и по мере роста команды разработчиков каждый такой проект становится все крупнее. В этот период невероятно трудно поддерживать все стили (SASS) в одном файле SASS.

Поэтому код SASS обычно разбивают на модули (менее крупные блоки кода) и помещают в разные файлы.

В этой ситуации, когда какому-либо файлу SASS требуются данные/код из другого файла SASS, возникают вопросы:

Как этому файлу получить доступ к данным/коду из другого файла?

Ответ дает следующая функциональная возможность SASS — импорт.

Импорт позволяет получить доступ к данным/коду из другого файла SASS и импортировать в этот файл не только файл, находящийся в том же каталоге, но и файл из другого каталога.

Пример:

Импорт

«Extends»

Допустим, имеется класс А CSS со множеством свойств стилей. И есть также класс Б, которому в добавок к некоторым дополнительным свойствам стилей требуются эти самые свойства стилей класса А. Как быть здесь?

Скопировать и вставить свойства из класса А в класс Б?

Но разве это хорошая практика написания стилей?

Нет, это плохая практика.

Для ее устранения в SASS имеется функциональная возможность Extends, позволяющая одному классу наследовать свойства другого класса. А эта практика очень хорошая.

Рассмотрим следующий пример:

Изображение A Изображение Б

ОБРАТИТЕ ВНИМАНИЕ: В SASS здесь появляется отступ. Должен быть правильный отступ, иначе будет выдана ошибка.

Файлы «Partials» в SASS

При добавлении перед любым файлом SASS символа _ SASS пропускает просмотр этих файлов, и поэтому они не компилируются. Такие файлы называются «Partials» («фрагменты»).

Установка SASS

Прежде всего на компьютере должен быть установлен Ruby. На компьютерах с Mac Ruby уже установлен, а для Windows придется загрузить его отсюда.

Затем открываем терминал и вводим следующую команду:

За несколько секунд SASS устанавливается, о чем и сообщается в терминале.

Различные инструменты для компиляции SASS

a) компилирование вручную с помощью команды

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

б) настройка средства наблюдения в файле SASS / автоматическая компиляция с помощью команды

2. Кроме того, есть онлайн-инструменты для настройки средства наблюдения в файле SASS.

Источник

Полный гайд по SCSS/SASS

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

Чтобы по-настоящему почувствовать преимущества Sass, вам нужно понять ключевые идеи этого метаязыка. Об этом мы и поговорим.

Весь Sass/SCSS код компилируется обратно в стандартный CSS, поэтому браузер понимает его и корректно выводит результат. Текущие версии браузеров не поддерживают Sass/SCSS непосредственно (как и другие препроцессоры), а стандартная спецификация CSS не предлагает нам альтернатив (пока).

Приступим!

Пока вы хотя бы раз не попробуете сгенерировать значения для свойств с помощью цикла, вы не познаете настоящую мощь Sassy CSS. Но мы начнём с основ SCSS и постепенно доберёмся до самого интересного.

Что такого есть в Sass/SCSS, чего нет в стандартном CSS?

Препроцессор Sass

Sass не динамичный язык. Он не позволяет генерировать или изменять CSS свойства и значения в реальном времени. Но вы можете генерировать их более эффективным способом и внедрять в стандартные свойства (например, для CSS анимации).

Новый синтаксис

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

Несколько фактов для начала

CSS препроцессоры добавляют новый синтаксис в CSS.

Существует 5 CSS препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Конвертация форматов .scss и .sass. Используем команду sass-convert.

На данный момент ни один браузер не поддерживает CSS препроцессоры напрямую. Вы можете свободно экспериментировать с любым из 5 препроцессоров на сервисе codepen.io. Кроме того, используя препроцессор, вы должны будете установить его к себе на веб-сервер.

Эта статья о SCSS, но другие препроцессоры имеют схожие функции, хотя синтаксис может отличаться.

Superset

Sassy CSS в любом своём проявлении является «расширением» языка CSS, а значит, всё что работает в CSS, работает и в Sass/SCSS.

Переменные

Определение переменных

Вы можете перезаписать имя переменной или задать для неё значение по умолчанию. Для этого добавьте метку !default к переменной, и если её значение не изменится в дальнейшем и не будет пустым, то будет использоваться заданное значение по умолчанию.

В примере выше окончательным значением переменной $text будет “Piece of string.”, а не “Another string.”, потому что переменная не пуста.

Sass переменные можно назначить любому свойству CSS

Вложенные правила

В стандартном CSS, вложенность достигается путём расстановки пробелов.

Вложенность в стандартном CSS

С помощью Sassy CSS этот код можно записать так:

Вложенность в Sass. Меньше повторений

Конечно, в итоге это всё скомпилируется в обычный CSS. Это просто синтаксис, но как видите, он выглядит чище и с меньшими повторениями.

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

Тем временем под капотом, препроцессор компилирует всё в стандартный код CSS (как в первом примере), чтобы браузер смог его отобразить. Мы лишь изменили способ написания CSS.

Оператор &

В Sassy CSS можно использовать оператор & (И), давайте посмотрим, как это работает.

Используем символ &

В 5 строке мы видим &:hover, после компиляции, вместо символа &, подставляется имя родительского элемента, т.е. a:hover. В результате у нас получится такой код:

Результат компиляции SCSS

Миксины

Для объявления миксина используйте директиву @mixin (ещё это называют mixin rule).

Давайте создадим миксин, который определяет поведение элемента как Flex:

Миксины

Теперь любой HTML элемент с классом .centered-elements будет иметь свойства Flexbox. Вы можете использовать миксины совместно с другими CSS свойствами.

Для класса .centered-elements я добавил миксин и правило border:1px solid gray;

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

Кросс-браузерность. Пример

Некоторые экспериментальные фичи работают только в определённых браузерах.

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

Например, если вам нужно вращать элемент в браузере на движке Webkit, так же, как и в других браузерах, вы можете создать миксин, который принимает переменную $degree в качестве аргумента:

Реализуем кросс-браузерность с помощью миксин

Теперь нужно подключить (@include) этот миксин в CSS класс:

Правило Rotate совместимое со всеми браузерами

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

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

Есть несколько неочевидных особенностей, которые следует учитывать, чтобы избегать ошибок.

Сложение

Убедитесь, что оба значения соответствуют одному формату.

Вычитание

Этот оператор работает так же, как и предыдущий.

Вычитание

Умножение

Для умножения используется звёздочка, как и в стандартном CSS calc(a * b).

умножение и деление

Деление

Так как в стандартном CSS символ деления зарезервирован для других целей, есть некоторые особенности его использования. Например, font: 24/32px определяет размер шрифта 25px и line-height 32px. Т.е. символ деления используется для сокращённой записи свойств шрифта. Посмотрим, как работает SCSS, сохраняя совместимость со стандартным CSS.

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

Остаток

Вы можете вычислить остаток от операции деления. Давайте попробуем создать «зебру» для набора HTML элементов.

Создание зебры

Начнём с создания миксин.

Примечание: далее мы ещё поговорим о правилах @for и @if

Нам понадобится несколько HTML элементов:

HTML код

Сгенерированная зебра

Операторы сравнения

После компиляции, мы получим такой CSS:

Результат сравнения

Логические операторы

Этот код создаёт класс button-color, который изменяет background-color в зависимости от ширины кнопки.

Строки

В некоторых случаях можно добавить строки в допустимые значения CSS без кавычек, но только если добавленная строка является завершающим элементом:

Комбинируем CSS значения свойства со строкой Sass/SCSS

А следующий пример приводит к ошибке:

Этот код не сработает

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

Этот пример тоже не сработает Строка, содержащая пробелы, должна быть в кавычках Складываем несколько строк Складываем строки и числа

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

Операторы управления потоками

В SCSS есть функции (fucntion()) и директивы (@directive), их ещё называю «правилами». Мы уже создавали функцию, когда проходили миксины. Вы можете передавать аргументы функциям.

У функции обычно есть скобки, которые ставятся сразу после её имени. Директива/правило начинается с символа @.

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

if()

if() — это функция. Применяется она очень просто: оператор вернёт одно из двух значений, в зависимости от условия:

@if — это директива, её используют для создания ветвлений на основе условия.

Скомпилированный Sassy код:

Пример использования одиночного if оператора и комбинации if-else

Проверяем существует ли родительский элемент

Символом & выбираем родительский элемент, если он существует, в противном случае возвращаем null. Можно использовать совместно с директивой @if.

Далее мы создадим CSS стиль с условием, где результат будет зависеть от наличия родительского элемента.

Если родительский элемент не существует, оператор & выдаёт null и в результате применяется альтернативный стиль.

@for

Директиву @for используют для повторения CSS определений несколько раз подряд.

Цикл for

Источник

Препроцессор SASS: пишем стили просто и быстро

Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного Css на препроцессор Sass. А ведь раньше не понимал — что за Sass, для чего он нужен, это наверно для супер продвинутых профи в верстке. Да, использование препроцессоров это шаг на новый уровень в веб-разработке, но здесь ничего страшного и сложного нет и вы убедитесь в этом сами, дочитав данную статью до конца.

И так, чем хорош препроцессор и конкретно Sass? Я сразу скажу, что есть и другие, такие, как Less, Stylus и др. Все они работают по одному принципу, но у каждого свои особенности. Sass получил большую популярность у профессионалов в следствие чего изучение значительно упрощается. Просто чем популярнее технология, тем больше сообщество и тем более развернута документация.

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

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

Разработчиком Sass является француз Hugo Giraudel, проживающий в Германии с определенного времени. Естественно документация на английском языке, но я лично в ней неплохо ориентируюсь (важно знать технический английский). Но также есть перевод и на русский. Я бы советовал все же английскую версию, это для того, чтобы привыкать и изучать все глубже английский. Но русская тоже ничем не хуже.

Компиляция Sass в Css

В качестве программного обеспечения для компиляции Sass в Css я использую плагин Sass для таск-менеджера Gulp. Вообще Sass является приложением (Gem) языка Ruby. Поэтому, если вы хотите обойтись без Gulp, то для компиляции в Css вам необходимо будет установить платформу языка программирования Ruby. Я не буду сейчас показывать как это делается, можете почитать об этом на официальном сайте.

Синтаксис — Sass, Scss

Сразу отмечу, что существует 2 синтаксиса написания кода: Sass и Scss.

Синтаксис Sass незначительно отличается от Scss. Scss похож больше на обычный код Css, а в Sass опущены фигурные скобки и точка с запятой между правилами. Также существует различие в написании некоторых функций и надо быть внимательным в том, какой синтаксис вы выбираете. Расширения файлов для Sass — *.sass, а для Scss — *.scss. Синтаксис Sass он более старый, а Scss появился позже, чтобы упростить изучение для новичков. Я сам начинал изучение данного препроцессора именно на Scss, так было проще его понять. Сейчас же я перешел на Sass, для меня он более удобен.

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

Помните! Если вы используете табулятор в качестве отступа, то пробелы следует исключить, чтобы везде было одинаково. И наоборот — если используете пробелы, то табулятор следует исключить. Иначе, компилятор выдаст ошибку.

В большинстве редакторов кода (например, Sublime Text) есть разметка отступов в виде полос, что не дает нам запутаться. В примерах ниже я буду использовать синтаксис Sass.

Упрощаем жизнь с помощью Sass

Вложенность правил

Вот чем мне приглянулся Sass с самого начала, так это как раз вложенностью css-правил одних в другие. Это здорово экономит время, а код получается структурируемым и легкочитаемым. Например, если мы хотим написать стили элементам определенного родительского контейнера, то нам в Css необходимо каждый раз указывать родительский класс, например вот так:

Вложенные свойства

Помимо вложенности правил в Sass существует возможность вложенности свойств. Например, вот как можно записать значения margin :

Привязка к селектору или конкатенация — знак &

Sass

Sass

Иногда нужно указать цепочку селекторов до текущего элемента. Можно конечно вынести его в корень, но чтобы не нарушать вложенность можно написать следующим образом:

Sass

Привязка к родительскому селектору, но на уровнь выше

Выше для примера я демонстрировал Sass код:

Sass

Вот так я делал раньше:

А теперь можно сделать так:

Шаблоны-заготовки

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

Sass

Шаблоном выступает в данном случает селектор %button (об этом говорит знак — %). Это удобно тем, что сам селектор шаблона нигде не участвует, а его стили наследуются другими селекторами посредством директивы — @extend. Данный шаблон можно использовать сколько угодно раз, сокращая тем самым количество кода.

SassScript

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

Переменные

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

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

Директивы

@extend

Данную директиву мы затронули выше, когда изучали шаблон-заготовку. Закрепим еще раз знания. С помощью @extend мы можем скопировать правила любого селектора. Например, при верстке может быть так, что элемент «А» и элемент «Б» могут быть схожи по внешнему виду. В данном случае можно написать правила элементу «А», а для «Б» просто скопировать стили элемента «А», слегка переопределив нужные свойства.

Sass

@import

Данная директива позволяет объединять несколько файлов стилей в один. Это очень удобно, тем более, если проект большой. Не стоит путать с директивой, которая существует в Css — @import. В Css обязательным атрибутом является — url().

На самом деле удобнее писать стили в разных файлах и предназначение у каждого свое. Например, весь каркас страницы можно разделить на регионы: header.sass, sidebar.sass, footer.sass. Собрать все можно в главном файле main.sass, как раз используя @import. Файлы регионов можно указать также через нижнее подчеркивание в начале имени файла, например так: _header.sass, _sidebar.sass, _footer.sass. Такие файлы называются фрагментами. При импорте фрагментов не обязательно указывать расширение файла.

Файлы фрагментов могут быть с расширениями: *.sass, *.scss или *.css. Например, главный файл может быть с расширением *.sass, а шапка сайта, к примеру с расширением *.scss. То есть не важно какое у вас расширение главного файла. Следует отметить, что при импорте переносятся все переменные и миксины (о них поговорим ниже) в главный файл, в который происходит импорт.

Также, можно указать импорт нескольких файлов через запятую: @import «header», «sidebar», «footer».

Имейте ввиду, что импорт происходит в том месте, где вы указали директиву @import. Обычно это делают в начале документа.

@at-root

Директива @at-root говорит сама за себя и если переводить на русский, то будет звучать так — «от корня». Иными словами мы переносим селектор в корень, отменяя цепочку родительских селекторов. Тут конечно можно задать вопрос — «А зачем нужна эта директива, если можно перенести селектор в корень в ручную?». Ответ прост — удобство написания кода, не нарушая структуру. Когда вы научитесь работать с Sass в полной мере вы это поймете.

Источник