0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Важным оружием препроцессора SASS являются миксины. Также они ещё называются примеси. Это повторяющиеся участки кода, которые можно включать в различные селекторы. Звучит как шаблонные селекторы, правда? В своём базовом виде всё так и есть, но миксины имеют куда больше возможностей.</p>
1
<p>Важным оружием препроцессора SASS являются миксины. Также они ещё называются примеси. Это повторяющиеся участки кода, которые можно включать в различные селекторы. Звучит как шаблонные селекторы, правда? В своём базовом виде всё так и есть, но миксины имеют куда больше возможностей.</p>
2
<p>Для начала разберёмся с переиспользованием стилей. Создадим базовый миксин сброса стилей.</p>
2
<p>Для начала разберёмся с переиспользованием стилей. Создадим базовый миксин сброса стилей.</p>
3
<p>Чтобы создать миксин, необходимо указать ключевое слово<strong>@mixin</strong>и дать ему уникальное имя. Внутри этого миксина просто записываются все необходимые правила.</p>
3
<p>Чтобы создать миксин, необходимо указать ключевое слово<strong>@mixin</strong>и дать ему уникальное имя. Внутри этого миксина просто записываются все необходимые правила.</p>
4
<p>Для включения миксина в селектор используется ключевое слово<strong>@include</strong>после чего указывается имя миксина, который мы хотим подключить. Для примера сбросим отступы в маркированном списке.</p>
4
<p>Для включения миксина в селектор используется ключевое слово<strong>@include</strong>после чего указывается имя миксина, который мы хотим подключить. Для примера сбросим отступы в маркированном списке.</p>
5
<p>После компиляции мы получим следующий CSS-код:</p>
5
<p>После компиляции мы получим следующий CSS-код:</p>
6
<p>Миксины также возможно включать друг в друга, что позволяет на основе имеющегося миксина делать новый.</p>
6
<p>Миксины также возможно включать друг в друга, что позволяет на основе имеющегося миксина делать новый.</p>
7
<p>Обратите внимание, что внутри миксина<em>horizontal-menu</em>мы подключили два вышестоящих миксина и потом использовали его для стилизации нашего меню. Все стили из миксинов<em>flex-between</em>и<em>reset</em>окажутся внутри миксина<em>horizontal-menu</em>. Конечный CSS-код будет выглядеть следующим образом:</p>
7
<p>Обратите внимание, что внутри миксина<em>horizontal-menu</em>мы подключили два вышестоящих миксина и потом использовали его для стилизации нашего меню. Все стили из миксинов<em>flex-between</em>и<em>reset</em>окажутся внутри миксина<em>horizontal-menu</em>. Конечный CSS-код будет выглядеть следующим образом:</p>
8
<p>Препроцессор работает последовательно, поэтому порядок включения миксинов может иметь значение в некоторых случаях. Не забывайте следить за этим. А также не забывайте следить за уровнем вложенности миксинов. Хоть SASS и позволяет включать миксины друг в друга, но не советую делать это на большой глубине. Чем больше уровней включений миксинов, тем меньше контроля мы имеем за стилями. Миксины в первую очередь предназначены для облегчения написания повторного CSS-кода. Если вы чувствуете, что у вас появилась глубокая вложенность, то остановитесь, выдохните и подумайте - возможно некоторые стили стоит использовать без миксинов.</p>
8
<p>Препроцессор работает последовательно, поэтому порядок включения миксинов может иметь значение в некоторых случаях. Не забывайте следить за этим. А также не забывайте следить за уровнем вложенности миксинов. Хоть SASS и позволяет включать миксины друг в друга, но не советую делать это на большой глубине. Чем больше уровней включений миксинов, тем меньше контроля мы имеем за стилями. Миксины в первую очередь предназначены для облегчения написания повторного CSS-кода. Если вы чувствуете, что у вас появилась глубокая вложенность, то остановитесь, выдохните и подумайте - возможно некоторые стили стоит использовать без миксинов.</p>
9
<p>Миксины часто используются для свойств, которым необходима поддержка в старых браузерах. Для таких свойств указываются вендорные префиксы. Если мы используем свойство<em>box-shadow</em>и нам необходима поддержка старых браузеров, таких как Firefox 3.5, Chrome 9, Safari 4.3, то мы должны использовать вендорные префиксы<em>-moz-</em>и<em>-webkit-</em>. Для такого кода мы можем использовать миксины.</p>
9
<p>Миксины часто используются для свойств, которым необходима поддержка в старых браузерах. Для таких свойств указываются вендорные префиксы. Если мы используем свойство<em>box-shadow</em>и нам необходима поддержка старых браузеров, таких как Firefox 3.5, Chrome 9, Safari 4.3, то мы должны использовать вендорные префиксы<em>-moz-</em>и<em>-webkit-</em>. Для такого кода мы можем использовать миксины.</p>
10
10