Основы Sass
Прежде, чем Вы сможете использовать Sass, Вам необходимо его настроить в вашем проекте. Если Вы хотите просто почитать, то не стесняйтесь — читайте, но мы рекомендуем сначала установить Sass. Установите Sass для того, чтобы разобраться во всех возможностях Sass.
Препроцессинг
Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS , например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.
Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS -файл, который Вы сможете использовать на любом сайте.
Самый простой способ получить такой результат — использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS , используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .
Также, вы можете следить за изменениями только определенных файлов или папок, используя флаг —watch . Данный флаг сообщает Sass, что необходимо следить за изменениями указанных файлов и при наличии таковых производить перекомпиляцию CSS после сохранения файлов. Если вы хотите отслеживать изменения (вместо ручной перекомпиляции) вашего файла, например, input.scss , то вам необходимо просто добавить флаг в команду:
sass –watch input.scss output.css
Вы также можете указать папки для отслеживания изменений и куда сохранять компилированные CSS файлы, для этого достаточно указать пути и разделить их двоеточием, например:
Sass будет отслеживать все файлы в директории app/sass и компилировать CSS в директорию public/stylesheets .
Переменные
Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS , которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $ . Рассмотрим пример:
SCSS Syntax
Sass Syntax
CSS Output
Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS -файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.
Вложенности
При написании HTML , Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.
Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.
Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:
SCSS Syntax
Sass Syntax
CSS Output
Вы заметили, что селекторы ul , li , и a являются вложенными в селектор nav ? Это отличный способ сделать ваш CSS -файл более читабельным. Когда вы сгенерируете CSS -файл, то на выходе вы получите что-то вроде этого:
Фрагментирование
Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS , которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss . Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import .
Импорт
CSS имеет возможность импорта, которая позволяет разделить ваш CSS -файл на более мелкие и облегчить @import , то в CSS создается еще один HTTP -запрос. Sass берет идею импорта файлов через директиву @import , но вместо создания отдельного HTTP -запроса Sass импортирует указанный в директиве файл в тот, где он вызывается, т.е. на выходе получается один CSS -файл, скомпилированный из нескольких фрагментов.
Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss . И мы хотим импортировать _reset.scss в base.scss .
SCSS Syntax
Sass Syntax
CSS Output
Обратите внимание на то, что мы используем @import 'reset'; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss . Sass — умный язык и он сам догадается.
Миксины (примеси)
Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3 , где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS , которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform :
SCSS Syntax
Sass Syntax
CSS Output
To create a mixin you use the @mixin directive and give it a name. We've named our mixin transform . We're also using the variable $property 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
Sass Syntax
CSS Output
Вышеуказанный код сообщает классам .message , .success , .error и .warning вести себя как %message-shared . Это означает, что где бы не вызывался %message-shared , то и .message , .success , .error и .warning тоже будут вызваны. Магия происходит в сгенерированном CSS , где каждый из этих классов получает css-свойства, как и %message-shared . Это позволит вам избежать написания множества классов в HTML элементах.
Вы можете расширить большинство простых CSS селекторов прибавление к классам-шаблонам в Sass, однако, использование шаблонов — простейший способ быть уверенным, что вы не расширяете класс везде, где он используется в ваших стилях, что могло бы привести к непреднамеренным наборам стилей в вашем CSS.
Когда вы генерируете ваш CSS , то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS , так как ни разу не был использован.
Математические операторы
Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как + , — , * , / и % . В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article .
SCSS Syntax
Sass Syntax
CSS Output
Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:
- Текущие версии:
- Dart Sass 1.20.1
- LibSass 3.5.5
- Ruby Sass  ⚰
Sass © 2006–2018 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, Jina Anne, и многочисленные участники. Доступно для использования и изменения по лицензии MIT.
Sass @mixin и @include
Директива @mixin позволяет создавать CSS-код, который будет повторно использоваться на всем веб-сайте.
Директива @include создана, чтобы вы могли использовать (включать) миксин.
Определение миксина
Миксин определяется с помощью директивы @mixin .
Sass @mixin Синтаксис:
В следующем примере создается миксин с именем "important-text":
Примечание: Замечание по дефисам и подчеркиванию в Sass: дефисы и подчеркивания считаются одинаковыми. Это означает, что @mixin important-text < >и @mixin important_text < >считаются одним и тем же миксином!
Использование миксина
Директива @include используется для включения миксина.
Sass @include Синтаксис миксина:
Т.о., чтобы включить миксин с важным текстом, созданный выше:
Транспиллер Sass преобразует вышеуказанное в обычный CSS:
Миксин также может включать другие миксины:
Передача переменных в миксин
Миксины принимают аргументы. Таким образом вы можете передавать переменные в миксин.
Вот как определить миксин с аргументами:
/* Определите миксин с двумя аргументами */
@mixin bordered($color, $width) <
border: $width solid $color;
>
.myArticle <
@include bordered(blue, 1px); // Вызов миксина с двумя значениями
>
.myNotes <
@include bordered(red, 2px); // Вызов миксина с двумя значениями
>
Обратите внимание, что аргументы задаются как переменные, а затем используются как значения (цвет и ширина) свойства границы.
После компиляции CSS будет выглядеть так:
.myArticle <
border: 1px solid blue;
>
.myNotes <
border: 2px solid red;
>
Значения по умолчанию для миксина
Также возможно определить значения по умолчанию для переменных миксина:
Затем вам нужно только указать значения, которые изменяются при включении миксина:
Использование миксина для префиксов поставщиков
Еще одно хорошее использование миксина — префиксы поставщиков.
Вот пример преобразования:
@mixin transform($property) <
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
>
.myBox <
@include transform(rotate(20deg));
>
После компиляции CSS будет выглядеть так:
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Миксины — SASS: Основы
Важным оружием препроцессора SASS являются миксины. Также они ещё называются примеси. Это повторяющиеся участки кода, которые можно включать в различные селекторы. Звучит как шаблонные селекторы, правда? В своём базовом виде всё так и есть, но миксины имеют куда больше возможностей.
Для начала разберёмся с переиспользованием стилей. Создадим базовый миксин сброса стилей.
Чтобы создать миксин, необходимо указать ключевое слово @mixin и дать ему уникальное имя. Внутри этого миксина просто записываются все необходимые правила.
Для включения миксина в селектор используется ключевое слово @include после чего указывается имя миксина, который мы хотим подключить. Для примера сбросим отступы в маркированном списке.
После компиляции мы получим следующий CSS-код:
Миксины также возможно включать друг в друга, что позволяет на основе имеющегося миксина делать новый.
Обратите внимание, что внутри миксина horizontal-menu мы подключили два вышестоящих миксина и потом использовали его для стилизации нашего меню. Все стили из миксинов flex-between и reset окажутся внутри миксина horizontal-menu. Конечный CSS-код будет выглядеть следующим образом:
Препроцессор работает последовательно, поэтому порядок включения миксинов может иметь значение в некоторых случаях. Не забывайте следить за этим. А также не забывайте следить за уровнем вложенности миксинов. Хоть SASS и позволяет включать миксины друг в друга, но не советую делать это на большой глубине. Чем больше уровней включений миксинов, тем меньше контроля мы имеем за стилями. Миксины в первую очередь предназначены для облегчения написания повторного CSS-кода. Если вы чувствуете, что у вас появилась глубокая вложенность, то остановитесь, выдохните и подумайте — возможно некоторые стили стоит использовать без миксинов.
Миксины часто используются для свойств, которым необходима поддержка в старых браузерах. Для таких свойств указываются вендорные префиксы. Если мы используем свойство box-shadow и нам необходима поддержка старых браузеров, таких как Firefox 3.5, Chrome 9, Safari 4.3, то мы должны использовать вендорные префиксы -moz- и -webkit-. Для такого кода мы можем использовать миксины.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.