Выбор читателей
Популярные статьи
Статья "SASS для дизайнеров и не только" за 2013-02-21 переименована в "Синтаксис SASS " и обновлена (2014-02-17)
Sass - это препроцессорный язык; препроцессоры компилируют СSS код, который мы пишем на процессорном языке (SASS) в чистый CSS код.
Документация SASS ориентирована скорее на программистов, поэтому дизайнеры не всегда охотно начинают работать с SASS. К тому же не всегда явно указываются преимущества использования SASS с точки зрения дизайнеров.
В этой статье я хочу охватить несколько простых принципов. Я не эксперт по SASS, но должен отметить, что использовать sass мудрое решение.
Так в чем эти преимущества? Вы сможете логически структурировать ваш код, тем самым вы ускорите сам процесс написания кода; существенно сократится количество повторов (в этом нам помогут переменные), код станет намного проще поддерживать. Язык SASS упрощает работу над проектом, и все равно, кто вы - программист или дизайнер. Это действительно так.
В SASS название переменной начинается со знака доллара ($). Значения переменных идентичны значениям свойств CSS.
Начнем с основ, а именно с переменных. Рассмотрим переменные на основе следующего примера. Мы склонны использовать в документе несколько цветов. Как результат приходится писать снова и снова значения цвета в формате hex или rgb. Если мы захотим поменять какой-либо цвет, нам придется пройтись авто-заменой по всему документу. При этом мы не можем быть уверены, что не захватим ненужное значение.
A {color: #822733;} .summary {color: #822733;} .copyright {color: #822733;}
Например, вы можете иметь несколько правил, которые определяют темно-красный цвет у нужных селекторов. Язык SASS позволяет нам поступить следующим образом: в начале документа мы можем определить переменную с именем $brand-colour и затем в документе вместо самого значение ставить наименование переменной. Затем, если нам понадобится поменять цвет, достаточно всего лишь изменить значение у переменной $brand-colour и этим мы поменяем цвет у всех правил, которые используют переменную $brand-colour .
// Моя библиотека цветов SASS $brand-colour: #822733; a {color: $brand-colour;} .summary {color: $brand-colour;} .copyright {color: $brand-colour;}
Переменные могут содержать не только строки, но и цифры, которыми вы можете манипулировать. Если вы используете сетки или ваш макет масштабируется в зависимости от конкретных значений, то вы, вероятно, используете эти значений повсеместно в вашем стилевом файле. Например, если вы постоянно используете значение в 10px , то вы можете определить переменную, например, $unit = 10px . Эту переменную можно неоднократно использовать в вашем коде. Вместо имени переменной, как обычно, подставится значение (10px).
Но что делать, если вам потребуется удвоить значение переменной? Например, вы хотите в два раза увеличить нижнее поле у элемента. Используя SASS, вы можете добавить простую математику (+ , - , * , / , %), например, для нашего случая:
$unit = 10px; h1, h2, h3 { margin-bottom: $unit;} p { margin-bottom: $unit;} aside { margin-bottom: $unit*2; /* 20px */} footer{ margin-top: $unit*4; /* 40px */}
Примесь можно сравнить с повторяющимся в коде блоком объявлений. Это кусок кода, который вы можете использовать где угодно в документе. Вы не только исключите лишние повторения, но и сделаете код более чистым, так как избавитесь от необходимости использовать один и тот же класс к разным элементам.
Например, у вас на сайте есть разделитель, который вы используете довольно часто. Например, вы можете им разбивать основные блоки (например, articles и header) или четные параграфы. Разделитель имеет нижний отступ, нижнее поле, рамку и тень.
Чтобы создать разделитель вы можете к элементу добавить класс.shadow-border . Но это существенно "загрязнит" ваш html и css файл.
Shadow-border { border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); padding-bottom: 20px; margin-bottom: 40px; }
Если вы хотите корректную структуру в css файле и чистую html-разметку, вам нужно добавить вышеприведенное правило соответствующим html-элементам. Стоит отметить, если элементов с разделителем много, это существенно "испортит" стилевой файл, что затруднит поддержку стилевого файла.
Header, article, p.intro { border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); padding-bottom: 20px; margin-bottom: 40px; }
Используя @mixin , вы можете определить имя для блока объявлений. Это имя не должно быть связано ни коим образом с вашим HTML.
@mixin shadow-border { border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); padding-bottom: 20px;margin-bottom: 40px;}
Затем, чтобы подключить примесь к элементу, вам потребуется просто подключить имя примеси: @include shadow-border;
@mixin shadow-border { border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); padding-bottom: 20px;margin-bottom: 40px;} article { @include shadow-border;} header { @include shadow-border;} p.intro { @include shadow-border;}
Выглядит неплохо.
Параметры для примесей задаются в круглых скобках, следующих за названием примеси; контент примеси помещается в фигурные скобки.
@mixin border-radius($radius: 1px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } /* USE */ .example-class{ background-color: #900; @include border-radius(20px); }
Иногда очень удобно иметь возможность вложить одну примесь в другую. Например, нам нужно добавить примесь к уже существующей примеси:
$border-colour: #a4a4a4; $unit: 10px; @mixin subtle-shadow { -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); } @mixin shadow-border { @include subtle-shadow; border-bottom: $unit/10 solid $border-colour; padding-bottom: $unit*2; margin-bottom: $unit*4;} article { @include shadow-border;} header { @include shadow-border;} p.intro { @include shadow-border;}
Примеси не единственная вещь, которую вы можете вкладывать в селекторы CSS (или, что вернее, в блоки объявлений в sass-файле). В SASS вы можете вкладывать элементы друг в друга . Этим вы исключите повторяющиеся селекторы и упростите процесс чтения кода.
/* обычный CSS */ .module h3 { font-weight: bold;} .module p { padding-bottom: 10px;}
/* пишем на SASS */ .module { h3{ font-weight: bold;} p { padding-bottom: 10px;} }
Вложения становятся необычайно полезными при работе с медиа-запросами. Обычно, когда вы работаете с медиа-запросами, приходится создавать дополнительные стили под разные разрешения экрана, а иногда даже создавать отдельный стилевой файл.
/* окно просмотра - любое, включая браузеры которые не поддерживают @media */ article { font-size: 14px;line-height: 25px;} article h2 { font-size: 18px;padding-bottom: 15px;} /* для 300px окон просмотра и шире (mobile first) */ @media only screen and (min-width: 300px) { article {line-height: 20px;width: 90%;} article h2 { padding-bottom: 10px;} } /* для 600px окон просмотра и шире */ @media only screen and (min-width: 600px) { article {line-height: 25px;width: 80%;} article h2 { padding-bottom: 15px;} } /* для 900px окон просмотра и шире */ @media only screen and (min-width: 900px) { article {width: 60%;} } /* для 1200px окон просмотра и шире */ @media only screen and (min-width: 1200px) { article { font-size: 16px;line-height: 30px;width: 50%;} article h2 { font-size: 21px; line-height: 35px; padding-bottom: 20px;} }
SASS же позволит вам расположить, при помощи вложений, все медиа-запросы прямо внутри элементов. Этим вы сможете упростить поиск и правку стилей, затрагивающих адаптивную верстку.
Article { font-size: 14px;line-height: 25px; h2 { font-size: 18px; padding-bottom: 15px; } @media only screen and (min-width: 300px) { line-height: 20px; width: 90%; h2 { padding-bottom: 10px; } } @media only screen and (min-width: 600px) { line-height: 25px; width: 80%; h2 { padding-bottom: 15px;} } @media only screen and (min-width: 900px) { width: 60%; } @media only screen and (min-width: 1200px) { font-size: 16px;line-height: 30px; width: 50%; h2 { font-size: 21px; line-height: 35px; padding-bottom: 20px; } } }
Оператор @import
позволяет подключить содержимое стороннего CSS(SCSS)-файла в текущий CSS(SCSS)-файл.
@import не разрешается вставлять после любых объявлений кроме @charset или другого @import .
Чтобы подключить содержимое, например, _style_two.scss , необходимо писать так:
@import "style_two.scss"; /* подключаем без подчеркивания */
Важно
: если подключать не конкретный файл, а папку, то css файлы не будут генерироваться для файлов начинающихся с _
.
Например, наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss - нет. Таким образом, знак подчеркивания означает, что файл не является самостоятельной таблицей стилей и его можно лишь импортировать в другую таблицу стилей.
Синтаксис оператора цикла (each) следующий: $var in . $var – имя переменной, и
список значение переменной $var .
Вместо $var подставляется значения из , затем в стилевом файле выводится содержимое цикла (по количеству значений
).
Например:
Скомпилировано в:
Часто возникает ситуация, когда один класс должен иметь все стили другого класса, помимо своих собственных стилей. Наиболее распространенное решение это использовать два класса; первый содержит общие стили, второй – специфичные.
Оператор @extend позволяет избежать этих проблем, обеспечивая возможность одному селектору наследовать стили от другого селектора. Например:
Скомпилировано в:
Статей про SASS (SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS -статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.
Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код. Пример SASS-кода:
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
И тоже самое на SCSS:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Я выбрал SCSS в виду того, что он проще для восприятия коллегам с ним ещё не знакомым. Ещё стоило бы отметить что обычный CSS код вполне вписывается в SCSS синтаксис.
Предположим, что у вас есть следующая структура проекта:
Css
---- scss
------ style.scss
---- style.css
Необходимо чтобы sass отслеживал все изменения в css/scss/* и результат сохранял в css/*.css . В таком случае запускаем sass так ― sass --watch css/scss:css/. . Т.е. sass --watch [что]:[куда] .
Стоит отметить, что в отличии от Less , SASS не умеет компилировать свой код прямо в браузере. На мой взгляд, такой подход (компиляция на сервере или ПК-верстальщика) является единственно верным.
Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с _ . Т.е. наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss ― нет.
Итак, для того, чтобы включить содержимое файла _template.scss или template.scss пишем
@import "template"; // шаблоны
В конечном счёте, вместо 1-го большого style.css файла у меня получилось более сотни мелких scss -файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая "схема" более производительна.
#some {
border: 1px solid red;
.some { background: white; }
}
/* => */
#some { border: 1px solid red; }
#some .some { background: white; }
Ещё пример:
Input {
border: 1px solid gray;
background: white;
& { color: black; }
&.some_class { display: none; }
}
/* => */
input { border: 1px solid gray; background: white; }
input { color: black; }
input.some_class { display: none; }
Символ & равносилен родительскому селектору. Допустим тег
$IE_7: "body.ie_7"; //... .some { display: inline-block; #{$IE_7} & { zoom: 1; display: inline; } } /* => */ .some { display: inline-block; } body.ie_7 .some { zoom: 1; display: inline; }
$some: red;
Переменные ― не константы, их можно менять по ходу кода:) Одна из первых моих мыслей вылилась в _const.scss файл, который заключает в себе все базовые цвета, размеры шрифтов и пр.
$link: #15157d;
$link_bottom: $link;
$input_font_size: 13px;
$content_bg: #F1F1F1;
$input_color: #4E4D4D;
$input_color_placeholder: #959595;
$text_color: black;
...
Предполагается, что цвет ссылок на сайте ― $link .
A { color: $link; }
span.link {
color: $link;
text-decoration: underline;
}
Если в дальнейшем выяснится, что цвет ссылок изменился ― достаточно поменять 1 переменную (в случае CSS нужно было бы пройтись авто-заменой по файлам, возможно даже выборочно). Предположим, что, внезапно, выясняется, что в некотором модуле contacts , цвет ссылок другой. Есть, как минимум, два пути решения.
$contacts_link: orange;
// код модуля с использованием $contacts_link вместо $link
Второй
$__link: $link;
$link: orange;
// код модуля
$link: $__link;
Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета.
Block {
$block_width: 500px;
padding: 5px;
border: 1px solid black;
width: $block_width - (5px * 2) - (1px * 2);
}
При желании можно и padding с border-ом задавать переменными. Всё зависит от сложности вёрстки.
Ещё пример:
Block {
$count: 10;
$margin_left: 5px;
$all_width: 1000px;
width: $all_width;
.sub_element {
width: ($all_width / $count) - $margin_left;
margin: 0 0 0 $margin_left;
}
}
Хочу отметить, что подобного рода манипуляции применяются очень часто. Без них я как без ног.
А теперь цвета. Цвета можно складывать, перемножать:
Some {
$color: #010203;
color: $color;
border-color: $color - #010101;
&:hover { color: #010203 * 2; }
}
/* => */
.some { color: #010203; border-color: #000102; }
.some:hover { color: #020406; }
Довольно удобная штука, когда лень подбирать цвета. Также доступны такие функции как opacify и transparentize (более
Sass (Syntactically Awesome Stylesheets) - це скриптова метамова, яка компілюється в звичайні CSS-стилі. Якщо ви добре знайомі з CSS + HTML, то з SASS розберетеся за кілька днів.
Всі, хто стикається з CSS розміром більше 500 рядків, мають справу з головним болем на тему того, як би його спростити. На жаль, з часів розробки стандартів каскадних стилів їх структура кардинально не змінювалася. Вимоги до верстки, кому я буду брехати, - ускладнилися в рази. Якщо колись 50-70 рядків стилів могли оформити простий сайт, то сьогодні такого обсягу вистачить хіба що на header. Та й то - тільки на мій:).
2007 року з’явилася перша версія SASS, розроблена Гемптоном Кетліном. Не думаю, що простий набір правил і примітивний компілятор замислювалися тоді як одні з основних інструментів фронтенд-майстрів і верстальників сучасного інтернету.
Розширення SASS-файлів можуть бути .sass і .scss - це залежить від обраного синтаксису. Браузер, втім, не розуміє жодного з них, тому для взаєморозуміння потрібно використовувати компілятор. Його завдання - привести SASS в зрозумілий класичний CSS, який буде розпізнано будь-яким браузером.
Роль компілятора може виконувати серверний js або програма, встановлена у вас на робочій машині і моніторять зміни в робочих файлах.
У мови є два основних «діалекти»: SASS і новіший SCSS. Відмінності між ними невеликі, проте порушення правил синтаксису не дозволить скомпілювати файл. У SASS-синтаксисі немає фігурних дужок, вкладеність елементів в ньому реалізована за допомогою відступів, а стильові правила обов’язково відокремлені новими рядками.
Незалежно від синтаксису, SCSS назад сумісний з CSS. Тобто будь-який CSS обов’язково буде дійсним SCSS-кодом.
Через відсутність дужок і крапок з комою зворотної сумісності у SASS-синтаксису з CSS немає.
Спочатку розкажу в двох словах і далі трохи докладніше. Мені в CSS завжди не вистачало змінних і заважали хаки для кросбраузерності. Нижче на прикладах ви побачите, що SASS вирішує ці дві проблеми блискуче.
Sass дозволяє призначати змінні - і це одна з ключових переваг. Змінна, за аналогією з php, починається зі знака долара ($), значення присвоюються за допомогою двокрапки.
Змінні в Sass можна розділити на 4 типи:
Наведу простий приклад, після якого стаття втратить актуальність, тому як вам стане все ясно і ви зможете самі все зрозуміти.
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. Поїхали далі.
Я б 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.
Правило 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; }
Доповнення вміють змінювати код в залежності від переданих їм аргументів. Наприклад, кросбраузерності обведення з Хакамі можна вмістити в один рядок.
@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; }
Створивши одного разу будь-яке правило, ми можемо використовувати його всередині іншого. Наслідуваний елемент отримає всі властивості вихідного класу, які ми можемо доповнити будь-якими іншими.
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 - это один из наиболее развитых и стабильных CSS препроцессоров, а также один из самых популярных препроцессоров у профессионалов.
Когда я только знакомился с 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 для наглядности.
У вас должна быть следующая структура проекта в вашей файловой системе:
Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.
Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/ . Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.
Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp .
После того, как наше окружение настроено и Sass успешно преобразуется в CSS при сохнанении *.sass файлов в директории sass/ , можно спокойно продолжать обучение и выполнять примеры, которые мы будем сегодня разбирать, на практике.
Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass - это синтаксис отступов . Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса - *.sass . Второй вариант - это синтаксис, расширяющий синтаксис CSS , Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом - *.scss .
Очень важно! Синтаксис отступов требует очень четкого соблюдения отступов у вложенных свойств и если у вас возникают ошибки при запуске Gulp или неявные ошибки без указания строки в консоли - скорее всего, ошибка именно в неправильных отступах. Еще важная деталь - если у вас в качестве отступов используются табы, компилятор выдаст ошибку при попытке конвертировать Sass, в котором помимо табов, также, исвользуются пробелы в качестве отступов. Либо вы используете только табы, либо только пробелы.
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 - это номер заголовка примера из данной статьи.
Мы будем использовать синтаксис отступов.
Sass дает разработчикам замечательную возможность использовать вложение одних CSS правил в другие, тем самым сокращая время на написание/копирование длинных селекторов и делая код более структурированным, с четкой иерархией.
Если вы хотите расширить селектор, не создавая нового правила, вы можете привязать к готовому селектору дополнительные селекторы, используя знак & . Внешне это выглядит как создание дочернего селектора в иерархии, но с использованием & , мы расширяем именно родительский селектор, а не создаем дочерний.
Обратите внимание на правило body.firefox & , которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце & .
Кроме того, привязку к родителю можно использовать для создания составных селекторов:
Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin -top, margin -bottom, margin -left, margin -right имеют общую основу margin и могут быть разбиты на вложения следующим образом:
Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend .
SassScript позволяет значително расширить возможности Sass за счет использования пользовательских переменых, арифметических и прочих функций. SassScript может быть использован для автоматической генерации новых селекторов и свойств.
Это действительно замечательная возможность - определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение .
Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения (<, >, <=, >=, ==, !=) также поддерживаются для чисел.
Кроме того, в Sass есть возможность конкатенировать (соединять) строки.
Как видим из примера $summ: 10 + 20 / 2 , соблюдается приоритет в выполнении арифметических операций - сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px , мы получим 20px .
Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке.
Интерполяция - это получение нового значения, используя другие.
Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря "интегрированию" в значение другой переменной, посредством конструкции #{} , например:
Вы не можете просто взять и вставить в строку переменную, без использования интерполяции, как например, это можно сделать в PHP, в двойных кавычках. Обязательно используйте интерполяцию в переменные.
Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.
Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.
Вы можете импортировать в ваш Sass файл sass , scss и css файлы с помощью директивы @import , при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.
@import сработает как обычный CSS @import, если:
Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass , *.scss или *.css .
Давайте рассмотрим некоторые примеры.
Следующие файлы импортированы не будут :
Следующие файлы будут импортированы:
Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение.css
Возможен импорт нескольких файлов, через запятую: @import "header", "media" .
Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import "header" .
Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import . Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:#main @import "example"
Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:
Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации .
Sass поддерживает использование выражений и функций для различных условий, реализации циклов и т.д.
Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:
@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.
Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.
Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each :
@while циклично выводит блоки стилей, пока выражение является true .
Миксины - блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.
Миксин объявляется директивой @mixin , после объявления должно быть указано имя миксина. Вызывается миксин директивой @include , которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.
Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, будет полезно.
Сразу отвечу на вопрос - как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp . Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.
Написание большого количества CSS-кода может быть очень утомительным, поэтому изучение SASS и LESS может сделать жизнь любого веб-разработчика и дизайнера ощутимо легче.
Для начинающего в целях обучения это очень даже полезно, однако со временем, ваши навыки будут улучшаться и придет необходимость в повышении производительности труда.
Вы удивитесь, когда узнаете, что есть способы писать CSS-код без множественных повторений одних и тех же свойств. В этой статье будет рассказано об одном из них.
Благодаря CSS-препроцессорам, стало возможным писать лаконичный CSS-код без постоянного повторения одних и тех же свойств.
К тому же, получившийся код отформатирован гораздо приятнее. Вы можете выполнять вычисления и создавать динамические стили, используя один из таких методов препроцессинга.
Доступны два основных варианта: SASS и LESS . В данной статье, я расскажу о SASS .
Можно использовать только CSS, но при разработке больших многостраничных сайтов, у вас, скорее всего, появится желание получить от этой технологии возможности, которых она не имеет.
Давайте рассмотрим слабые места использования «чистого » CSS:
Стандартный CSS не может дать вам ничего, кроме неудобств, в то время как использование методов препроцессинга может сохранить вам много времени и сил.
Взгляните теперь на список преимуществ использования препроцессоров:
SASS расшифровывается как Syntactically Awesome Style Sheets – если переводить дословно, то это звучит как: «Синтаксически потрясающие таблицы стилей ».
Эта технология была придумана и воплощена Хэмптоном Катлином (Hampton Catlin ). SASS манипулирует CSS-правилами, используя переменные, так называемые миксины (mixins ), наследование и вложенность.
Исходные и скомпилированные файлы имеют расширения .sass и .scss , соответственно. Исходники переводятся в хорошо отформатированный CSS-код с помощью командной строки или веб-плагина.
SASS упрощает написание CSS-кода и позволяет динамически им манипулировать. Это отличный способ создания более функциональных CSS-кодов, который позволяет ускорить выполнение ежедневной работы веб-разработчиков и дизайнеров.
Перед началом рассказа о том, как использовать SASS , сравним форматы расширений .sass и .scss , генерируемых SASS . Для начала я представлю вам простой CSS-код, а затем покажу, как его упростить с помощью обоих расширений SASS .
Для исходного примера я использовал тег header и присвоил нулевое значение свойствам margin и padding , а затем прописал белый цвет для свойства color :
header { margin: 0; padding: 0; color: #fff; }
Чтобы написать приведенный выше пример в формате .scss , мы будем использовать переменную $color и дадим ей шестнадцатеричное значение: #fff , которое соответствует белому цвету.
$color: #fff; header { margin: 0; padding:0; color: $color; }
Для .sass мы имеем такую же переменную и значение, как и для .scss , но точки с запятой и фигурные скобки не используются.
Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS :
$color: #fff header margin: 0 padding: 0 color: $color
Чтобы опробовать SASS , вам нужно скачать Ruby . Запустите программу установки и, выбрав в появившемся окне подходящий язык интерфейса, нажмите OK :
После этого, произведите установку в желаемое место на жестком диске и убедитесь, что выбрана радио-кнопка «Add Ruby executables to your PATH ». Нажмите кнопку «Install » и установка завершена:
Теперь, у вас на компьютере установлен Ruby и пришло время проверить его работоспособность. Откройте командную строку и введите ruby -v .
Команда должна возвратить текущую версию и дату установленного Ruby. Если возвращена ошибка, то значит Ruby был установлен некорректно, либо переменные окружения Ruby не были зарегистрированы:
Чтобы установить SASS , откройте командную строку и введите gem install sass , после этого вы должны получить сообщение об успешном окончании установки:
Перед тем, как вплотную заняться копанием в недрах SASS , нам нужно подготовить некоторые необходимые файлы.
Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS , создайте HTML-файл, дав ему имя index.html .
Поместите в него следующий код:
Простой текстовый параграф
Еще один параграф с текстом
Теперь, для файла SASS , создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss .
Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:
Чтобы преобразовать код SASS в CSS, мы будем использовать команду –watch , которая выполнит компиляцию.
Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS -файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss , чтобы убедиться, что все работает.
Скопируйте и вставьте следующий SASS -код в файл stye.scss , созданный вами в папке SASS :
$myMargin: 0px auto; $myColor: red; $myWidth: 600px; h1 { color: $myColor; $myMargin: $margin; }
Первое слово представляет текущее положение файла .scss , а второе – расположение выходного файла. Убедитесь, что вы подключили сконвертированный CSS-файл к вашей HTML-странице:
Переменные SASS объявляются с предваряющим их название символом $ и записываются аналогично CSS-свойствам. С помощью SASS , вы можете определять переменные для таких стилей, как font size , margin , padding и так далее.
Использование переменных дает вам возможность повторного использования заданных ранее значений.
В SASS существует шесть разных типов переменных:
Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:
Запустив этот код в браузере, вы получите следующее:
SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.
В качестве примера, рассмотрим следующий код:
#container p { font-family: Arial; font-size: 13px; } #container h1 { font-family: Tahoma; font-size: 15px; } #container h2 { font-family: Helvetica; font-size: 14px; }
Для SASS , код будет выглядеть следующим образом:
$myFontsize1: 13px; $myFontsize2: 18px; $myFontsize3: 25px; $myWidth: 500px; $myMargin: 0px auto; #container { width: $myWidth; margin: $myMargin; p { font-family: Arial; font-size: $myFontsize1; } h1 { font-family: Tahoma; font-size: $myFontsize3; } h2 { font-family: Helvetica; font-size: $myFontsize2; } }
Обратите внимание, что мы расположили все стили элементов под идентификатором container , вместо того, чтобы предварять этим id каждый из них.
Если вы запустите этот код в браузере, то увидите следующую картину:
Миксины позволяют вам определять общие свойства, а затем использовать их повторно, то есть это реализация наследования. Миксины определяются с помощью директивы @mixin и включают в себя блок кода, который затем можно использовать с помощью директивы @include .
Давайте попрактикуемся. Скопируйте приведенный ниже код в свой файл style.scss :
@mixin border { border: 1px solid red; } #container { width: 960px; margin: 0 auto; @include border; }
Как вы можете видеть, мы использовали директиву @mixins , чтобы создать стиль для свойства border , а затем включили его в стиль идентификатора container с помощью директивы @include .
Если вы запустите данный код в браузере, то увидите следующее:
Возможность выполнения математических операций, это одно из преимуществ препроцессоров наподобие SASS , которым не обладает «чистый » CSS. Благодаря этой возможности, вы можете создавать более сложный и динамичный код.
Давайте посмотрим, как это работает. Откройте свой файл style.scss и вставьте в него код, представленный ниже:
$myColor: #aa30ff; $myPadding: 20px; $thickness: 1px; $border: solid red; #samplepara{ color: $myColor; padding: $myPadding+30; } #list1 { color: $myColor; border: $thickness+5 $border; }
Как видите, мы выполнили некоторые математические вычисления, добавив 30px к значению свойства padding , а также увеличили толщину border на 5px.
Если вы запустите этот пример в браузере, то увидите следующую картину:
SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.
Взгляните на их список ниже:
Для того чтобы подробно изучить, как работать с функциями, обратитесь к документации SASS .
А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.
Откройте свой файл style.scss и вставьте туда следующий код:
$myColor: #202020; $myBackground: #e6e6e6; body { background: darken($myBackground, 20%); } h1, h2 { color: lighten($myColor, 40%); }
Результатом этого примера будет затемнение цвета в переменной $myBackground на 20% с помощью соответствующей функции. Далее, в этом же примере, заголовки H1 и H2 осветляются на 40% соответствующей функцией.
После запуска данного примера в браузере вы увидите примерно следующую картину:
Одной из мощных функций SASS является наличие опций, позволяющих управлять форматированием кода .scss -файлов при конвертации их в обычный CSS.
Используя опцию -style , мы можем выполнить форматирование скомпилированного CSS-кода. Далее описывается имеющиеся в SASS стили форматирования.
Вложенный стиль это формат по умолчанию. Он задает отступы для всех стилей в выходном CSS-файле.
Чтобы увидеть его в действии, скопируйте и вставьте код, приведенный ниже в свой файл style.scss , а затем откройте командную строку и убедившись, что вы внутри директории SASS , введите SASS –update style.scss .
Эта команда обновит форматирование для уже скомпилированных CSS-стилей через командную строку:
Статьи по теме: | |
Черный властелин: обзор и тестирование смартфона Samsung Galaxy S4 Black Edition Галакси с4 блэк эдишн отзывы
Корейский гигант Samsung не нуждается в представлении – ныне это один из... Для чего нужны EasyBCD и UltraISO
О том, чего ожидать пользователям от новой операционной системы Windows... Устранение неполадок центра обновления Windows
Здравствуйте админ, у меня ноутбук с установленной Windows 8, вот думаю... |