@while
$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i — 2;}
Скомпилируется в:
.item-6 { width: 12em; }.item-4 { width: 8em; }.item-2 { width: 4em; }
Миксины
Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной .
Рассмотрите следующий пример:
@mixin large-text {font: {family: Arial;size: 20px;weight: bold;}color: #ff0000;}.page-title {@include large-text;padding: 4px;margin-top: 10px;}
Скомпилируется в:
.page-title {font-family: Arial;font-size: 20px;font-weight: bold;color: #ff0000;padding: 4px;margin-top: 10px;}
Вы также можете использовать составные миксины, например как:
@mixin mixin-one{color: red;}@mixin mixin-two{width:20px;}.page-title {@include mixin-one;@include mixin-two;}
Вы также можете передавать переменные в миксинах:
$globel-prefixes:webkit moz ms o;@mixin prefixer ($property,$value,$prefixes:null){@if $prefixes==null{@each $prefix in $globel-prefixes {-#{$prefix}-#{$property}: $value; }} @else {@each $prefix in $prefixes {-#{$prefix}-#{$property}: $value;}}#{$property}: $value;}*{@include prefixer(box-sizing,border-box);}
Будет скомпилено в:
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
Функции
Вы также можете определять функции, возвращающие значение. Для примера.
$no-of-columns:12;$gutter-width:2%;@function get-column-width($i){@return (100% — ($no-of-columns/$i — 1) * $gutter-width) / $no-of-columns * $i;}.col-6 {width:get-column-width(6);}
Будет скомпилировано в:
.col-6 {width: 49%;}
Расширения
Вы столкнетесь с ситуацией, когда вам нужно будет переиспользовать стили. Рассмотрите следующий пример:
<button class=”btn”>Normal</button><button class=”btn-blue”>Blue</button>
Оба будут иметь одинаковые стили, кроме цвета.
.btn{margin:10px;color:black;width:200px;height:100px;}.btn-blue{@extend .btn;background:blue;}
Это будет скомпилировано в:
.btn,.btn-blue{margin:10px;color:black;width:200px;height:100px;}.btn-blue{ background:blue; }
Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.
Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать перед селектором.
%btn{margin:10px;color:black;width:200px;height:100px;}.btn-blue{@extend %btn;background:blue;}.btn-red{ @extend %btn; background:red; }Будет скомпилировано в:.btn-blue{margin:10px;color:black;width:200px;height:100px;background:blue;}.btn-red{margin:10px;color:black;width:200px;height:100px;background:red;}
Почему бы не подождать развития CSS?
Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности)
С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков
В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.
Так что не стоит ждать в ближайшее время революций и изменений, способных затмить функционал и возможности CSS-препроцессоров.
Импорт и модули permalinkИмпорт и модули
- Dart Sass
- since 1.23.0
- LibSass
- ✗
- Ruby Sass
- ✗
В настоящее время только Dart Sass поддерживает . Пользователи других реализаций должны использовать правило rule вместо этого.
Модульная система Sass легко интегрируется с , импортируете ли вы файл, содержащий правила , или загружаете файл, содержащий импорт, как модуль. Мы хотим сделать переход от к как можно более плавным.
Импорт файла модуля-системы
Когда вы импортируете файл, содержащий правила , импортирующий файл имеет доступ ко всем участникам (даже частным участникам), определенным непосредственно в этом файле, но не ни к каким участникам из модулей, загруженных этим файлом. Однако, если этот файл содержит правила , импортируемый файл будет иметь доступ к перенаправленным участникам. Это означает, что вы можете импортировать библиотеку, которая была написана для использования с модульной системой.
️ Внимание!
Когда импортируется файл с правилами , весь CSS, транзитивно загруженный ими, включается в результирующую таблицу стилей, даже если он уже был включен другим импортом. Если вы не будете осторожны, это может привести к раздуванию вывода CSS!
Файлы только для импорта
API, который имеет смысл для , может не иметь смысла для . Например, по умолчанию добавляет пространство имен всем участникам, так что вы можете безопасно использовать короткие имена, но не делает, поэтому вам может понадобиться что-то более длинное. Если вы являетесь автором библиотеки, вы можете быть обеспокоены тем, что если вы обновите свою библиотеку для использования новой системы модулей, ваши существующие пользователи, основанные на , сломаются.
Чтобы упростить эту задачу, Sass также поддерживает файлы только для импорта. Если вы назовете файл , он будет загружен только для импорта, а не для . Таким образом, вы можете сохранить совместимость для пользователей , в то же время предоставляя удобный API для пользователей новой модульной системы.
Настройка модулей с помощью импорта
- Dart Sass
- since 1.24.0
- LibSass
- ✗
- Ruby Sass
- ✗
Вы можете , которые загружаются через , определяя глобальные переменные до , который первым загружает этот модуль.
️ Внимание!
Модули загружаются только один раз, поэтому, если вы измените конфигурацию после того, как вы модуля в первый раз (даже косвенно), изменение будет проигнорировано, если вы модуль снова.
Загрузка модуля, содержащего импорт
Когда вы используете (или ), загружаете модуль, который использует , этот модуль будет содержать все открытые участники, определенные таблицей стилей, которую вы загружаете, и все, что таблица стилей транзитивно импортирует. Другими словами, все, что импортируется, обрабатывается так, как если бы оно было записано в одной большой таблице стилей.
Это упрощает преобразование start с использованием в таблице стилей даже до того, как все библиотеки, от которых вы зависите, будут преобразованы в новую модульную систему. Однако имейте в виду, что если они все-таки конвертируют, их API-интерфейсы могут измениться!
Настройка форматирования скомпилированных стилей в SASS
Одной из мощных функций SASS является наличие опций, позволяющих управлять форматированием кода .scss-файлов при конвертации их в обычный CSS.
Используя опцию -style, мы можем выполнить форматирование скомпилированного CSS-кода. Далее описывается имеющиеся в SASS стили форматирования.
Вложенный формат (Nested Format)
Вложенный стиль это формат по умолчанию. Он задает отступы для всех стилей в выходном CSS-файле.
Чтобы увидеть его в действии, скопируйте и вставьте код, приведенный ниже в свой файл style.scss, а затем откройте командную строку и убедившись, что вы внутри директории SASS, введите SASS –update style.scss.
Эта команда обновит форматирование для уже скомпилированных CSS-стилей через командную строку:
После этого откройте файл style.css и обратите внимание на появившиеся отступы:
Расширенный формат (Expanded Format)
Это один из наиболее удобных для визуального восприятия форматов, так как все фигурные скобки проставлены так, чтобы выделять расположенные внутри них свойства, каждое из которых располагается на новой строке.
Давайте посмотрим это в действии.
Используя код, приведенный выше, откройте командную строку и введите sass –update style.scss –style expanded. Как можно заметить, мы добавили опцию –style, использующуюся для перекомпиляции CSS-файла в другое форматирование:
Если теперь вы взглянете на скомпилированный CSS-файл, то увидите форматирование, как на изображении ниже.
Каждому свойству выделена отдельная строка, а фигурные скобки раскрыты так, чтобы визуально выделять помещенные в них свойства:
Компактный формат (Compact Format)
Этот формат представляет собой очень сжатый стиль написания, который, тем не менее, достаточно хорошо визуально воспринимается.
Добавляются пробелы между фигурными скобками, но свойства располагаются на одной строке.
Чтобы увидеть этот формат в действии, используя предыдущий пример, откройте командную строку и наберите команду sass –update style.scss –style compact:
После компиляции, вы увидите, что код стал очень компактным, а элементы плотно расположены друг относительно друга:
Компрессированный формат (Compressed Format)
Компрессированный формат является самым сжатым. Он подходит для конечного этапа, когда продукт запускается и требуется минимальный размер файла и производительность.
Чтобы увидеть, как выглядит этот формат, в командной строке наберите sass –update style.scss –style compressed:
Как видно, на изображении ниже, в выходном CSS-файле отсутствуют пробелы и вообще какое-либо форматирование, чем и достигается сжатие:
Особенность #3: Mixins (миксины)
Выше мы узнали, как применять переменные для CSS-правил. Но что, если нам нужно использовать несколько правил вместе? Для этих целей у Sass есть миксины.
Что такое миксин?
Миксины (также иногда называемые примесями) являются функциями Sass, которые группируют CSS-правила. Мы можем использовать их в качестве переменных.
Миксин создается с помощью команды @ mixin и названия миксина:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
Также можно создать миксин в виде функции и добавлять к ней параметры:
$font-color: red;
@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
После создания миксина мы можем воспользоваться им в любом классе при помощи команды @ include. Таким образом, мы можем подключить миксин my-font вместо того, чтобы каждый раз писать 4 строки правил для шрифта. Такой подход упрощает код.
p {
@include my-font;
}
Расширение/Наследование
Это одна из самых полезных функций Sass. Используя директиву можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами. Класс-шаблон — особый тип классов, который выводится только при использовании расширения — это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.
CSS Output
Вышеуказанный код сообщает классам , , и вести себя как . Это означает, что где бы не вызывался , то и , , и тоже будут вызваны. Магия происходит в сгенерированном CSS, где каждый из этих классов получает css-свойства, как и . Это позволит вам избежать написания множества классов в HTML элементах.
Вы можете расширить большинство простых CSS селекторов прибавление к классам-шаблонам в Sass, однако, использование шаблонов — простейший способ быть уверенным, что вы не расширяете класс везде, где он используется в ваших стилях, что могло бы привести к непреднамеренным наборам стилей в вашем CSS.
Когда вы генерируете ваш CSS, то он будет выглядеть как пример ниже
Обратите внимание, не попадает в CSS, так как ни разу не был использован
Простой CSS @import permalinkПростой CSS @import
- Dart Sass
- ✓
- LibSass
- partial
- Ruby Sass
- ✓
По умолчанию LibSass правильно обрабатывает простой импорт CSS. Однако любые будут неправильно применяться к правилам простого CSS , что позволяет этим правилам загружать файлы Sass.
Поскольку также определен в CSS, Sass нужен способ компиляции простого CSS без попытки импортировать файлы во время компиляции. Чтобы добиться этого и гарантировать, что SCSS является как можно большей частью надмножества CSS, Sass будет компилировать любой со следующими характеристиками в простой импорт CSS:
- Импортирует, где URL заканчивается на .
- Импортирует, где URL начинается с или .
- Импортирует, где URL-адрес записан как .
- Импорт с медиа-запросами.
Интерполяция
Хотя при импорте Sass нельзя использовать интерполяцию (чтобы всегда можно было определить, откуда берутся примеси, функции и переменные), простой импорт CSS может. Это позволяет динамически генерировать импорт, например, на основе параметров миксина.
Настройки программы Koala
Настройки у программы достаточно просты. Достаточно кликнуть на иконку шестеренки.
Заходим в настройки Koala
Основные настройки
Здесь вы можете выбрать язык программы, есть и Русский. Опции сворачивания программы в трей, чтобы не занимала место на таскбаре, нотификации при успешной компиляции, автоматическую компиляцию файлов когда проект добавлен в программу или обновлен. Можете поставить как у меня, но будьте аккуратны с треем, при сворачивании иконка программы будет улетать в него, и может показаться что программа не запущена, но она просто спряталась.
Основные настройки программы Koala
Теперь зайдем в настройки для SASS
Compass mode нужен чтобы использовать возможности библиотеки Compass, на начальном этапе они вам точно не понадобятся, поэтому отключаем.
Включаем Source Map (исходные карты), они нужны чтобы видеть в каком .scss файле изначально был описан каждый класс, который будет скомпилирован в CSS. Удобно для отладки стилей.
Еще можно включить Autoprefix и указать значение например как у меня, . Это значит что мы будем поддерживать 99% всех браузеров. Более подробно ознакомиться с ним можно на его официальной странице в GitHub, но указанной настройки вам также хватит для старта. Поэтому не рекомендую с ним заморачиваться на этом этапе.
Настройки SASS в Koala
Стиль вывода имеет 4 разных значения:
Если вы хотите выбрать максимально читабельный и развернутый CSS на выходе, то это expanded. Nested это немного сжатый с указанием вложенности стиль оформления CSS, compact — вытянутые стили в оду строку, каждый селектор с новой строки. Compressed- сжатый, минифицированный вид CSS, когда весь код файла вытянут в одну строчку, и удалены все лишние пробелы и символы которые могут быть удалены без потери работоспособности.
Я использую либо включенный стиль expanded c включенными «сорс-мапами» для удобства разработки, либо compressed c отключенным source maps когда надо сделать максимально сжатый CSS файл без лишнего веса.
Индивидуальные настройки для файлов
Еще в Koala можно открывать индивидуальные настройки для каждого файла, просто кликнув по нему. Выглядит это вот так:
Правая панель — индивидуальные настройки для файлов в Koala
По умолчанию эти индивидуальные настройки дублируют основные, поэтому не рекомендую их изменять. Единственное чем они могут быть полезны — это отключение галочки автокомпиляции для тех файлов которые вы не хотите компилировать. И еще в этой панели есть кнопка Compile, пригодится если вы хотите запустить сборку принудительно.
На этом с настройками закончили. Компиляция SCSS настроена.
Расширенный синтаксис
1. В sass также поддерживаются условные операторы:
код показан ниже:
Окончательный код css выглядит следующим образом:
2. В дополнение к условным операторам sass также поддерживает циклы for:
Существует две формы цикла for, а именно:
Среди них $ i представляет собой переменную, start представляет начальное значение, а end представляет конечное значение. Разница между ними заключается в том, что ключевое слово «through» означает включение номера конца, а to не включает номер конца.
Он также поддерживает цикл while:
Наконец, каждая команда поддерживается одновременно, что похоже на:
Окончательный эффект css выглядит следующим образом:
В чем разница между Sass и SCSS?
SCSS — это новая грамматика, представленная Sass 3. Его грамматика полностью совместима с CSS3 и наследует мощные функции Sass. Sass и SCSS — это на самом деле одно и то же. Обычно мы называем это Sass. Различия между ними следующие:
-
Расширения файлов разные, Sass использует суффикс «.sass» в качестве расширения, а SCSS использует суффикс «.scss» в качестве расширения.
-
Грамматика написана по-разному. Sass написан по строгим правилам грамматики с отступом, без фигурных скобок ({}) и точек с запятой (;). Написание грамматики в SCSS очень похоже на написание грамматики в CSS.
Давайте сначала посмотрим на пример:
Синтаксис Sass:
Синтаксис SCSS:
Скомпилированный CSS
Поскольку SCSS является расширением CSS, все коды, которые нормально работают в CSS, могут также нормально работать в SCSS. Другими словами, пользователю Sass нужно только понимать, как работают расширения Sass, чтобы полностью понять SCSS. Большинство расширений, таких как переменные, родительские ссылки и директивы, согласованы; единственное отличие состоит в том, что SCSS требует использования точек с запятой и фигурных скобок вместо разрывов строк и отступов. Например, следующий простой код Sass:
Просто добавьте фигурные скобки и точки с запятой для преобразования в синтаксис SCSS:
Кроме того, SCSS нечувствителен к пустым символам. Приведенный выше код также можно записать следующим образом:
SassScript
SassScript позволяет значително расширить возможности Sass за счет использования пользовательских переменых, арифметических и прочих функций. SassScript может быть использован для автоматической генерации новых селекторов и свойств.
2.1 Переменные в Sass
Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.
| Sass | CSS — готовый результат |
$accent: #FF9910 .button background-color: $accent color: #fff |
.button {
background-color: #FF9910;
color: #fff;
}
|
2.2 Операции с числами и строками + интерполяция
Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения (<, >, <=, >=, ==, !=) также поддерживаются для чисел.
Кроме того, в Sass есть возможность конкатенировать (соединять) строки.
| Sass | CSS — готовый результат |
$summ: 10 + math.div(20, 2)
$cn: content
.selector
margin:
top: $summ + px
bottom: 12px + 8px
background-color: trans + parent
#{$cn}: "con" + "tent"
|
.selector {
margin-top: 20px;
margin-bottom: 20px;
background-color: transparent;
content: "content";
}
|
Как видим из примера $summ: 10 + math.div(20, 2), соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике
Обратите внимание, что при сложении 12px + 8px, мы получим 20px
Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке. Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:
Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:
| Sass | CSS — готовый результат |
$in: интер
.interpol
content: "#{$in}поляция"
|
.interpol {
content: "интерполяция";
}
|
2.3 Операции с цветами
Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.
| Sass | CSS — готовый результат |
$color1: color.mix(#440203, #550506) $color2: color.mix(rgba(180, 0, 0, .75), rgba(20, 255, 0, .75)) body background-color: $color1 color: $color2 |
body {
background-color: #990709;
color: #020406;
border-color: rgba(200, 255, 0, 0.75);
}
|
| Sass | CSS — готовый результат |
$translucent-red: rgba(255, 0, 0, 0.5); p color: opacify($translucent-red, 0.3) background-color: transparentize($translucent-red, 0.25) .selector background-color: rgba(#333, 0.75) |
p {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25);
}
.selector {
background-color: rgba(51, 51, 51, 0.75);
}
|
Какой смысл использования препроцессоров?
Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.
Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня
Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными
CSS — это сложно
Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.
Доступная документация
Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.
Простота использования
Использовать препроцессоры стало проще, чем раньше, причём намного проще. Для этого нужно лишь установить программу, которая будет следить за файлами, предназначенными для препроцессора, и при их изменении будет компилировать содержимое этих файлов в чистый CSS-код.
Для более продвинутых пользователей есть специальные сборщики проектов. Не думайте, что если вы используете программу для препроцессоров, а не сборщик проектов, то вы недостаточно круты. На самом деле, такие сборщики предлагают полный контроль и расширенные настройки, а не делают из вас джедая.
Структура и логичность кода
Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:
Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.
Примеси
Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.
Модульность
Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.
При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.
Компиляция собственных файлов SCSS для вашего шаблона Joomla 4
Чтобы скомпилировать файлы scss для вашего собственного шаблона, вам нужно будет сделать копию напишите сценарий и настройте его в соответствии с вашей средой.
В качестве альтернативы вы можете использовать плагин компилятора SCSS, который автоматически компилирует ваши файлы при перезагрузке страницы. В каталоге расширений Joomla JED вы найдете плагин для этой целиː Joomlaǃ Extension Directory.
Больше альтернатив и инструментов вы можете найти на http://sass-lang.com/install
Компилятор SCSS, используемый для ядра Joomla 4.x, является node-sass. В ядре Joomla вы можете найти его в каталоге .
Расширения или Миксины? permalinkРасширения или Миксины?
Расширения и примеси — это способы инкапсуляции и повторного использования стилей в Sass, что, естественно, поднимает вопрос о том, когда какой из них использовать. Миксины, очевидно, необходимы, когда вам нужно настроить стили с помощью , но что, если они всего лишь фрагменты стилей?
Как показывает опыт, расширения — лучший вариант, когда вы выражаете отношения между семантическими классами (или другими семантическими селекторами). Поскольку элемент с классом является ошибкой, для него имеет смысл расширить . Но для несемантических коллекций стилей написание миксина может избежать каскадных головных болей и упростить настройку в дальнейшем.
Интересный факт:
Большинство веб-серверов сжимают обслуживаемый ими CSS, используя алгоритм, который очень хорошо обрабатывает повторяющиеся фрагменты идентичного текста. Это означает, что, хотя миксины могут создавать больше CSS, чем расширять, они, вероятно, не существенно увеличат объем, необходимый вашим пользователям для загрузки. Так что выбирайте ту функцию, которая больше всего подходит для вашего варианта использования, а не ту, которая генерирует меньше всего CSS!
Зачем такие сложности в разработке проекта?
Архитектура проекта — это всегда компромисс между производительностью и абстрагированием, пространством и памятью. Так же обстоит дело и в случае с использованием SASS. Да, в процессе разработки проекта вы добавляете дополнительный шаг, но при этом выигрываете в масштабируемости и легкости в сопровождении.
SASS — замечательный способ написания более чистого и масштабируемого кода. Этот процесс облегчают правила, которые метаязык вводит в добавление к уже существующим правилам CSS.
Благодаря возможности иметь вложенную структуру, переменные, функции, импорт или даже операторы, SASS открывает совершенно новую главу в разработке интерфейса в полном соответствии с принципами чистого кода.
Несмотря на то, что каждая функция SASS способна отразить несколько принципов чистого кода, достаточно будет демонстрации одной функции для каждого принципа.
Что такое Sass и LESS?
Синтаксически Awesome Stylesheets (Sass) и Leaner CSS (LESS) являются препроцессорами CSS. Это специальные расширения таблиц стилей, которые делают проектирование проще и эффективнее. И Sass, и LESS компилируются в таблицы стилей CSS, чтобы браузеры могли их читать, что является необходимым шагом, потому что современные браузеры не могут читать типы файлов .sass или .less.
Если вы планируете быть в мире веб-разработки, неплохо бы разбираться в одном из двух препроцессоров — или в обоих .
Когда дело доходит до этого, оба похожи. Они делают написание CSS более простым, более объектно-ориентированным и более приятным. Тем не менее, есть несколько ключевых отличий.
И Sass, и LESS используют специальные символы для назначения переменных. Таким образом, вам не нужно постоянно вводить спецификации; Вы можете просто ввести символ.
В Sass это знак доллара ($). В МЕНЬШЕ это символ at (@). Единственным недостатком LESS является то, что есть несколько существующих CSS-селекторов, которые уже используют @, так что это может немного усложнить кривую обучения.
У Sass и LESS есть расширения для интеграции миксинов (возможность хранить и обмениваться объявлениями CSS по всему сайту).
У Sass есть Compass, доступный для mixins, который включает в себя все опции, доступные с обновлениями для будущей поддержки.
У LESS есть Preboot.less, LESS Mixins, LESS Elements, gs и Frameless. Программная поддержка LESS более фрагментирована, чем Sass, что приводит к множеству различных вариантов расширений, которые могут работать не одинаково. Для вашего проекта вам могут потребоваться все перечисленные расширения, чтобы получить аналогичную производительность Compass.
И Sass, и LESS были протестированы на способность сообщать об ошибках в синтаксисе. У LESS есть более точные сообщения об ошибках в тестах, в которых сообщается правильное местоположение ошибки.
Нечто подобное может сэкономить немного времени, потея из-за опечатки.
Определение
CSS препроцессор (от англ. CSS preprocessor) — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.
Основная задача препроцессора — это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, и тем самым, ускорить разработку и поддержу стилей в проектах.
CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код.
При помощи препроцессоров вы можете писать код, который нацелен на:
- Читабельность для человека
- Структурированность и логичность
- Производительность
И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.
Установка SASS
Чтобы установить SASS, откройте командную строку и введите gem install sass, после этого вы должны получить сообщение об успешном окончании установки:
Подготовка необходимых файлов
Перед тем, как вплотную заняться копанием в недрах SASS, нам нужно подготовить некоторые необходимые файлы.
Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS, создайте HTML-файл, дав ему имя index.html.
Поместите в него следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Введение в SASS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header>
<h1>Простой Sass-документ</h1>
<h2>Статья для веб-дизайнеров и разработчиков</h2>
</header>
<div>
<p id="samplepara">Простой текстовый параграф</p>
<p>Еще один параграф с текстом</p>
</div>
<div>
<ul id="list1">
<li>1й элемент списка</li>
<li>2й элемент списка </li>
<li>3й элемент списка </li>
</ul>
</div>
<footer>
<h3>Это отличный футер!</h3>
</footer>
</div>
</body>
</html>
Теперь, для файла SASS, создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss.
Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:
Конвертация SASS-кода в CSS
Чтобы преобразовать код SASS в CSS, мы будем использовать команду –watch, которая выполнит компиляцию.
Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS-файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss, чтобы убедиться, что все работает.
Скопируйте и вставьте следующий SASS-код в файл stye.scss, созданный вами в папке SASS:
$myMargin: 0px auto;
$myColor: red;
$myWidth: 600px;
h1 {
color: $myColor;
$myMargin: $margin;
}
Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу cd «Desktop«:
Теперь, находясь в папке рабочего стола, введите sass –watch Sass:Sass:
Используя команду – watch, сконвертируем все .scss-файлы в папке SASS. Также, файлы будут просканированы на наличие в них изменений. Заметьте, что в команде два слова SASS, разделенные двоеточием.
Первое слово представляет текущее положение файла .scss, а второе – расположение выходного файла. Убедитесь, что вы подключили сконвертированный CSS-файл к вашей HTML-странице:
Использование переменных
Переменные SASS объявляются с предваряющим их название символом $ и записываются аналогично CSS-свойствам. С помощью SASS, вы можете определять переменные для таких стилей, как font size, margin, padding и так далее.
Использование переменных дает вам возможность повторного использования заданных ранее значений.
В SASS существует шесть разных типов переменных:
- Строковые (например, $myString: “здесь ваш текст”;);
- Числовые (например, $myNum: 10px;);
- Цветовые (например, $myColor: white;);
- Логические (например, $myBool: true;);
- Списковые (например, $myItemList: 1px solid red;);
- Тип null – значение отсутствует (например, $myVar: null;).
Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:
$myColor: #009a82;
$myString: "здесь ваш текст";
$myFontSize: 13px;
$myMargin: 0px auto;
$myWidth: 460px;
h1 {
color: $myColor;
margin: 0;
padding: 0;
}
#container {
width: $myWidth;
margin: $myMargin;
}
Запустив этот код в браузере, вы получите следующее:
Вложенность
SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.
В качестве примера, рассмотрим следующий код:
#container p {
font-family: Arial;
font-size: 13px;
}
#container h1 {
font-family: Tahoma;
font-size: 15px;
}
#container h2 {
font-family: Helvetica;
font-size: 14px;
}
Для SASS, код будет выглядеть следующим образом:
$myFontsize1: 13px;
$myFontsize2: 18px;
$myFontsize3: 25px;
$myWidth: 500px;
$myMargin: 0px auto;
#container {
width: $myWidth;
margin: $myMargin;
p {
font-family: Arial;
font-size: $myFontsize1;
}
h1 {
font-family: Tahoma;
font-size: $myFontsize3;
}
h2 {
font-family: Helvetica;
font-size: $myFontsize2;
}
}
Обратите внимание, что мы расположили все стили элементов под идентификатором container, вместо того, чтобы предварять этим id каждый из них. Если вы запустите этот код в браузере, то увидите следующую картину:
Если вы запустите этот код в браузере, то увидите следующую картину:
Миксины
Миксины — блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.
Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.
Примеры:
| Sass | CSS — готовый результат |
@mixin border($color) border: $color 1px solid p @include border(#333) @mixin transition($time) -webkit-transition: all $time ease; -moz-transition: all $time ease; -o-transition: all $time ease; transition: all $time ease; p @include transition(.25s) |
p {
border: #333 1px solid;
}
p {
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
|
Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, почитайте документацию, будет полезно.
Другие уроки по теме «Инструменты»
- Настройка VS Code для верстки
- Simple Starter — простой стартер для верстки. Верстаем просто!
- Windows 11: Делаем вкладки в проводнике. Настройка QTTabBar от А до Я
- Gulp include на стороне сервера Browsersync + Build
- OptimizedHTML 5: Важные обновления стартера для JS-разработки
- Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких
