Написание большого количества CSS-кода может быть очень утомительным, поэтому изучение SASS и LESS может сделать жизнь любого веб-разработчика и дизайнера ощутимо легче.
Для начинающего в целях обучения это очень даже полезно, однако со временем, ваши навыки будут улучшаться и придет необходимость в повышении производительности труда.
Вы удивитесь, когда узнаете, что есть способы писать CSS-код без множественных повторений одних и тех же свойств. В этой статье будет рассказано об одном из них.
Благодаря CSS-препроцессорам, стало возможным писать лаконичный CSS-код без постоянного повторения одних и тех же свойств.
К тому же, получившийся код отформатирован гораздо приятнее. Вы можете выполнять вычисления и создавать динамические стили, используя один из таких методов препроцессинга.
Доступны два основных варианта: SASS и LESS . В данной статье, я расскажу о SASS .
Недостатки CSS
Можно использовать только CSS, но при разработке больших многостраничных сайтов, у вас, скорее всего, появится желание получить от этой технологии возможности, которых она не имеет.
Давайте рассмотрим слабые места использования « чистого » CSS:
- Нет возможности наследования уже созданных стилевых правил;
- Нельзя создавать переменные, которые можно повторно использовать в таблице стилей;
- Вы не можете выполнять числовые вычисления.
Преимущества использования препроцессоров
Стандартный CSS не может дать вам ничего, кроме неудобств, в то время как использование методов препроцессинга может сохранить вам много времени и сил.
Взгляните теперь на список преимуществ использования препроцессоров:
- Они позволяют вам использовать переменные, которые могут быть повторно использованы внутри таблицы стилей;
- Более продуманный и функциональный синтаксис, который предоставляет дополнительные возможности, которых нет в « чистом » CSS;
- Скомпилированные CSS-файлы загружаются на рабочий веб-сервер.
Что такое SASS?
SASS расшифровывается как Syntactically Awesome Style Sheets – если переводить дословно, то это звучит как: « Синтаксически потрясающие таблицы стилей ».
Эта технология была придумана и воплощена Хэмптоном Катлином ( Hampton Catlin ). SASS манипулирует CSS-правилами, используя переменные, так называемые миксины ( mixins ), наследование и вложенность.
Исходные и скомпилированные файлы имеют расширения .sass и .scss , соответственно. Исходники переводятся в хорошо отформатированный CSS-код с помощью командной строки или веб-плагина.
SASS упрощает написание CSS-кода и позволяет динамически им манипулировать. Это отличный способ создания более функциональных CSS-кодов, который позволяет ускорить выполнение ежедневной работы веб-разработчиков и дизайнеров.
Формат .sass против .scss
Перед началом рассказа о том, как использовать SASS , сравним форматы расширений .sass и .scss , генерируемых SASS . Для начала я представлю вам простой CSS-код, а затем покажу, как его упростить с помощью обоих расширений SASS .
CSS-код
Для исходного примера я использовал тег header и присвоил нулевое значение свойствам margin и padding , а затем прописал белый цвет для свойства color :
Формат .scss (новый синтаксис SASS)
Чтобы написать приведенный выше пример в формате .scss , мы будем использовать переменную $color и дадим ей шестнадцатеричное значение: #fff , которое соответствует белому цвету.
Далее, вместо того, чтобы по правилам CSS присвоить свойству color значение #fff , мы используем переменную $color , которую определим в начале кода:
Формат .sass (старый синтаксис SASS)
Для .sass мы имеем такую же переменную и значение, как и для .scss , но точки с запятой и фигурные скобки не используются.
Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS :
Вот что вам понадобится для успешного завершения практики по данной статье:
- Инсталлятор Ruby;
- Текстовый редактор;
- Время и терпение.
Установка Ruby
Чтобы опробовать SASS , вам нужно скачать Ruby . Запустите программу установки и, выбрав в появившемся окне подходящий язык интерфейса, нажмите OK :
Затем поставьте отметку о том, что вы согласны с условиями лицензии и нажмите « Далее ».
После этого, произведите установку в желаемое место на жестком диске и убедитесь, что выбрана радио-кнопка « Add Ruby executables to your PATH ». Нажмите кнопку « Install » и установка завершена:
Проверка правильности запуска Ruby
Теперь, у вас на компьютере установлен Ruby и пришло время проверить его работоспособность. Откройте командную строку и введите ruby -v .
Команда должна возвратить текущую версию и дату установленного Ruby. Если возвращена ошибка, то значит Ruby был установлен некорректно, либо переменные окружения Ruby не были зарегистрированы:
Установка SASS
Чтобы установить SASS , откройте командную строку и введите gem install sass , после этого вы должны получить сообщение об успешном окончании установки:
Подготовка необходимых файлов
Перед тем, как вплотную заняться копанием в недрах SASS , нам нужно подготовить некоторые необходимые файлы.
Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS , создайте HTML-файл, дав ему имя index.html .
Поместите в него следующий код:
Теперь, для файла SASS , создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss .
Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:
Конвертация SASS-кода в CSS
Чтобы преобразовать код SASS в CSS, мы будем использовать команду – watch , которая выполнит компиляцию.
Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS -файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss , чтобы убедиться, что все работает.
Скопируйте и вставьте следующий SASS -код в файл stye.scss , созданный вами в папке SASS :
Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу 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 sol >Тип null – значение отсутствует (например, $myVar: null;).
Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:
Запустив этот код в браузере, вы получите следующее:
Вложенность
SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.
В качестве примера, рассмотрим следующий код:
Для SASS , код будет выглядеть следующим образом:
Обратите внимание, что мы расположили все стили элементов под идентификатором container , вместо того, чтобы предварять этим id каждый из них.
Если вы запустите этот код в браузере, то увидите следующую картину:
Миксины (Mixins)
Миксины позволяют вам определять общие свойства, а затем использовать их повторно, то есть это реализация наследования. Миксины определяются с помощью директивы @mixin и включают в себя блок кода, который затем можно использовать с помощью директивы @include .
Давайте попрактикуемся. Скопируйте приведенный ниже код в свой файл style.scss :
Как вы можете видеть, мы использовали директиву @mixins , чтобы создать стиль для свойства border , а затем включили его в стиль идентификатора container с помощью директивы @include .
Если вы запустите данный код в браузере, то увидите следующее:
Операторы
Возможность выполнения математических операций, это одно из преимуществ препроцессоров наподобие SASS , которым не обладает « чистый » CSS. Благодаря этой возможности, вы можете создавать более сложный и динамичный код.
Давайте посмотрим, как это работает. Откройте свой файл style.scss и вставьте в него код, представленный ниже:
Как видите, мы выполнили некоторые математические вычисления, добавив 30px к значению свойства padding , а также увеличили толщину border на 5px.
Если вы запустите этот пример в браузере, то увидите следующую картину:
Функции
SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.
Взгляните на их список ниже:
- darken(color, amount);
- lighten(color, amount);
- saturate(color, amount);
- desaturate(color, amount);
- alpha(color).
Для того чтобы подробно изучить, как работать с функциями, обратитесь к документации SASS .
А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.
Откройте свой файл style.scss и вставьте туда следующий код:
Результатом этого примера будет затемнение цвета в переменной $myBackground на 20% с помощью соответствующей функции. Далее, в этом же примере, заголовки H1 и H2 осветляются на 40% соответствующей функцией.
После запуска данного примера в браузере вы увидите примерно следующую картину:
Настройка форматирования скомпилированных стилей в 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-файле отсутствуют пробелы и вообще какое-либо форматирование, чем и достигается сжатие:
Заключение
SASS предоставляет множество путей упрощения работы с привычной всем технологией CSS. Это позволяет ощутимо уменьшить повторяемость кода с помощью переменных.
SASS это очень мощный инструмент, который поможет вам увеличить свою производительность, будь вы веб-дизайнер или веб-программист. Изучайте SASS прямо сейчас и открывайте для себя его потенциал.
Это поможет вам очень быстро создавать профессиональные сайты. Надеюсь, статья была вам полезна!
Данная публикация представляет собой перевод статьи « Learning SASS: A Beginner’s Guide to SASS » , подготовленной дружной командой проекта Интернет-технологии.ру
| LESS | |
|---|---|
| Класс языка | Язык описания стилей[d] , свободное программное обеспечение и препроцессор |
| Появился в | 2009 |
| Автор | Alexis Sellier |
| Разработчик | Alexis Sellier, Дмитрий Фадеев |
| Выпуск |
|
| Система типов | динамическая |
| Испытал влияние | CSS, Sass |
| Повлиял на | Sass, Less Framework |
| Лицензия | Apache License 2 |
| Сайт | lesscss.org |
| ОС | кроссплатформенность |
LESS (Leaner Style Sheets, компактная таблица стилей)— это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS [1] .
LESS — это продукт с открытым исходным кодом. Его первая версия была написана на Ruby, однако в последующих версиях было решено отказаться от использования этого языка программирования в пользу JavaScript. Less — это вложенный метаязык: валидный CSS будет валидной less-программой с аналогичной семантикой.
LESS обеспечивает следующие расширения CSS: переменные, вложенные блоки, миксины, операторы и функции [2] .
LESS может работать на стороне клиента (Internet Explorer 6+, WebKit, Firefox) или на стороне сервера под управлением Node.js или Rhino [2] .
Содержание
Переменные [ править | править код ]
Less позволяет использовать переменные. Имя переменной предваряется символом @. В качестве знака присваивания используется двоеточие (:).
При трансляции значение переменной подставляется в результирующий CSS документ [2] .
Данный LESS-код будет скомпилирован в следующий CSS-файл:
Примеси [ править | править код ]
Примеси позволяют включать целый набор свойств из одного набора правил в другой путём включения имени класса в качестве одного из свойств другого класса. Такое поведение можно рассматривать как разновидность констант или переменных. Они также могут вести себя подобно функциям, принимая аргументы. В чистом CSS повторяющийся код должен быть повторён в нескольких местах — примеси делают код чище, понятнее и упрощают его изменение [2] .
Данный LESS-код будет скомпилирован в следующий CSS-файл:
Вложенные правила [ править | править код ]
LESS даёт возможность вкладывать определения вместо либо вместе с каскадированием. Пусть, например, у нас есть такой CSS: CSS поддерживает логическое каскадирование, но один блок кода в другой вложен быть не может. Less позволяет вложить один селектор в другой. Это делает наследование более ясным и укорачивает таблицы стилей [2] .
Данный LESS-код будет скомпилирован в следующий CSS-файл:
Функции и операции [ править | править код ]
Less позволяет использовать операции и функции. Благодаря операциям можно складывать, вычитать, делить и умножать значения свойств и цветов, что можно использовать для создания сложных отношений между свойствами. Функции один-к-одному отображаются в JavaScript код, позволяя обрабатывать значения.
Данный LESS-код будет скомпилирован в следующий CSS-файл:
Сравнение с другими препроцессорами CSS [ править | править код ]
И Sass, и LESS — это препроцессоры CSS, позволяющие писать ясный CSS с использованием программных конструкций вместо статических правил [3] .
LESS вдохновлен Sass [4] . Sass был спроектирован с целью как упростить, так и расширить CSS, в первых версиях фигурные скобки были исключены из синтаксиса (этот синтаксис называется sass). LESS разработан с целью быть как можно ближе к CSS, поэтому у них идентичный синтаксис. В результате существующие CSS можно использовать в качестве LESS кода. Новые версии Sass также включают CSS-подобный синтаксис, который называется SCSS (Sassy CSS) [1] .
Подробное сравнение синтаксиса см. «Sass/Less Comparison» [5] .
ZUSS (ZK User-interface Style Sheet) [6] это язык стилей, основанный на идеях LESS. Он имеет аналогичный синтаксис, за исключением того, что предназначен для использования на стороне сервера вместе с языком программирования Java. Он не использует интерпретатор JavaScript (Rhino), но позволяет напрямую вызывать Java методы.
Использование [ править | править код ]
LESS можно использовать на сайте различными способами. Один из вариантов — подключение к веб-странице JavaScript-файла less.js с его официального сайта lesscss.org для преобразования кода в CSS «на лету», средствами браузера.
Это делается, например, с помощью следующего html-кода:
Если вы используете серверный JavaScript: Rhino или node.js, вы можете преобразовывать .less файлы в .css на стороне сервера.
Наконец существуют сторонние реализации языка: к примеру SimpLESS open source компилятор для Windows, Linux и Mac OS X [7] , .less<> — реализация для .NET framework [8] или lessphp [9] , позволяющий компилировать less-стили на стороне сервера для PHP-сайтов.
Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.
Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.
Содержание статьи
Зачем использовать Sass/SCSS вместо CSS?
- Вложенность — SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
- Переменные — в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
- Улучшенные математические операции— можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
- Тригонометрия — SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
- Директивы @for , @while и выражение @if-else — можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь — в итоге на выходе будет обычный CSS.
- Миксины (примеси) — можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
- Функции— можно создавать определения CSS в виде функций для многократного использования.
Препроцессор Sass
Sass не динамичен. У вас не получится генерировать и/или анимировать CSS-свойства и значения в реальном времени. Но можно их создавать более эффективным способом и позволить стандартным свойствам (вроде анимации на CSS) заимствовать их оттуда.
Синтаксис
SCSS особо не добавляет никаких новых возможностей CSS, кроме нового синтаксиса, часто сокращающего время написания кода.
Пререквизиты
Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.
Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).
SASS — (.sass) Syntactically Awesome Style Sheets.
Level.Travel, Москва, до 200 000 ₽
SCSS — (.scss) Sassy Cascading Style Sheets.
Расширения .sass и .scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:
Sass — первая спецификация для SCSS с расширением файла .sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением .scss .
Обратите внимание Другие препроцессоры функциональностью похожи на SCSS, но синтаксис может отличаться. А ещё, всё то, что работает в CSS, будет также прекрасно воспроизводиться и в Sass, и в SCSS.
Переменные
Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире ( — ), а в препроцессорах знаком доллара ( $ ).
Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку !default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.
Переменные в Sass могут быть присвоены любому свойству.
Вложенные правила
Стандартные вложенные CSS-элементы с использованием пробела:
Те же вложенные элементы с помощью SCSS:
Как видно, синтаксис выглядит более чистым и менее повторяющимся.
Это особенно полезно при управлении перегруженными макетами. Таким образом, выравнивание, в котором вложенные свойства записаны в коде, полностью соответствует действительной структуре макета приложения.
За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.
Амперсанд
В SCSS используется директива & .
С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.
Результат компиляции Sass (из предыдущего примера) в CSS ниже.
В итоге амперсанд был компилирован в название родительского элемента a ( a:hover ).
Миксины (они же примеси)
Миксины объявляются директивой @mixin . После неё должно стоять имя миксина и, опционально, его параметры, а также блок, содержащий тело миксина. Например, можно определить миксин flexible() , который далее будет включён, например, в класс .centered-elements следующим образом:
Теперь каждый раз после применения класса .centered-elements к HTML-элементу, последний будет преобразован во Flexbox.
Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд ( & ), вы ведь помните про него?
Пример работы с несколькими браузерами
Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов( -webkit- или -moz- ).
Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:
Арифметические операции
Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em ).
Сложение и вычитание
Всегда обращайте внимание на тип складываемых данных. То есть пиксели к пикселям, слоны к слонам. Таким же образом работает вычитание, но со знаком минус.
Умножение
Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел ( 5*6 == 5 * 6 ).
Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .
Деление
С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.
Есть три помощника, которые намекнут на возможность деления:
- Значение (или любая его часть) хранится в переменной или возвращается функцией.
- Значения заключены в круглые скобки.
- Значение используется как часть другого арифметического выражения.
Результат компиляции в CSS:
Остаток
Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.
Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.
Для создания образца надо написать несколько HTML-элементов.
Результат в браузере:
Зебра успешно сгенерирована миксином zebra
Операторы сравнения
Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .
Ниже показано, как работают директивы @if и @else , вложенные в миксин.
Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .
После компиляции в CSS:
Логические операторы
Описание логических операторов
Использование логических операторов Sass для создания кнопки, у которой будет меняться фон в зависимости от её ширины.
Строки
В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.
В некоторых случаях можно добавить строки в допустимые значения CSS без кавычек, но только если добавленная строка является завершающим элементом.
Пример ниже демонстрирует, как делать не надо.
Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован.
Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:
Пример сложения нескольких строк:
Сложение строк и чисел:
Обратите внимание Свойство content работает только с псевдоселекторами :before и :after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.
Операторы управления потоками
В SCSS есть функции ( fucntion() ) и директивы ( @directive ). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.
Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .
Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.
if() — это функция (и иногда основа искусственного интеллекта).
Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.
@if — это директива, использующаяся для разветвления на основе условия.
Ниже показано комбо-разветвление с добавлением директивы @else .
Проверка на наличие родительского элемента
Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .
В следующих примерах рассмотрим создание условных CSS-стилей в зависимости от наличия родительского элемента.
Директива @for
Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.
Директива @for итерируется 5 раз.
Результат компиляции в CSS:
Директива @each
Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .
Результат компиляции в CSS:
Директива @while
Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:
Функции в Sass/SCSS
Используя Sass/SCSS можно использовать функции так же, как и в других языках.
Создадим функцию three-hundred-px() , возвращающую 300px.
После применения класса .name ширина элемента будет равна 300 пикселям.
Результат в браузере:
Функции в Sass могут возвращать любое корректное значение CSS и могут быть назначены любому свойству. Они даже могут быть рассчитаны на основе переданного аргумента.
Тригонометрия
Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.
Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера. Мы, кстати, уже говорили об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.
Ниже рассмотрим пару примеров для создания интересных анимационных эффектов с помощью функции sin() , в которых количество кода сведено к минимуму. Далее можете масштабировать эти знания на создание интерактивных элементов пользовательского интерфейса (движение по кругу, волнистая анимация).
Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.
Можно писать тригонометрические функции на Sass. Об этом читайте далее.
Написание собственных функций
В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .
Написание функций на Sass/SCSS очень похоже на написание функций в других языках.
Использование функции pow() :
Использование функции rad() :
Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() .
Заключение
Как видите, CSS уже достаточно эволюционировал, чтобы порой заменять JavaScript. Это упрощает работу и экономит время. Кстати, загляните в одну из наших статей, в которой описаны возможности современного CSS.
