Основы 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 --watch app/sass:public/stylesheets Sass будет отслеживать все файлы в директории app/sass и компилировать CSS в директорию public/stylesheets .
Переменные
Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS , которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $ . Рассмотрим пример:
SCSS Syntax
$font-stack: Helvetica, sans-serif; $primary-color: #333; body font: 100% $font-stack; color: $primary-color; > Sass Syntax
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color CSS Output
body font: 100% Helvetica, sans-serif; color: #333; > Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS -файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.
Вложенности
При написании HTML , Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.
Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.
Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:
SCSS Syntax
nav ul margin: 0; padding: 0; list-style: none; > li display: inline-block; > a display: block; padding: 6px 12px; text-decoration: none; > > Sass Syntax
nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none CSS Output
nav ul margin: 0; padding: 0; list-style: none; > nav li display: inline-block; > nav a display: block; padding: 6px 12px; text-decoration: none; > Вы заметили, что селекторы 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
// _reset.scss html, body, ul, ol margin: 0; padding: 0; > // base.scss @import 'reset'; body font: 100% Helvetica, sans-serif; background-color: #efefef; > Sass Syntax
// _reset.sass html, body, ul, ol margin: 0 padding: 0 // base.sass @import reset body font: 100% Helvetica, sans-serif background-color: #efefef CSS Output
html, body, ul, ol margin: 0; padding: 0; > body font: 100% Helvetica, sans-serif; background-color: #efefef; > Обратите внимание на то, что мы используем @import ‘reset’; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss . Sass — умный язык и он сам догадается.
Миксины (примеси)
Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3 , где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS , которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform :
SCSS Syntax
@mixin transform($property) -webkit-transform: $property; -ms-transform: $property; transform: $property; > .box @include transform(rotate(30deg)); > Sass Syntax
=transform($property) -webkit-transform: $property -ms-transform: $property transform: $property .box +transform(rotate(30deg)) CSS Output
.box -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); > 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 inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.
Расширение/Наследование
Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами. Класс-шаблон — особый тип классов, который выводится только при использовании расширения — это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.
SCSS Syntax
/* This CSS will print because %message-shared is extended. */ %message-shared border: 1px solid #ccc; padding: 10px; color: #333; > // This CSS won't print because %equal-heights is never extended. %equal-heights display: flex; flex-wrap: wrap; > .message @extend %message-shared; > .success @extend %message-shared; border-color: green; > .error @extend %message-shared; border-color: red; > .warning @extend %message-shared; border-color: yellow; > Sass Syntax
/* This CSS will print because %message-shared is extended. */ %message-shared border: 1px solid #ccc padding: 10px color: #333 // This CSS won't print because %equal-heights is never extended. %equal-heights display: flex flex-wrap: wrap .message @extend %message-shared .success @extend %message-shared border-color: green .error @extend %message-shared border-color: red .warning @extend %message-shared border-color: yellow CSS Output
.message, .success, .error, .warning border: 1px solid #ccc; padding: 10px; color: #333; > .success border-color: green; > .error border-color: red; > .warning border-color: yellow; > Вышеуказанный код сообщает классам .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
.container width: 100%; > article[role="main"] float: left; width: 600px / 960px * 100%; > aside[role="complementary"] float: right; width: 300px / 960px * 100%; > Sass Syntax
.container width: 100% article[role="main"] float: left width: 600px / 960px * 100% aside[role="complementary"] float: right width: 300px / 960px * 100% CSS Output
.container width: 100%; > article[role="main"] float: left; width: 62.5%; > aside[role="complementary"] float: right; width: 31.25%; > Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:
Sass © 2006–2018 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, Jina Anne, и многочисленные участники. Доступно для использования и изменения по лицензии MIT.
Уроки SASS / SCSS
Препроцессор SASS / Урок #1 — Что такое SASS, SCSS. Установка
SASS или же SCSS это препроцессор, который служит для быстрого написания CSS стилей. Благодаря SASS вы можете добавить переменные, функции, наследование и многое другое к обычному документу CSS.
Видеоурок
Полезные ссылки:
- Курс по языку CSS ;
- Официальный сайт SASS ;
- Редактор Atom .
Что такое SASS?
SASS — это препроцессор, позволяющий писать код для стилей CSS, используя всевозможные: переменные, циклы, миксины, функции и многое другое.
Прежде чем изучать SASS стоит изучить CSS, так как без знаний второго вы не сможете ощутить полезность данной технологии. Курс по изучению CSS вы можете посмотреть здесь .
Препроцессор построен на языке Ruby , поэтому для его работы необходимо скачать Ruby и далее использовать терминал или командную строку для превращения SASS в CSS. Сам язык Ruby при этом знать не обязательно, но если вы хотите его изучить, то это можно сделать здесь .
Браузеры не воспринимают файлы, написанные на SASS, они не могут прочитать код внутри них и не могут понять что необходимо сделать. Из-за этого, весь SASS необходимо конвертировать в привычные CSS файлы.
В чём отличия между SASS и SCSS?
Многие слышали про SASS и SCSS и думают что это разные технологии. На самом деле, обе технологии являются один и тем же и отличаются лишь синтаксисом написания.
На официальном сайте SASS приведен пример с использованием обеих препроцессоров.
Ниже приведён пример кода на SASS:
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-colorНиже пример кода на SСSS:
$font-stack: Helvetica, sans-serif; $primary-color: #333; body
Как видите, оба препроцессора отличаются лишь синтаксисом. В SASS все вложенные свойства выделяются отступами, при чем очень важно соблюдать отступы и их количество. SCSS более приближен к обычному CSS и все вложенные стили записываются через фигурные скобки — <> .
В ходе курса мы будем использовать SCSS, так как синтаксис с фигурными скобками более привычен. В случае если вы хотите использовать SASS, то все возможности будут такими же, измениться лишь синтаксис написания кода.
Онлайн редактор кода
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Что такое Sass
Sass – это своего рода расширение, созданное для упрощения каскадных таблиц стилей (CSS). Все те, кто начинает заниматься разработкой и администрированием сайтов, первым делом сталкиваются с такими понятиями, как HTML и CSS, и только спустя время, получив опыт в создании таблиц стилей, начинают понимать, чем же так хорош и удобен язык Sass.
Сегодня я расскажу о преимуществах этого языка и способах применения, но для начала разберемся с основами HTML и CSS.
Для чего нужен HTML
HTML (или HyperText Markup Language) – это стандартизированный язык разметки документов в интернете. Вопреки расхожему заблуждению, HTML – это не язык программирования. Он используется для того, чтобы все элементы на странице (тексты, рисунки, таблицы…) были расположены правильно; за его чтение отвечают специальные программы, которые всем знакомы – браузеры (веб-обозреватели).
HTML использует для разметки документов теги – именно они определяют, как и где элемент будет отображаться на странице. Теги бывают парными (
.
) и одиночными (,
).
В самом базовом виде структура документа выглядит вот так:
html> head> meta charset="utf-8" /> title>HTML Documenttitle> head> body> p> Hello world p> body> html>
Теперь перейдем к CSS.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
За что отвечает CSS
CSS (или Cascading Style Sheets) – это формальный язык, который определяет внешний вид документа, написанного с использованием HTML.
Разница между HTML и CSS заключается в том, что HTML отвечает за структуру документа, а CSS – за оформление и форматирование.
Естественно, HTML тоже имеет возможность задавать стиль страницы, но с появлением CSS разработчики смогли:
- управлять внешним видом разных страниц, используя одну таблицу стилей;
- иметь более точный контроль отображения страницы для пользователей.
Часто свойства совпадают в HTML и CSS. Цвет фона можно задать в HTML:
body
В общем виде структура CSS такая:
Познакомившись с основами, перейдем к главной теме статьи.
Так для чего же нужен Sass?
Sass (или Syntactically Awesome Stylesheets) – это скриптовый метаязык (т.е. язык, описывающий другой язык), разработанный для упрощения файлов CSS. Этот модуль входит в Haml (HTML abstraction markup language), который используется для упрощения HTML.
Как Haml компилируется в HTML, так и Sass компилируется в обычные CSS-стили.
Выпуск Sass состоялся в ноябре 2006 года, актуальная стабильная на момент написания статьи версия – 3.5.6 от 23 марта 2018 года.
В зависимости от выбранного синтаксиса Sass-файлы могут иметь расширения:
- .sass — известный как синтаксис с отступами, через которые реализованы вложенные элементы; фигурных скобок нет;
- .scss — Sassy CSS, где используются фигурные скобки.
Так как Haml был написан Ruby-разработчиками, то и Sass унаследовал Ruby-подобный синтаксис, который значительно отличается от CSS. Поэтому в 2010 году был презентован синтаксис SCSS, который приблизил синтаксис Sass к CSS и сделал его более совместимым.
Каждый из этих синтаксисов имеет свои особенности и преимущества.
Синтаксис Sass
Этот синтаксис короче, в нем отсутствуют скобки и точки с запятой, поэтому набирать его проще.
Отступы имеют логическое значение, поэтому крайне важно следить за ними – неправильный отступ может сломать таблицу стилей. Отступ у блока селектора определяет вложенный селектор. Если случайно сместить элемент вправо, он внезапно может оказаться дочерним элементом другого элемента, что сильно изменит результат.
Такой синтаксис определенно понравится тем, кто в разработке использует Ruby или Python.
Синтаксис SCSS
Синтаксис полностью совместим с CSS, поэтому нет необходимости изучать его отдельно, ведь это просто CSS с дополнениями.
Синтаксис SCSS – это более читаемый код, в котором проще разобраться. Поэтому все больше разработчиков выбирают именно его. На нем разрабатываются инструменты и плагины для Sass.
В целом, использовать синтаксис SCSS более удобно, чем Sass, поэтому тем, кто не может сделать выбор, следует присмотреться именно к SCSS.
Основные преимущества Sass
Использование Sass дает ряд преимуществ, которые значительно экономят время и силы.
Использование переменных
Sass дает возможность назначать переменные. Их доступность определяет уровень вложенности селекторов. Если они определяются вне вложенного селектора, то доступны глобально.
Переменные удобно использовать, если одно значение применяется несколько раз. В этом случае при помощи переменной все необходимые значения можно задать в начале кода и далее просто ссылаться на них. И если будет необходимо изменить значение переменной, то оно изменится и во всех остальных местах, где она проставлена.
В коде ниже задана переменная $width:
#main $width: 6em !global; width: $width; > #sidebar width: $width; >
А после компиляции код будет выглядеть вот так:
#main width: 6em; > #sidebar width: 6em; >
Вложенные правила
Sass дает возможность вкладывать правила CSS друг в друга. Благодаря этому становится намного проще редактировать стили.
Вложенные правила нужны не только для минимизации кода, но и для структурирования кода (наподобие HTML).
Использование дополнений
Дополнения позволяют следовать прекрасному правилу DRY: Don’t Repeat Yourself. Вместо того чтобы копировать и множить куски одинакового кода, Sass предлагает сохранить его в переменную, а затем использовать там, где это необходимо. При компиляции переменная будет преобразована в нужную часть кода.
Наследование
Sass дает возможность создать правило, а затем использовать его внутри другого. При этом все свойства класса будут переданы наследуемому элементу.
Заключение
Sass – это полезный инструмент, который значительно упрощает работу с CSS. В нем легко разобраться, поэтому время, потраченное на освоение, наверняка окупится при разработке веб-сайта.
Основы Sass
Прежде чем вы сможете использовать Sass, вам необходимо настроить его в своем проекте. Если вы хотите просто просмотреть здесь, продолжайте, но мы рекомендуем сначала установить Sass. [Перейти сюда]Go here, если вы хотите узнать, как все настроить.
Препроцессинг
CSS сам по себе может быть интересен, но таблицы стилей становятся все больше, сложнее и труднее поддерживать. Именно здесь может помочь препроцессор. В Sass есть функции, которых еще нет в CSS , такие как вложенность, миксины, наследование и другие полезные вещи, которые помогут вам написать надежный и удобный CSS.
Как только вы начнете возиться с Sass, он возьмет ваш предварительно обработанный файл Sass и сохранит его как обычный файл CSS , который вы можете использовать на своем веб-сайте.
Самый простой способ сделать это — в вашем терминале. После установки Sass вы можете скомпилировать свой Sass в CSS с помощью команды sass . Вам нужно будет указать Sass, из какого файла строить и куда выводить CSS. Например, запуск sass input.scss output.css из вашего терминала потребует одного файла Sass, input.scss , и скомпилирует этот файл в output.css .
Вы также можете просматривать отдельные файлы или каталоги с флагом —watch . Флаг просмотра указывает Sass следить за вашими исходными файлами на предмет изменений и повторно компилировать CSS каждый раз, когда вы сохраняете свой Sass. Если вы хотите просмотреть (а не вручную создавать) файл input.scss , вы просто добавите флаг просмотра в свою команду, например:
sass --watch input.scss output.css Вы можете просматривать и выводить в каталоги, используя пути к папкам в качестве ввода и вывода и разделяя их двоеточием. В этом примере:
sass --watch app/sass:public/stylesheets Sass будет отслеживать все файлы в папке app/sass на предмет изменений и компилировать CSS в папку public/stylesheets .
Переменные
Думайте о переменных как о способе хранения информации, которую вы хотите повторно использовать в своей таблице стилей. Вы можете хранить такие вещи, как цвета, стеки шрифтов или любое значение CSS , которое, по вашему мнению, вы захотите использовать повторно. Sass использует символ $ для преобразования чего-либо в переменную. Вот пример:
SCSS Syntax
$font-stack: Helvetica, sans-serif; $primary-color: #333; body font: 100% $font-stack; color: $primary-color; > Sass Syntax
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color CSS Output
body font: 100% Helvetica, sans-serif; color: #333; > Когда Sass обрабатывается, он принимает переменные, которые мы определяем для $font-stack и $primary-color , и выводит обычный CSS с нашими значениями переменных, помещенными в CSS. Это может быть чрезвычайно эффективным при работе с фирменными цветами и поддержании их единообразия на всем сайте.
Вложенность
При написании HTML вы, вероятно, заметили, что он имеет четкую вложенную и визуальную иерархию. CSS , с другой стороны, этого не делает.
Sass позволит вам вложить ваши CSS -селекторы таким образом, чтобы они следовали той же визуальной иерархии вашего HTML. Имейте в виду, что чрезмерно вложенные правила приведут к чрезмерно квалифицированному CSS , который может оказаться трудным в обслуживании и обычно считается плохой практикой.
Имея это в виду, вот пример некоторых типичных стилей для навигации по сайту:
SCSS Syntax
nav ul margin: 0; padding: 0; list-style: none; > li display: inline-block; > a display: block; padding: 6px 12px; text-decoration: none; > > Sass Syntax
nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none CSS Output
nav ul margin: 0; padding: 0; list-style: none; > nav li display: inline-block; > nav a display: block; padding: 6px 12px; text-decoration: none; > Вы заметите, что селекторы ul , li и a вложены в селектор nav . Это отличный способ организовать ваш CSS и сделать его более читабельным.
Составляющие
Вы можете создавать частичные файлы Sass, содержащие небольшие фрагменты CSS , которые можно включать в другие файлы Sass. Это отличный способ модулировать ваш CSS и облегчить его поддержку. Частичный файл — это Sass-файл, названный с подчеркиванием. Вы можете назвать его, например, _partial.scss . Подчеркивание дает Sass знать, что файл является только частичным и что его не следует генерировать в файл CSS. Частичные файлы Sass используются с помощью правила @use .
Модули
Совместимость:
Dart Sass since 1.23.0
В настоящее время только Dart Sass поддерживает @use . Пользователи других реализаций должны использовать правило @import rule вместо этого.
Вам не нужно записывать весь свой Sass в один файл. Вы можете разделить его, как хотите, с помощью правила @use . Это правило загружает другой файл Sass как модуль, что означает, что вы можете ссылаться на его переменные, миксины и функции в вашем файле Sass с пространством имен на основе имени файла. Использование файла также будет включать созданный им CSS в ваш скомпилированный вывод!
SCSS Syntax
// _base.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body font: 100% $font-stack; color: $primary-color; > // styles.scss @use 'base'; .inverse background-color: base.$primary-color; color: white; > Sass Syntax
// _base.sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color // styles.sass @use 'base' .inverse background-color: base.$primary-color color: white CSS Output
body font: 100% Helvetica, sans-serif; color: #333; > .inverse background-color: #333; color: white; > Обратите внимание, что мы используем @use ‘base’; в файле styles.scss . Когда вы используете файл, вам не нужно указывать расширение файла. Sass умен и разберется за вас.
Примеси (Миксины)
Некоторые вещи в CSS писать немного утомительно, особенно с CSS3 и множеством существующих префиксов поставщиков. Миксин позволяет вам создавать группы объявлений CSS , которые вы хотите повторно использовать на своем сайте. Это помогает сохранить ваш Sass очень СУХИМ. Вы даже можете передавать значения, чтобы сделать ваш миксин более гибким. Вот пример для theme .
SCSS Syntax
@mixin theme($theme: DarkGray) background: $theme; box-shadow: 0 0 1px rgba($theme, .25); color: #fff; > .info @include theme; > .alert @include theme($theme: DarkRed); > .success @include theme($theme: DarkGreen); > Sass Syntax
@mixin theme($theme: DarkGray) background: $theme box-shadow: 0 0 1px rgba($theme, .25) color: #fff .info @include theme .alert @include theme($theme: DarkRed) .success @include theme($theme: DarkGreen) CSS Output
.info background: DarkGray; box-shadow: 0 0 1px rgba(169, 169, 169, 0.25); color: #fff; > .alert background: DarkRed; box-shadow: 0 0 1px rgba(139, 0, 0, 0.25); color: #fff; > .success background: DarkGreen; box-shadow: 0 0 1px rgba(0, 100, 0, 0.25); color: #fff; > Чтобы создать миксин, вы используете директиву @mixin и даете ему имя. Мы назвали наш миксин theme . Мы также используем переменную $theme внутри круглых скобок, так что мы можем передать theme , какую захотим. После того, как вы создадите свой миксин, вы можете использовать его как объявление CSS , начиная с @include , за которым следует имя миксина.
Расширение/Наследование
Использование @extend позволяет передавать набор свойств CSS от одного селектора к другому. В нашем примере мы собираемся создать простую серию сообщений об ошибках, предупреждениях и успехах, используя другую функцию, которая идет рука об руку с расширенными классами-заполнителями. Класс-заполнитель — это особый тип класса, который печатает только при расширении и может помочь сохранить ваш скомпилированный CSS аккуратным и чистым.
SCSS Syntax
/* Этот CSS будет выведен, потому что %message-shared расширен. */ %message-shared border: 1px solid #ccc; padding: 10px; color: #333; > // Этот CSS не будет выводиться, потому что %equal-heights никогда не расширяется. %equal-heights display: flex; flex-wrap: wrap; > .message @extend %message-shared; > .success @extend %message-shared; border-color: green; > .error @extend %message-shared; border-color: red; > .warning @extend %message-shared; border-color: yellow; > Sass Syntax
/* Этот CSS будет выведен, потому что %message-shared расширен. */ %message-shared border: 1px solid #ccc padding: 10px color: #333 // Этот CSS не будет выводиться, потому что %equal-heights никогда не расширяется. %equal-heights display: flex flex-wrap: wrap .message @extend %message-shared .success @extend %message-shared border-color: green .error @extend %message-shared border-color: red .warning @extend %message-shared border-color: yellow CSS Output
@charset "UTF-8"; /* Этот CSS будет выведен, потому что %message-shared расширен. */ .message, .success, .error, .warning border: 1px solid #ccc; padding: 10px; color: #333; > .success border-color: green; > .error border-color: red; > .warning border-color: yellow; > Приведенный выше код сообщает .message , .success , .error и .warning вести себя так же, как %message-shared . Это означает, что везде, где появляется %message-shared shows up, .message , .success , .error и .warning тоже будут. Магия происходит в сгенерированном CSS , где каждый из этих классов получит те же свойства CSS , что и %message-shared . Это поможет вам избежать написания нескольких имен классов в элементах HTML.
Вы можете расширить большинство простых селекторов CSS в дополнение к классам-заполнителям в Sass, но использование заполнителей — это самый простой способ убедиться, что вы не расширяете класс, вложенный где-то еще в ваших стилях, что может привести к непреднамеренным селекторам в вашем CSS.
Обратите внимание, что %equal-heights не создается, потому что %equal-heights никогда не расширяется.
Операторы
Выполнение математических расчетов в вашем CSS очень полезно. В Sass есть несколько стандартных математических операторов, таких как + , — , * , math.div() и % . В нашем примере мы собираемся выполнить простую математику, чтобы вычислить ширину article и aside .
SCSS Syntax
@use "sass:math"; .container display: flex; > article[role="main"] width: math.div(600px, 960px) * 100%; > aside[role="complementary"] width: math.div(300px, 960px) * 100%; margin-left: auto; > Sass Syntax
@use "sass:math" .container display: flex article[role="main"] width: math.div(600px, 960px) * 100% aside[role="complementary"] width: math.div(300px, 960px) * 100% margin-left: auto CSS Output
.container display: flex; > article[role="main"] width: 62.5%; > aside[role="complementary"] width: 31.25%; margin-left: auto; > Мы создали очень простую плавную сетку на основе 960 пикселей. Операции в Sass позволяют нам делать что-то вроде того, чтобы брать значения пикселей и без особых проблем преобразовывать их в проценты.
- Текущие релизы:
- Dart Sass1.49.0
- LibSass3.6.5
- Ruby Sass ⚰
- Руководство по внедрению
Sass © 2006–2022 команда Sass и многочисленные участники. Он доступен для использования и модификации по лицензии MIT .