SASS для Начинающих: Вложенные стили, Фрагменты, Импорт
Объедините возможности программирования с гибкостью
Если вы занимаетесь разработкой каскадных таблиц стилей, то Sass может существенно упростить этот процесс. Sass – это язык и препроцессор каскадных таблиц стилей, добавляющий в CSS традиционные атрибуты программирования. В Sass реализован ряд возможностей программирования, включая переменные, логическую вложенность стилей, миксины, аргументы и наследование. Если вы создаете таблицы стилей для вашего Web-сайта, то Sass может сильно облегчить вам жизнь за счет получения стандартной разметки CSS путем преобразования кода Sass.
Из этой статьи вы узнаете о ключевых принципах Sass. Статья содержит практические примеры, демонстрирующие, как можно упростить и ускорить разработку CSS при помощи Sass.
Синтаксис Sassy CSS (SCSS) является расширением CSS3; любой код SCSS является работоспособным кодом CSS. Все примеры этой статьи написаны на SCSS.
Почему Sass
Синтаксис Sass
- SCSS – наиболее распространенный синтаксис, являющийся расширением синтаксиса CSS.
- .sass – старый синтаксис, в котором вложенные элементы реализованы с помощью отступов.
Sass – это надежное, конфигурируемое и функциональное решение для разработки CSS. Вместо устаревших статических правил CSS в нем используется принцип динамической генерации структур. Если вы хотите придерживаться своего привычного стиля программирования и иметь доступ к структурам языка программирования, то Sass является наилучшим выбором.
CSS-препроцессоры обладают всеми функциями, необходимыми для любой среды Web-разработки. Они позволяют:
- Сократить время разработки.
- Реализовать принцип DRY (Don"t Repeat Yourself – не повторяйся) при разработке CSS.
- Сделать ваш код более чистым и понятным.
Существует множество технологий предварительной обработки CSS. В этой статье мы остановили свой выбор на Sass из-за его гибкости и широты возможностей.
Инсталляция Sass
Основная реализация Sass выполнена на Ruby, хотя существуют и другие реализации. Первый шаг заключается в инсталляции Sass через его компоненты Ruby.
- Загрузите и инсталлируйте Ruby, если он еще не установлен в вашей системе.
- Для пользователей Windows: загрузите установщик Ruby для Windows (EN).
- Для пользователей Mac OS X: Ruby уже установлен в вашей операционной системе.
- Для пользователей Linux: установите Ruby с помощью любого менеджера пакетов.
- Инсталлируйте gem-пакет Ruby Sass при помощи команды gem install sass .
Подготовка рабочей среды Sass
Создайте файл с расширением.scss в любом текстовом редакторе. Поддержка синтаксиса Sass (выделение цветом различных фрагментов кода) различна в разных текстовых редакторах; список редакторов вы найдете в разделе .
Скопируйте код из листинга 1 и вставьте его в созданный scss-файл.
Листинг 1. Пример кода Sass
#blueBar { position: relative; height: 37px; left: 0; right: 0; top: 0; }Язык Sass является расширением CSS3. В Sass версии 3.2.1 любой рабочий код CSS является также рабочим кодом Sass. Пример такого кода приведен в листинге 1. Тем не менее, код Sass из листинга 1 необходимо преобразовать в CSS, иначе Web-браузеры не смогут корректно воспринимать таблицу стилей. Вместо того чтобы постоянно преобразовывать Sass в CSS вручную с помощью команды sass-convert , мы настроим Sass на автоматическую конвертацию sass-файла в CSS при его сохранении. Для того чтобы Sass постоянно отслеживал нужный файл, выполните в командной строке команду из листинга 2.
Листинг 2. Отслеживание файла
sass --watch style.scss:style.cssМожно также настроить Sass на отслеживание всей директории, как показано в листинге 3.
Листинг 3. Отслеживание директории
sass --watch stylesheets/sass:stylesheets/compiledТеперь Sass будет автоматически конвертировать ваш код в рабочий код CSS при сохранении sass-файла, и мы можем приступать к работе.
Переменные
Переменные – это ключевая функциональность, которая отсутствует в CSS. В таблицах стилей используется очень много повторений, поэтому очень полезно иметь возможность задать определенное значение один раз и потом ссылаться на него. Предположим, что у вас имеется таблица стилей, похожая на таблицу из листинга 4.
Листинг 4. Определение цвета элементов в CSS
#someElement { color: #541B32; } #anotherElement { color: #541B32; } #yetAnotherElement { color: #541B32; }Стандартная разметка CSS требует явного указания всех значений, что приводит к повторениям в листинге 4. С помощью Sass можно использовать более эффективный способ, как показано в листинге 5.
Листинг 5. Листинг 5. Определение цвета элементов в Sass
$purplishColor: #541B32; #someElement { color: $purplishColor; } #anotherElement { color: $purplishColor; } #yetAnotherElement { color: $purplishColor; }Преимущество очевидно. Теперь можно изменять цвет всех элементов в одном месте. Листинг 5 содержит переменную $purplishColor , значение которой можно изменить в Sass-файле в любой момент. Переменные Sass не имеют типов; одной и той же переменной можно присваивать строковые и целочисленные значения и даже коды цветов.
Модули
Код CSS можно с легкостью разбить на отдельные модули, которые механизм Sass соберет воедино. При помощи директивы @import можно импортировать модули, как показано в листинге 6. В директиве необходимо указать имя файла, гиперссылку или любой другой путь. В одном документе можно одновременно объединять файлы CSS и SCSS.
Листинг 6. Импорт модулей в Sass
@import "colors.scss" @import "links.scss"Подходы к разделению кода на модули в CSS и Sass существенно различаются. Когда вы разбиваете CSS-код на более мелкие таблицы стилей, то для загрузки каждой из таблиц требуется выполнить отдельный HTTP-запрос. В Sass директива @import загружает код модуля немедленно, поэтому в итоге всегда получается один CSS-файл.
Строки и подстановка
В Sass поддерживаются объединение строк и подстановка переменных. Вместо того чтобы использовать переменные только для присвоения значений свойствам, можно также непосредственно вставлять их значения в имена свойств и селекторов, как показано в листинге 7.
Листинг 7. Действия со строками и переменными в Sass
$image_dir: "images/web/"; $page: 10; .button { background-image: url($image_dir + "image.gif"); :before { content: "Page #{ $page }"; } }В листинге 8 представлен код из листинга 7, сконвертированный в CSS.
Листинг 8. Действия со строками и переменными в CSS
.button { background-image: url("images/web/image.gif"); } .button:before { content: "Page 10"; }Математические вычисления
В Sass поддерживаются стандартные математические операции с числами, как показано в листинге 9. Можно выполнять простые математические операции со значениями переменных.
Листинг 9. Математические операции с числами в Sass
.block { $block_width: 500px; width: $block_width - (10px * 2) - (1px * 2); }В листинге 10 представлен код из листинга 9, сконвертированный в CSS..
Листинг 10. Математические операции с числами в CSS
.block { width: 478px; }Также поддерживаются математические операции с кодами цветов, как показано в листинге 11.
Листинг 11. Математические операции с кодами цветов в Sass
.block { $color: #010203; color: $color; border-color: $color - #010101; }В листинге 12 представлен код из листинга 11, сконвертированный в CSS.
Листинг 12. Математические операции с кодами цветов в CSS
.block { color: #010203; border-color: #000102; }Вложенные селекторы и свойства
Одной из наиболее востребованных возможностей, отсутствующих в CSS, являются вложенные селекторы (применение стиля к селектору внутри другого селектора). Чтобы создать вложенный селектор в CSS, необходимо повторно указывать родительский селектор для каждого определяемого дочернего селектора. В Sass процесс создания вложенных селекторов упрощен, как видно из листинга 13.
Листинг 13. Вложенные селекторы в Sass
#some { border: 1px solid red; .some { background: white; } }В листинге 14 представлен код из листинга 13, сконвертированный в CSS.
Листинг 14. Вложенные селекторы в CSS
#some { border: 1px solid red; } #some .some { background: white; }Управляющие директивы
Управляющие директивы Sass выстраивают потоки данных и логику в коде CSS. В этом разделе мы рассмотрим основные управляющие директивы – @if, @for и @each.
@if
В Sass поддерживаются базовые функции if/else, которые могут быть скомпилированы в CSS. Рассмотрим листинг 15, где мы хотим сделать цвет link черным (black) во всех случаях, за исключением случаев, когда базовый цвет уже черный. Если базовый цвет уже черный, то мы меняем его на белый. Listing 15. Sass @if example
Листинг 15. Пример директивы @if в Sass
$color: black; .link { @if $color == black { color: white; } @else { color: black; } }В листинге 16 представлен код из листинга 15, сконвертированный в CSS.
Листинг 16. Пример директивы @if в CSS
.link { color: white; }Здесь директива @if работает так же, как и в других языках программирования. После оператора @if можно указать несколько операторов @else if и один оператор @else . Если условие @if не выполняется, то предпринимаются попытки поочередного выполнения операторов @else if до тех пор, пока один из них не завершится успехом или пока не будет достигнут блок оператора @else .
@for
Директива @for циклически генерирует набор стилей. В каждой итерации используется переменная-счетчик, как показано в листинге 17.
Листинг 17. Пример директивы @for в Sass
@for $i from 1 through 5 { .button-#{$i} { width: 1px * $i; } }В листинге 18 представлен код из листинга 17, сконвертированный в CSS.
Листинг 18. Пример директивы @for в CSS
.button-1 { width: 1px; } .button-2 { width: 2px; } .button-3 { width: 3px; } .button-4 { width: 4px; } .button-5 { width: 5px; }@each
Директива @each считывает элементы из указанного списка и генерирует стили с использованием их значений, как показано в листинге 19.
Листинг 19. Пример директивы @each в Sass
@each $company in IBM, Motorola, Google { .#{$company}-icon { background-image: url("/images/#{$company}.jpg"); } }В листинге 20 представлен код из листинга 19, сконвертированный в CSS.
Листинг 20. Пример директивы @each в CSS
.IBM-icon { background-image: url("/images/IBM.jpg"); } .Motorola-icon { background-image: url("/images/Motorola.jpg"); } .Google-icon { background-image: url("/images/Google.jpg"); }Функции
В Sass можно использовать функции. Подумайте над абстрагированием и разбиением методов на отдельные фрагменты кода, чтобы их можно было переносить и использовать в других проектах.
В Sass имеется множество встроенных функций. Например, функции управления цветом rgb() и darken() , представленные в листинге 21. При помощи этих функций можно изменять оттенок, насыщенность, яркость, прозрачность, масштаб плавности и многие другие свойства цвета. Также вы можете определить собственные функции и использовать их при необходимости.
Листинг 21. Функции в Sass
#someElement { color: rgb(150, 50, 100); } #someDarkYellowElement { color: darken(yellow, 33%); }В листинге 22 представлен код из листинга 21, сконвертированный в CSS.
Листинг 22. Функции в CSS
#someElement { color: #963264; } #someDarkYellowElement { color: #575700; }Также в Sass присутствуют математические функции, функции для работы со строками и списками, функции интроспекции и многие другие. Полный список функций вы найдете в разделе .
Миксины
Миксины (многократно используемые фрагменты CSS-кода) определяются с помощью директивы @mixin , как показано в листинге 23. В миксинах можно определять шаблоны пар "свойство-значение" и использовать их в других наборах правил. Использование миксинов упрощает код таблиц стилей и делает их удобнее для чтения. По существу, @mixin – это определяемая пользователем функция. Миксины также могут принимать аргументы – это означает, что с помощью небольшого количества миксинов можно создать множество стилей.
Листинг 23. Миксины в Sass
@mixin rounded-corners($radius: 5px) { border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; } #header { @include rounded-corners; } #footer { @include rounded-corners(10px); }В листинге 24 представлен код из листинга 23, сконвертированный в CSS.
Листинг 24. Миксины в CSS
#header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }Миксины похожи на функции и тоже могут работать с переменными. Отличие миксина от функции заключается в том, что функция всегда возвращает значение, а миксин – строки кода.
Compass
Compass – это Open Source-инфраструктура для разработки CSS, использующая язык Sass. Доступные для многократного использования шаблоны проектирования (на основе миксинов) позволяют создавать объемные и мощные таблицы стилей. Библиотека основных функций Compass является необходимым инструментом при разработке в Sass.
По существу, Compass является оберткой для CSS. Посредством CSS-спрайтов и ряда других технологий Compass берет на себя решение общих проблем CSS, таких как совместимость с браузерами, схемы и оптимизация таблиц стилей.
Так же как и Sass, Compass распространяется в виде gem-пакета Ruby. Для инсталляции Compass выполните в командной строке команду gem install compass .
После этого вы сможете использовать определенные в Compass миксины (функции), а также множество встроенных функций, классов и поддерживаемых возможностей CSS3. За дополнительной информацией о Compass обратитесь к разделу .
Заключение
В этой статье вы познакомились с несколькими концепциями, которые могут помочь вам в успешной реализации кода Sass на вашем Web-сайте. Вы узнали о переменных, подстановках, вложенности, функциях и некоторых директивах.
Sass не является единственным CSS-препроцессором. Его ближайший конкурент, LESS (см. раздел ), также пользуется определенной популярностью. По большому счету, различий между Sass и LESS не так уж много. Основным преимуществом Sass является Compass – расширение, которого нет у LESS. Важно поработать с как можно большим количеством CSS-препроцессоров, чтобы понять, какой из них лучше всего подходит для ваших задач.
С помощью Sass создаются синтаксически безупречные таблицы стилей (Syntactically Awesome Style sheets ), или, по крайней мере, предполагается, что он должен это делать.
При эффективном использовании Sass помогает задать масштабируемый и краткий CSS . При неправильном использовании Sass может реально увеличить размер файла и добавить ненужный или дублированный код.
Ниже приводится ряд полезных советов, которые помогут вам извлечь из Sass максимум пользы…
1. Структурируйте Sass
Изначальное определение правильной структуры сайта является жизненно важным для любого нового проекта на Sass . Использование частичных шаблонов позволяет разделить CSS на более мелкие и более управляемые блоки кода, которые намного легче разрабатывать и развивать.
Файлы частичных шаблонов создаются с помощью символов нижнего подчеркивания и не выносятся в отдельные CSS -файлы. Каждый частичный шаблон должен импортироваться с помощью основного Sass -файла (global.scss ), расположенного в корневой папке Sass .
Вот пример структуры папок, который иллюстрирует этот принцип:
vendor/ base/ | |-- _variables.scss |-- _mixins.scss |-- _placeholders.scss framework/ modules/ global.scss
Такая структура папок обеспечивает простую работу с ней сайта, а также добавление новых файлов. Например, новые модули могут быть легко добавлены в папку модуля и затем к global.scss с помощью @import .
Чтобы продемонстрировать это, ниже приводится пример файла global.scss :
/* VENDOR - Резервные и дополнительные файлы по умолчанию. ========================================================================== */ @import "vendor/_normalize.scss"; /* BASE - Файл базовых Переменных, содержащий также начальные Примеси и Заполнители. ========================================================================== */ @import "base/_variables.scss"; @import "base/_mixins.scss"; @import "base/_placeholders.scss"; /* FRAMEWORK - Структура файлов. ========================================================================== */ @import "framework/_grid.scss"; @import "framework/_breakpoints.scss"; @import "framework/_layout.scss"; /* MODULES - Многократно используемые элементы сайта. ========================================================================== */ @import "modules/_buttons.scss"; @import "modules/_lists.scss"; @import "modules/_tabs.scss";
2. Используйте переменные Sass более эффективно
Переменные являются одним из наиболее простых элементов Sass , но некоторые разработчики все еще время от времени используют их неправильно. Разработка конвенции о присвоении имен по всему сайту имеет важное значение для работы с переменными. Без нее они менее понятны и возможно их дублированное использование.
Вот некоторые советы по эффективному применению переменных:
- Назначайте переменным понятные имена;
- Применяйте и придерживайтесь конвенции назначения имен (Модульной, BEM и т.д .);
- Убедитесь, что использование переменной оправдано.
Вот несколько примеров эффективного использования:
$orange: #ffa600; $grey: #f3f3f3; $blue: #82d2e5; $link-primary: $orange; $link-secondary: $blue; $link-tertiary: $grey; $radius-button: 5px; $radius-tab: 5px; А вот это неэффективно: $link: #ffa600; $listStyle: none; $radius: 5px;
3. Используйте меньше примесей
Примесь — это отличный способ включить раздел кода несколько раз в пределах сайта. Тем не менее, включение примеси это то же самое, что копирование и вставка стилей в файл CSS . Это создает массу дубликатов кода и может привести раздуванию CSS -файла.
Поэтому примесь следует использовать только с аргументами для быстрого создания модифицированных стилей.
Вот пример:
@mixin rounded-corner($arc) { -moz-border-radius: $arc; -webkit-border-radius: $arc; border-radius: $arc; }
Примесь rounded-corner может быть использована в любой ситуации, для этого просто нужно изменить значение $arc, тогда ее стоит использовать:
Tab-button { @include rounded-corner(5px); } .cta-button { @include rounded-corner(8px); }
Пример неэффективного использования примеси может выглядеть вот так:
@mixin cta-button { padding: 10px; color: #fff; background-color: red; font-size: 14px; width: 150px; margin: 5px 0; text-align: center; display: block; }
Эта примесь не имеет аргументов и, следовательно, лучше применить заполнитель, что вплотную подводит нас к пункту 4 .
4. Включайте заполнители
В отличие от примесей, заполнители могут быть использованы несколько раз без добавления какого-либо повторяющегося кода. Это делает их гораздо более удобными для вывода чистого CSS :
%bg-image { width: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; } .image-one { @extend %bg-image; background-image:url(/img/image-one.jpg"); } .image-two { @extend %bg-image; background-image:url(/img/image-two.jpg"); }
И компилируемый CSS :
Image-one, .image-two { width: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; } .image-one { background-image:url(/img/image-one.jpg") ; } .image-two { background-image:url(/img/image-two.jpg") ; }
Повторяющийся код в заполнителях выводится только один раз и только для уникальных стилей, применяемых к отдельным селекторам. Если они не используются, стили заполнителей не выводятся вовсе.
Учитывая сказанное в пункте 3 , заполнители можно использовать наряду с примесями, что позволит уменьшить количество дублированного кода и в то же время сохранить гибкость, обеспечиваемую примесями…
/* ЗАПОЛНИТЕЛЬ ============================================= */ %btn { padding: 10px; color:#fff; curser: pointer; border: none; shadow: none; font-size: 14px; width: 150px; margin: 5px 0; text-align: center; display: block; } /* ПРИМЕСЬ КНОПКИ ============================================= */ @mixin btn-background($btn-background) { @extend %btn; background-color: $btn-background; &:hover { background-color: lighten($btn-background,10%); } } /* КНОПКИ ============================================= */ .cta-btn { @include btn-background(green); } .main-btn { @include btn-background(orange); } .info-btn { @include btn-background(blue); }
5. Используйте для вычислений функции
Функции используются для выполнения вычислений. Функция Sass не выводит CSS -код. Вместо этого, она возвращает значение, которое может использоваться в CSS . Это полезно для вычислений, результаты которых применяются по всему сайту.
Например, функции полезны для расчета ширины в процентах от конкретного элемента:
@function calculate-width ($col-span) { @return 100% / $col-span } .span-two { width: calculate-width(2); // spans 2 columns, width = 50% } .span-three { width: calculate-width(3); // spans 3 columns, width = 33.3% }
6. Поддерживайте порядок и хорошую организацию
Поместите все примеси, функции, заполнители и переменные в соответствующие им файлы частичных шаблонов. Хранение блоков кода в отдельных группах обеспечивает возможность легко редактировать их и повторно использовать в будущем.
Глобальные элементы должны храниться в базовой папке. Базовая папка должна содержать глобальные переменные, такие как шрифты и цветовые схемы:
$font-primary: "Roboto", sans-serif; $font-secondary: Arial, Helvetica, sans-serif; $color-primary: $orange; $color-secondary: $blue; $color-tertiary: $grey;
Относящиеся к конкретным модулям примеси, функции и переменные должны располагаться в файлах частичных шаблонов соответствующих модулей:
$tab-radius: 5px; $tab-color: $grey;
7. Ограничивайте количество вложений
Чрезмерное использование вложенных правил Sass может стать причиной различных проблем, от слишком большой сложности кода и до сверх специфичности и перекоса в сторону HTML -структуры страницы. Это может привести к дальнейшему увеличению количества проблем и необходимости включения !important , чего по возможности следует избегать.
Вот некоторые золотые правила для вложений:
- Никогда не разветвляйте структуру более 3 уровней вниз;
- Убедитесь, что CSS на выходе чист и пригоден для повторного использования;
- Используйте вложение, когда на то есть причины, а не в качестве опции по умолчанию.
8. Старайтесь делать все проще
В завершающем пункте этой статьи я бы отметила, что вы должны стараться, чтобы все элементы были настолько простыми, насколько это возможно. Цель Sass — написать более чистый, более управляемый CSS -код.
Перевод статьи:
The Absolute Beginner’s Guide to Sass.
Andrew Chalkley.
Что такое SASS?
SASS является аббревиатурой от Syntactically Awesome Stylesheets — метаязык на основе CSS, название которого можно перевести как «CSS c превосходным синтаксисом» , разработанный Хемптоном Кэтлином (Hampton Catlin).
Он является средством упрощения процесса формирования CSS стилей, позволяющим значительно облегчить задачу разработки и последующего обслуживания кода.
Приходилось ли вам, к примеру, когда-нибудь, угождая определенному нерешительному клиенту, заниматься просмотром всего содержимого файла стилей для того чтобы отыскать определенное HEX-значение цвета с целью его замены на другое? Или же обращаться к не всегда находящемуся под рукой приложению-калькулятору, чтобы просчитать ширину колонки для многоколоночного шаблона?
В распоряжении SASS имеются средства, которые избавят вас от подобной рутины. К ним можно отнести переменные , миксины , вложенность и наследование селекторов .
В принципе, код SASS похож на CSS, но основной отличительной чертой, которая сразу же бросается в глаза является отсутствие точки с запятой после каждой пары свойство-значение и фигурных скобок.
В качестве примера возьмем следующий фрагмент CSS кода:
#skyscraper_ad
{
display: block;
width: 120px;
height: 600px;
}
#leaderboard_ad
{
display: block;
width: 728px;
height: 90px;
}
Который эквивалентен вот такому SASS:
#skyscraper_ad
display: block
width: 120px
height: 600px
#leaderboard_ad
display: block
width: 728px
height: 90px
В SASS для обозначения вложенности фрагментов кода используется интервал (отступ в начале следующей строки) равный двум пробелам. (*В последнем сниппете для наглядности я выделил эти пробелы красным фоном. )
Теперь, имея представление о том, как создается SASS код, давайте рассмотрим те вопросы, которые делают его таким превосходным .
Переменные.
В SASS для объявления переменной необходимо перед ее именем использовать символ доллара $ . И если имя вашей переменной, допустим, red , то после двоеточия мы можем указать соответствующее ей вот такое значение:
В SASS предусмотрены встроенные функции типа darken и lighten , которые можно использовать для модифицирования значений подобного типа переменных.
Так, в следующем примере цвет шрифта в параграфах будет тоже красным, но темнее, чем используемый в h1 заголовках:
$red: #FF4848
$fontsize: 12px
h1
color: $red
p
color: darken($red, 10%)
С переменными вы можете производить арифметические действия, такие как сложение и вычитание, при условии, что используемые для этого значения имеют один и тот же тип данных. Если, к примеру, нам необходимо применить более темный оттенок, то все что нам нужно сделать, это вычесть из уже используемого в коде значения цвета, хранящегося в переменной, небольшое шестнадцатеричное HEX-значение, равное, скажем, #101 . Это же касается и случая, когда необходимо изменить значение размера шрифта, допустим, увеличить на 10 пикселей, для этого мы просто прибавляем недостающие пиксели:
p.addition_and_subtraction
color: $red — #101
font-size: $fontsize + 10px
Вложенность.
В SASS вложенность бывает двух типов.
Вложенность селекторов.
Это первый тип вложенности, который схож с тем, какой используется для структурирования HTML кода:
$fontsize: 12px
Speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize
Если вы взгляните на сгенерированный в результате CSS код, то какие-либо комментарии будут излишни. Путем вложенности класса .name в класс .speaker (*тем же способом — с помощью двух пробелов в начале следующей строки ) создается CSS селектор .speaker.name . Это же касается и следующего имени класса .position , расположенного после декларирования свойств для первого селектора, в результате вложенности которого образуется второй селектор .speaker.position :
Speaker.name {
font-weight: bold;
font-size: 22px; }
.speaker.position {
font-size: 12px; }
Вложенность свойств.
Второй тип вложенности позволяет структурировать свойства с одним префиксом (* font-family , font-size , font-weight или border-style , border-color , border-radius и т.д. ):
$fontsize: 12px
Speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize
В представленном выше примере мы используем объявление родительского, универсального свойства font: и далее на новой строке после двухпробельного отступа указываем вторую часть свойства, которая обычно находится после дефиса.
То есть если мы укажем свойство font: , на следующей строке после двух пробелов свойство weight: , то в результате это будет эквивалентно хорошо знакомому нам свойству font-weight .
Speaker.name {
font-weight: bold;
font-size: 22px; }
.speaker.position {
font-size: 12px; }
В модуле обеспечивается поддержка всех дефис-содержащих свойств.
Такого рода вложенность является замечательным способом организации и структурирования вашего CSS кода и позволяет избежать его нежелательного повторения. (*DRY — «Don’t Repeat Yourself» — «Не повторяйтесь». Ситуации, когда при CSS форматировании определенных элементов их стили повторяются и/или переопределяются в других местах, что усложняет читабельность и обслуживание кода ).
Миксины.
Еще одной прекрасной возможностью SASS являются миксины .
Миксины позволяют вам повторно использовать целые фрагменты SASS кода и при необходимости даже передавать им аргументы. И что немаловажно, вы также можете указывать их исходные значения.
Для того чтобы определить миксин используйте специально зарезервированное в SASS ключевое слово @mixin , а после него укажите выбранное вами имя миксина. Если есть необходимость в аргументах, то перечислите их в круглых скобках. Значения, устанавливаемые для аргумента по умолчанию, указываются при определении миксина через двоеточие. (*Другими словами, миксины представляют собой CSS функции. )
Процедура использования миксинов очень проста – после ключевого слова @include укажите имя нужного миксина и перечислите в скобках необходимые параметры, если таковые имеются.
Взгляните на следующий пример:
@mixin border-radius($amount: 5px) /* определяем миксин */
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount
h1 /* используем миксин */
@include border-radius(2px)
Speaker
@include border-radius
Этот SASS после компиляции будет преобразован в представленный ниже CSS код:
h1 {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2x; }
Speaker {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }
Для заголовка h1 мы явно указали значение радиуса закругления углов границы, но для элемента с именем класса .speaker мы этого не делали, поэтому было взято дефолтное значение 5px.
Наследование селекторов.
Другой превосходной особенностью SASS синтаксиса является способность селекторов наследовать все стили, определенные для других селекторов. Чтобы воспользоваться такой возможностью, необходимо использовать ключевое слово @extend , после которого указать селектор, все свойства которого вы хотите унаследовать:
h1
border: 4px solid #ff9aa9
Speaker
@extend h1
border-width: 2px
Что будет скомпилировано в:
h1,.speaker {
border: 4px solid #ff9aa9; }
Speaker {
border-width: 2px; }
(*Заметьте, декларация border: 4px solid #ff9aa9; не повторяется в рамках правила с селектором .speaker , а вместо этого к первому правилу добавляется второй селектор. Другими словами, дублирования кода нет. )
Попробуйте SASS в действии.
Онлайн.
Вы можете познакомиться с SASS онлайн без предварительной установки модуля на свой локальный компьютер.
Но до того, как вы начнете экспериментировать, в нижней области страницы выберите опцию «Indented Syntax» .
Установив на ПК.
Сам SASS является приложением (gem ) платформы Ruby. Поэтому для его установки без предварительной инсталляции самой платформы и менеджера пакетов этого языка программирования RubyGems не обойтись. После успешной установки самой платформы и менеджера выполните в консоли следующую команду:
gem install sass
SASS модуль может быть использован как инструмент конвертирования ваших SASS файлов в файлы CSS формата в режиме командной строки.
Это можно, к примеру, сделать, введя следующую команду:
sass --watch sass_folder:stylesheets_folder
Где sass_folder — это путь к папке, содержащей SASS файлы (то есть с расширением.sass), а stylesheets_folder — путь к папке, в которой будут сохраняться получающиеся после компиляции, результирующие CSS файлы. Команда --watch сообщает модулю, что он должен следить (watch ) за любыми изменениями в указанной папке и если таковые имеются, то после их сохранения конвертировать исходные.sass файлы в эквивалентные им.css файлы.
Обратное конвертирование CSS в SASS.
Вы можете начать использование SASS с того, что сконвертируете стили, используемые в своих уже функционирующих проектах в этот формат с помощью утилиты "sass-convert".
Для этого в командной строке ведите путь к папке, содержимое которой необходимо конвертировать (*то есть просто перейдите в нужную директорию, в которой находятся исходные файлы ). После чего запустите упомянутую выше утилиту и сообщите ей следующие параметры:
sass-convert --from css --to sass –R.
Где флаг -R задает рекурсивный способ выполнения операции. А следующая за ним точка . означает, что получаемые в результате конвертации.sass файлы будут сохранены в текущей директории. (*При необходимости вместо точки можно указать путь к папке, в которой нужно сохранить результирующие файлы. )
27.07.2017
Эта серия туториалов по SASS предназначена для начинающих и опытных разработчиков. Это первая из четырех частей обучающих статей, в которой вы познакомитесь с этим препроцессором, установите его и узнаете о некоторых функциях.
Что такое SASS?
SASS (Syntactically Awesome Style Sheets) - один из самых популярных . Он представляет собой набор функций для CSS, которые позволяют кодить быстрее и эффективнее. SASS поддерживает интеграцию с Firefox Firebug. SassScript позволяет создавать переменные, вложенные стили и наследуемые селекторы.
SASS позволяет быстро и просто писать меньше (иногда значительно меньше) CSS кода и динамично управлять им как языком программирования (кстати, это не язык программирования). Это отличный инструмент для написания более функционального и чистого CSS, который может ускорить рабочий процесс любого дизайнера и разработчика.
Зачем нужен SASS?
Большинство фронтенд фреймворков, включая Bootstrap, Materialize и Foundation, созданы с помощью этого отличного препроцессора. Знание SASS поможет вам использовать больше функций этих фреймворков.
Как использовать SASS?
Существует много приложений, которые позволяют легко и быстро начать использовать SASS: CodeKit, Compass, Koala и т.д. Вы узнаете о них в других частях туториала. В этой главе мы не будем использовать никаких приложений или инструментов кроме тех, которые необходимы для запуска SASS на компьютере. Вам не придется волноваться об операционной системе, потому что всё будет понятно всем пользователям.
Скачивание и Установка SASS
Установить SASS можно только на машину, на которой уже есть Ruby:
- Ruby предустановлен на Mac, так что вы можете сразу установить Sass Macintosh;
- Если вы работаете на Windows, то вам необходимо сначала скачать Ruby ;
- Ruby на Linux можно скачать через систему управления пакетами (apt package manager), rbenv или rvm.
После установки Ruby на вашу машину можно установить SASS. Давайте откроем командную строку Ruby и установим SASS на вашу систему:
Gem install sass
Если команда выше не сработает, то вам, возможно, придется использовать sudo команду:
Sudo gem install sass
Если вы хотите проверить версию SASS используйте следующую команду:
SASS установлен. Давайте создадим папку проекта и назовем ее sass-basic. Создайте базовый html файл со следующим кодом:
My First SASS Project
Hello friend I am learning SASS and it"s really awesome.
Body{ text-align: center; } h1{ color: #333; } p{ color: #666; }
Теперь нужно компилировать этот файл используя командную строку/терминал. Давайте откроем командную строку в той же директории (возможно, придется использовать командную строку Ruby, если обычная командная строка не работает). Вбейте следующее и нажмите Enter:
Sass --watch style.scss:style.css
Вы заметите, что сгенерировались новые файлы: style.css и style.css.map. Стоит отметить, что не нужно трогать map файл, также как и.css файл. Если вы хотите внести какие-то изменения, то это можно сделать через style.scss. Вам не понадобится повторять этот процесс при каждом изменении стилей. Компиляция SASS будет работать автоматически при внесении изменений в.scss файл.
В следующей главе мы рассмотрим SASS переменные, и почему они являются самой полезной функций SASS (и в любом другом CSS препроцессоре).
Sass позволяет правилам css, быть вложенными друг в друга. Внутреннее правило применяется только в пределах внешнего селектора правила. По другому тут никак не перевести, фраза умная, на деле же все проще, просто посмотрите пример:
Scss - файл
#main p {
color : #00ff00 ;
width : 97% ;
Redbox {
background-color : #ff0000 ;
color : #000 ;
Скомпилированный CSS
1 2 3 4 5 6 7 8
#main p {
color : #00ff00 ;
width : 97% ;
#main p .redbox {
background-color : #ff0000 ;
color : #000 ;
Это помогает избегать повторения родительского селектора, и помогает гораздо проще воспринимать группу css слоев с большим количеством вложенных селекторов. Например:
Scss - файл
10 11 12
#main {
width : 97% ;
p , div {
font-size : 2em ;
font-weight : bold ;
pre {
font-size : 3em ;
Скомпилированный CSS
11 12 13 14
#main {
width : 97% ;
#main p ,
#main div {
font-size : 2em ;
#main p a ,
#main div a {
font-weight : bold ;
#main pre {
font-size : 3em ;
Ссылка на родитель селекторов (&)
Не понятно почему разработчики sass-а так это назвали. Вообще, если по простому, то это можно назвать ссылкой на самого себя. Если я не ошибаюсь, то в less-ой документации это так и называется (напомню, less многие вещи брал из sass-а, данную конструкцию он тоже позаимствовал). Многие наверно зададутся вопросом, а для чего это нужно? Начнем с того, что без данной конструкции невозможно бы было реализовать ни один псевдокласс. Или другой пример, нам нужно предусмотреть другие стили элемента в зависимости от того какой класс имеет body html документа. Покажу на примере из официальной документации.
Scss - файл
1 2 3 4 5 6 7 8 9 10
font-weight : bold ;
text-decoration : none ;
&:hover {
text-decoration : underline ;
body .firefox & {
font-weight : normal ;
Скомпилированный CSS
1 2 3 4 5 6 7 8 9 10
font-weight : bold;
text-decoration : none ;
a :hover {
text-decoration : underline ;
body .firefox a {
font-weight : normal ;
Я думаю с псевдоклассами все понятно. Давайте поподробнее рассмотрим строчку body.firefox & . Что здесь происходит? Если ссылка на самого себя появляется за каким-то элементом (тут может быть как одиночный html элемент, так и класс, id-ик, абсолютно не важно), то это говорит компилятору что такое его расположение отменяет стандартную вложенность элементов. Компилятор выбьет такой элемент из стандартного потока. Если посмотреть на пример выше, то может сложиться ощущение, что будет скомпилирована css-ка в которой будет a body.firefox a , но нет. Ссылка на самого себя идет за элементом с классом, поэтому компилятор сгенерит body.firefox a (стандартная вложенность элементов отменена). Это достаточно фундаментальная вещь, и это нужно понимать. Новички которые только-только перешли на какой-нибудь препроцессор не совсем понимают как работает ссылка на самого себя, и частенько пишут код который не работает. Это просто нужно запомнить.
Scss - файл
1 2 3 4 5 6 7 8 9
#main {
color : black ;
font-weight : bold ;
&:hover {
color : red ;
Скомпилированный CSS
1 2 3 4 5 6 7 8 9
#main {
color : black
#main a {
font-weight : bold ;
#main a:hover {
color : red ;
В примере выше видно, что ссылка на самого себя &:hover вложена в #main и вложена в a , она стоит отдельно, перед ней нет никаких элементов, поэтому срабатывает стандартная вложенность и компилятор сгенерит #main a:hover .
В разные времена мир преживал технические революции. Это происходило скачками. Грубо говоря бронза, и бац, наступил железный век. Сейчас мы не знаем кто изобрел колесо или плуг, но в то время эти открытия носили революционный характер и изменили жизнь как отдельных людей, так и всего человечества. В жизни веба, если взять конкретнее, то в жизни верстальщиков, были три нововведения которые изменили их жизнь, притом изменили ее кардинально. Первое это конечно же каскадные таблицы стилей, но это было на заре веба. Второе это jquery, теперь путешествие по DOM модели стало простым и удобным, плюс разные эффекты. И третье, это уже более современное время, это БЭМ. Согласитесь круто написать что-то один раз, а потом без проблем использовать это на разных проектах. Следующая конструкция языка sass поможет вам в этом.
Scss - файл
1 2 3 4 5 6
#main {
color : black ;
&-sidebar {
border : 1px solid red ;
Скомпилированный CSS
1 2 3 4 5 6
#main {
color : black ;
#main-sidebar {
border : 1px solid red ;
Я брал пример из документации. В реальной жизни согласно БЭМ это будет не id-ик #main а .main , но суть от этого не изменится. Приведу простой
