Основы Sass. Sass для самых маленьких - подробное руководство Циклы в SASS
Sass (Syntactically Awesome Stylesheets) - це скриптова метамова, яка компілюється в звичайні CSS-стилі. Якщо ви добре знайомі з CSS + HTML, то з SASS розберетеся за кілька днів.
Всі, хто стикається з CSS розміром більше 500 рядків, мають справу з головним болем на тему того, як би його спростити. На жаль, з часів розробки стандартів каскадних стилів їх структура кардинально не змінювалася. Вимоги до верстки, кому я буду брехати, - ускладнилися в рази. Якщо колись 50-70 рядків стилів могли оформити простий сайт, то сьогодні такого обсягу вистачить хіба що на header. Та й то - тільки на мій:).
2007 року з’явилася перша версія SASS, розроблена Гемптоном Кетліном. Не думаю, що простий набір правил і примітивний компілятор замислювалися тоді як одні з основних інструментів фронтенд-майстрів і верстальників сучасного інтернету.
Розширення SASS-файлів можуть бути .sass і .scss - це залежить від обраного синтаксису. Браузер, втім, не розуміє жодного з них, тому для взаєморозуміння потрібно використовувати компілятор. Його завдання - привести SASS в зрозумілий класичний CSS, який буде розпізнано будь-яким браузером.
Роль компілятора може виконувати серверний js або програма, встановлена у вас на робочій машині і моніторять зміни в робочих файлах.
Які бувають синтаксиси в Sass
У мови є два основних «діалекти»: SASS і новіший SCSS. Відмінності між ними невеликі, проте порушення правил синтаксису не дозволить скомпілювати файл. У SASS-синтаксисі немає фігурних дужок, вкладеність елементів в ньому реалізована за допомогою відступів, а стильові правила обов’язково відокремлені новими рядками.
Незалежно від синтаксису, SCSS назад сумісний з CSS. Тобто будь-який CSS обов’язково буде дійсним SCSS-кодом.
Через відсутність дужок і крапок з комою зворотної сумісності у SASS-синтаксису з CSS немає.
Вигоди Sass
Спочатку розкажу в двох словах і далі трохи докладніше. Мені в CSS завжди не вистачало змінних і заважали хаки для кросбраузерності. Нижче на прикладах ви побачите, що SASS вирішує ці дві проблеми блискуче.
Змінні (variables)
Sass дозволяє призначати змінні - і це одна з ключових переваг. Змінна, за аналогією з php, починається зі знака долара ($), значення присвоюються за допомогою двокрапки.
Змінні в Sass можна розділити на 4 типи:
- число (int)
- строка (string)
- логічний тип (так/ні, boolean)
- кольори (ім’я, імена)
Наведу простий приклад, після якого стаття втратить актуальність, тому як вам стане все ясно і ви зможете самі все зрозуміти.
SCSS-синтаксис
$blue: #3bbfce; /* колір */ $margin: 16px; /* відступ */ $fontSize: 14px; /* розмір тексту */ .content { border: 1px solid $blue; /* синій бордюр */ color: darken($blue, 20%); /* затемнення кольору на 20% */ } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
SASS-синтаксис
$blue: #3bbfce $margin: 16px $fontSize: 14px .content border: 1px solid $blue color: darken($blue, 20%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue
Результат в CSS
Content { border: 1px solid #3bbfce; color: #217882; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }
Як бачите, в результаті ми отримуємо звичайний CSS. Поїхали далі.
Вкладені правила (nesting)
Я б Sass вивчив тільки за те, що в ньому є нестінг. Це значно спрощує редагування стилів і навігацію по робочому файлу стилів.
Nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
Nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
Вам більше не доведеться стежити за вкладеністю елементів і правильністю успадкування класів. Візуально вкладені в Sass всередину батьківського елемента правила будуть збережені з тієї ж ієрархією з урахуванням правил CSS.
Доповнення (mixin)
Правило DRY (Do not Repeat Yourself) реалізовано в Sass за допомогою техніки mixin. Ті шматки коду, які в CSS зазвичай вам доводилося дублювати, тут можна зберегти в окремій змінної і вставляти в потрібних місцях. Компілятор, зустрівши таку змінну, збереже замість неї потрібний шматок коду.
@mixin table-base { th { text-align: center; font-weight: bold; } td, th { padding: 2px } } #data { @include table-base; }
#data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }
Аргументи (arguments)
Доповнення вміють змінювати код в залежності від переданих їм аргументів. Наприклад, кросбраузерності обведення з Хакамі можна вмістити в один рядок.
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box-1 { @include border-radius(10px); } .box-2 { @include border-radius(5px); }
Box-1 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } .box-2 { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }
Наслідування (extend)
Створивши одного разу будь-яке правило, ми можемо використовувати його всередині іншого. Наслідуваний елемент отримає всі властивості вихідного класу, які ми можемо доповнити будь-якими іншими.
Error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.3em; font-weight: bold; } .badError { @extend .error; border-width: 3px; }
Error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; }
Ці прості можливості збільшують швидкість верстки і не дають загубитися в купі коду. У всякому разі, мені. Корисно запам’ятати, що вся документація по SASS є на
Вы давно хотите изучить sass, но не знали с чего начать? Или вы и так уже используете sass, но знания поверхностные и их хотелось бы прокачать? Данная статья поможет вам уверенно использовать всю мощь препроцессора sass и получать удовольствие от работы с ним.
Ранее я публиковал статью о том, . Теперь же я хочу поведать о более предпочтительном для меня препроцессоре sass.
Что такое sass?
Sass (Syntactically Awesome Style Sheets) — это препроцессор стилей css. Sass добавляет такой функционал к css, что работать с ним становится значительно легче, быстрее и приятней.
Установка sass и как с ним работать
Это первый вопрос которым задается веб-разработчик, который хочет начать использовать препроцессор. Есть несколько вариантов:
- Использовать родной компилятор Ruby Sass gem install sass и компилировать его с помощью команды sassc myfile.scss myfile.css
- Использовать GUI программы: Hammer, CodeKit, Koala или Compass
- Воспользоваться таск-менеджерами или консольными утилитами: gulp, grunt, libsass
По опыту могу сказать, что если вы один разработчик фронт-енда на проекте, то выбрать можно то, что удобней именно для вас. Если не нравится пользоваться консолью или прописывать таски для менеджера, то программы с графическим интерфейсом отлично подойдут. Но если же у вас крупный проект, с которым работают несколько людей с разными операционными системами, то однозначно лучше использовать gulp или grunt.
В чем разница между.sass и.scss?
В первых версиях sass формат файлов был.sass. В нем использовался специфический синтаксис, который отличался от синтаксиса css. Такой синтаксис не многим приглянулся и с 3 версии был введен новый формат.scss , который полностью такой же, как и в обычном css. Можно даже старый файл css переименовать в scss и он будет компилироваться.
После того, как мы установили компилятор sass, создали файл в проекте с расширением.scss приступим к синтаксису препроцессора.
Переменные
Одним из лучших новшеств, которое добавляет sass в css это использование переменных. Они задаются с помощью символа $
$primaryColor: #eeffcc;
Если вы попробуете скомпилировать этот код, на выходе ничего не будет. Потому что это просто переменная в своем scope. Её необходимо использовать таким образом:
$primaryColor: #eeffcc; body { background: $primaryColor; }
Говоря про scope я имею ввиду, что у каждой переменной есть как и в js своя область видимости.
$primaryColor: #eeccff; body { $primaryColor: #ccc; background: $primaryColor; } p { color: $primaryColor; } // После компиляции у абзаца p будет цвет #eeccff
Но если вы захотите переназначить глобальную переменную внутри класса, можно добавить к значению переменной флаг!global
$primaryColor: #eeccff; body { $primaryColor: #ccc !global; background: $primaryColor; } p { color: $primaryColor; } // После компиляции у абзаца p цвет будет #ccc
Есть еще один флаг!default , который позволяет явно задать значение переменных по умолчанию.
Математика
В отличии от css, sass позволяет производить математические вычисления при задании свойств селекторам.
Поддерживаемые операции:
Сразу скажу о «подводных камнях» при работе с математическими символами.
Во-первых символ деления / встречается при задании шрифта font: 14px/16px , и этот символ по умолчанию не обрабатывается как математический между строчными значениями. Для того что бы делить строчные значения их необходимо оборачивать круглыми скобками.
$fontDiff: (14px/16px);
Во-вторых вы не можете смешивать размерности при математических операциях.
//Так нельзя $container-width: 100% - 20px;
Для обработки примера выше необходимо использовать css свойство calc , так как вычисления должны происходить в момент рендеринга, а не в момент компиляции.
Пример использования математических операций:
$container-width: 100%; .container { width: $container-width; } .col-4 { width: $container-width / 4; } // Скомпилируется в: // .container { // width: 100%; // } // // .col-4 { // width: 25%; // }
Функции
В sass есть множество стандартных функций, со списком которых можно ознакомиться .
Например при использовании функции darken() можно в одну строку задать фон при наведении для кнопки, без подбора цветов в photoshop или в вашей IDE.
$awesome-blue: #2196F3; a { padding: 10 15px; background-color: $awesome-blue; } a:hover { background-color: darken($awesome-blue,10%); } //Скомпилируется в: //a { // padding: 10 15px; // background-color: #2196F3; //} // //a:hover { // background-color: #0c7cd5; //}
Вложенность
Наверное самое полезной и удобной фичей в sass является вложенность. Классы можно вкладывать внутрь других классов сохраняя древовидную структуру как в html. С таким функционалом появляются огромные возможности.
Для понимания, обычно в css что бы задать свойства элемента находящегося внутри родителя мы задаем селектор таким образом:
Container { width: 100%; } .container h1 { color: red; }
В sass же этот же код можно записать так:
Container { width: 100%; h1 { color: red; } }
Правда же здорово? Но для полной гибкости вложенности существует оператор & , который позволяет обращаться к родителю.
A.myAnchor { color: blue; &:hover { //скомпилируется как a.myAnchor:hover text-decoration: underline; } &:visited { //скомпилируется как a.myAnchor:visited color: purple; } }
Также есть оператор @at-root , который скомпилирует дальнейший код на уровень выше. То есть на ровне с родителем.
First-component { .text { font-size: 1.4rem; } .button { font-size: 1.7rem; } @at-root .second-component { .text { font-size: 1.2rem; } .button { font-size: 1.4rem; } } }
после компиляции css будет выглядеть так:
First-component .text { font-size: 1.4rem; } .first-component .button { font-size: 1.7rem; } .second-component .text { font-size: 1.2rem; } .second-component .button { font-size: 1.4rem; }
Вложенность сильно улучшает читаемость кода и дальнейшую поддержку его. Только есть одно правило, придерживаться которого рекомендуют сами разработчики sass.
Не используйте больше 4 уровней вложенности в sass.
Конечно Hampton Catlin не придет за вашей душой, но просто постарайтесь придерживаться этого правила, а лучше не писать больше трех уровней вложенности, что бы на выходе селекторы были не слишком длинные.
Импортирование
Импортирование в sass позволяет разбивать файл стилей на несколько логических файлов, которые в дальнейшем будут склеены в один с помощью директивы @import .
@import "part/grids.scss";
По факту вам даже необязательно нужно указывать формат файла.
@import "part/grids";
Если имя файла будет начинаться с нижнего подчеркивания _partial.scss , то он будет выполнен, но на выходе файл css не выдаст. Так обычно называют все файлы scss, которые будут импортироваться в главном файле, что бы выполниться они выполнились, но побочных файлов css не создали.
Наследование
В sass директива @extend позволяет наследовать стили другого класса, заданного ранее.
Например у вас есть стили input, а вам необходимо стилизовать похожий input, но модифицированный.
Input { border-radius: 3px; border: 4px solid #ddd; color: #555; font-size: 17px; padding: 10px 20px; display: inline-block; outline: 0; } .error-input { @extend .input; border:4px solid #e74c3c; }
Обращу внимание, что данная директива не дублирует стили предыдущего класса, а дописывает текущий селектор через запятую к первому. Итоговый css будет выглядеть так:
Input, .error-input { border-radius: 3px; border: 4px solid #ddd; color: #555; font-size: 17px; padding: 10px 20px; display: inline-block; outline: 0; } .error-input { border: 4px solid #e74c3c; }
Но что если мы хотим прописать так сказать шаблон, для еще не существующего класса? Для этого нужно использовать символ % вместо точки перед именем класса.
%input-style { font-size: 14px; } input { @extend %input-style; color: black; }
При использовании символа % , код не будет скомпилирован в css сам по себе, а лишь в классе-наследнике.
Миксины
Директива миксинов в sass невероятно полезна, она по сути выполняет схожий функционал как и @extend , только выполняя при этом функцию, в которую можно передать параметры.
Sass использует директиву @mixin для задание функции миксина и директиву @include для использования миксина.
Давайте для примера создадим миксин, который будет задавать media queries для респонсива.
Первым шагом будет определение миксина:
@mixin media($queryString){ }
В дальнейшем мы будем вызывать миксин media и передавать в нем аргумент $queryString
Внутри миксина мы можем использовать аргумент, динамически передавая в нем различные параметры.
@mixin media($queryString){ @media #{$queryString} { @content; } }
Так как мы хотим, что бы строка, которая передается в аргументе функции выполнялась как код, её необходимо обернуть в #{} .
Вторым кусочком пазла является директива @content , когда миксином оборачиваются стили, то они будут доступны через директиву @content .
Вот как будет выглядеть вызов миксина:
Container { width: 900px; @include media("(max-width: 767px)"){ width: 100%; } }
Директива функции
С помощью директивы @function можно создавать функции похожие на миксины, разница только в том, что такие функции отдают не стили, а итоговое значение директивой @return .
@function getColumnWidth($width, $columns,$margin){ @return ($width / $columns) - ($margin * 2); }
Теперь мы можем использовать данную функцию в коде ниже:
$container-width: 100%; $column-count: 4; $margin: 1%; .container { width: $container-width; } .column { background: #1abc9c; height: 200px; display: block; float: left; width: getColumnWidth($container-width,$column-count,$margin); margin: 0 $margin; }
Не дурно, да?
Демо
Теперь на основе полученных знаний мы построим собственную настраиваемую сетку с responsive design.
Прежде всего зададим карту настроек сетки:
$settings: (maxWidth: 800px, columns: 12, margin: 15px, breakpoints: (xs: "(max-width: 480px)", sm: "(max-width: 768px) and (min-width: 481px)", md: "(max-width: 1024px) and (min-width: 769px)", lg: "(min-width: 1025px)"));
Теперь объявим миксин, который будет генерировать нашу сетку.
@mixin renderGridStyles($settings){ }
Так как целью является построить сетку для всех media queries, то мы сделаем цикл, который будет пробегаться по всем @each значениям карты настроек, которую мы будем считывать с помощью директивы map-get .
@mixin renderGridStyles($settings){ $breakpoints: map-get($settings, "breakpoints"); @each $key, $breakpoint in $breakpoints { @include media($breakpoint) { } } }
Нам нужно создать сетку с колонками используя цикл. Для этого создадим еще один миксин renderGrid . С помощью map-get мы получим нужные значения, а с помощью директивы @while пройдемся по ним. Для динамического создания имен классов колонок будем использовать итератор $i .
@mixin renderGrid($key, $settings) { $i: 1; @while $i <= map-get($settings, "columns") { .col-#{$key}-#{$i} { float: left; width: 100% * $i / map-get($settings,"columns"); } $i: $i+1; } }
Теперь создадим контейнер для рядов нашей сетки:
Container { padding-right: map-get($settings, "margin"); padding-left: map-get($settings, "margin"); margin-right: auto; margin-left: auto; } .row { margin-right: map-get($settings, "margin") * -1; margin-left: map-get($settings, "margin") * -1; }
Все готово! Мы создали 12-ти колончатую сетку с поддержкой отзывчивого дизайна, которую легко можно изменять с помощью карты настроек.
Данная статья является вступительной, в дальнейшем я опубликую подробнее о синтаксисе sass, архитектуре стилей для крупных проектов и многое другое. Так что подписывайтесь на мой блог и будете в курсе новых публикаций.
Привет, друзья!
Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.
Класснуть
Запинить
Все примеры и настроенный проект данного урока вы можете скачать с нашего сайта
Sass - это один из наиболее развитых и стабильных CSS препроцессоров, а также один из самых популярных препроцессоров у профессионалов.
Преимущества Sass
- Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
- Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
- Sass - это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
- Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков - Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
- Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе - упрощенный (SASS) и развернутый CSS-подобный (SCSS).
Когда я только знакомился с CSS препроцессорами, мне, как и многим другим начинающим веб-разработчикам, была не до конца понятна сама идея использования CSS препроцессоров. Зачем делать дополнительную прослойку, использовать какие-то инструменты, усложнять CSS, думал я. Но со временем начал понимать, что изо дня в день написание CSS становилось пыткой, серой рутиной, многие действия приходилось повторять, копировать селекторы, свойства и даже целые блоки CSS кода для достижения необходимого результата. Сегодня, на примерах, я покажу вам, как можно упростить работу, используя препроцессор Sass, разнообразить разработку и даже немного поразвлечься при написании каких-то более или менее сложных функций.
Настройка окружения
В качестве окружения для работы с Sass в этом уроке, как и в других наших уроках, мы будем использовать версию Sass для таск-менеджера Gulp (gulp-sass ). Для использования оригинальной Ruby версии или компиляции Sass посредством специального ПО, вы можете ознакомиться с инструкциями на оф. сайте . Данный урок носит преимущественно практический характер, поэтому останавливаться на возможных вариантах подключения к проекту не будем, подключим Sass наиболее популярным способом, используя Gulp.
Убедитесь, что у вас установлена последняя версия Node.js и Gulp. Если Node.js не установлен, скачайте его и установите . После установки Node.js установите gulp командой "npm i -g gulp" (Windows) или "sudo npm i -g gulp" (Linux, OS X). Почитать: .
Npm i --save-dev gulp gulp-sass
Var gulp = require("gulp"), // Подключаем Gulp sass = require("gulp-sass"); // Подключаем Sass пакет gulp.task("sass", function() { // Создаем таск "sass" return gulp.src(["sass/**/*.sass", "sass/**/*.scss"]) // Берем источник.pipe(sass({outputStyle: "expanded"}).on("error", sass.logError)) // Преобразуем Sass в CSS посредством gulp-sass .pipe(gulp.dest("css")) // Выгружаем результата в папку css }); gulp.task("watch", function() { gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Наблюдение за sass файлами в папке sass }); gulp.task("default", ["watch"]);
Обратите внимание на строку 6 - здесь мы используем один из стилей вывода в результирующий файл: nested - вложенный, по умолчанию; expanded - развернутый; compact - компактный, когда селектор и его свойства в фигурных скобках выводятся в одну строку; compressed - сжатый. Кроме того, благодаря обработке .on("error", sass.logError) , если возникнет ошибка, нам не придется перезагружать команду выполенния Gulpfile и мы будем видеть, в какой строке Sass файла у нас ошибка. В примерах я буду использовать стиль вывода expanded для наглядности.
У вас должна быть следующая структура проекта в вашей файловой системе:
-
myproject/
-
css/
- common.css
-
sass/
- common.sass
- node_modules/
- gulpfile.js
- package.json
-
css/
Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.
Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/ . Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.
Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp .
После того, как наше окружение настроено и Sass успешно преобразуется в CSS при сохнанении *.sass файлов в директории sass/ , можно спокойно продолжать обучение и выполнять примеры, которые мы будем сегодня разбирать, на практике.
Синтаксис Sass
Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass - это синтаксис отступов . Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса - *.sass . Второй вариант - это синтаксис, расширяющий синтаксис CSS , Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом - *.scss .
Очень важно! Синтаксис отступов требует очень четкого соблюдения отступов у вложенных свойств и если у вас возникают ошибки при запуске Gulp или неявные ошибки без указания строки в консоли - скорее всего, ошибка именно в неправильных отступах. Еще важная деталь - если у вас в качестве отступов используются табы, компилятор выдаст ошибку при попытке конвертировать Sass, в котором помимо табов, также, исвользуются пробелы в качестве отступов. Либо вы используете только табы, либо только пробелы.
SASS и SCSS синтаксис:
| SASS - синтаксис отступов | SCSS - синтаксис расширения |
| $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color | $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } |
Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import , например, если вы скачали файл carousel.scss , то можете подключить его в ваш main.sass строкой @import "carousel" . Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass , где x.x - это номер заголовка примера из данной статьи.
Мы будем использовать синтаксис отступов.
1. Расширение возможностей CSS с помощью Sass
1.1 Правила вложения
Sass дает разработчикам замечательную возможность использовать вложение одних CSS правил в другие, тем самым сокращая время на написание/копирование длинных селекторов и делая код более структурированным, с четкой иерархией.
1.2 Привязка к родительскому селектору
Если вы хотите расширить селектор, не создавая нового правила, вы можете привязать к готовому селектору дополнительные селекторы, используя знак & . Внешне это выглядит как создание дочернего селектора в иерархии, но с использованием & , мы расширяем именно родительский селектор, а не создаем дочерний.
Обратите внимание на правило body.firefox & , которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце & .
Кроме того, привязку к родителю можно использовать для создания составных селекторов:
1.3 Вложенные свойства
Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin -top, margin -bottom, margin -left, margin -right имеют общую основу margin и могут быть разбиты на вложения следующим образом:
1.4 Селекторы-шаблоны
Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend .
2. SassScript
SassScript позволяет значително расширить возможности Sass за счет использования пользовательских переменых, арифметических и прочих функций. SassScript может быть использован для автоматической генерации новых селекторов и свойств.
2.1 Переменные в Sass
Это действительно замечательная возможность - определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение .
2.2 Операции с числами и строками + интерполяция
Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения (<, >, <=, >=, ==, !=) также поддерживаются для чисел.
Кроме того, в Sass есть возможность конкатенировать (соединять) строки.
Как видим из примера $summ: 10 + 20 / 2 , соблюдается приоритет в выполнении арифметических операций - сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px , мы получим 20px .
Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке.
Интерполяция - это получение нового значения, используя другие.
Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря "интегрированию" в значение другой переменной, посредством конструкции #{} , например:
Вы не можете просто взять и вставить в строку переменную, без использования интерполяции, как например, это можно сделать в PHP, в двойных кавычках. Обязательно используйте интерполяцию в переменные.
2.3 Операции с цветами
Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.
Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.
3. Директивы и правила
3.1 @import
Вы можете импортировать в ваш Sass файл sass , scss и css файлы с помощью директивы @import , при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.
@import сработает как обычный CSS @import, если:
- в пути к файлу присутствует http:// ;
- файл вызывается через url() ;
- или в импорте присутствуют медиапараметры.
Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass , *.scss или *.css .
Давайте рассмотрим некоторые примеры.
Следующие файлы импортированы не будут :
Следующие файлы будут импортированы:
Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение.css
Возможен импорт нескольких файлов, через запятую: @import "header", "media" .
Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import "header" .
Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import . Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:#main @import "example"
3.2 @at-root
Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:
Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации .
4. Выражения
Sass поддерживает использование выражений и функций для различных условий, реализации циклов и т.д.
4.1 Директива @if()
Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:
4.2 Директива @for
@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.
Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.
4.3 Директива @each
Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each :
4.4 Директива @while
@while циклично выводит блоки стилей, пока выражение является true .
5. Миксины
Миксины - блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.
Миксин объявляется директивой @mixin , после объявления должно быть указано имя миксина. Вызывается миксин директивой @include , которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.
Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, будет полезно.
Сразу отвечу на вопрос - как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp . Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.
Перевод статьи:
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 файлы будут сохранены в текущей директории. (*При необходимости вместо точки можно указать путь к папке, в которой нужно сохранить результирующие файлы. )
