Препроцессор SASS

Оцените материал
(0 голосов)

Здравствуйте! После того как мы рассмотрели работу с программой Koala, которая нужна для компиляции кода на препроцессорах SASS и LESS. Разберем как работать с препроцессором SASS.

Препроцессинг

Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS, например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.

Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.

Переменные

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS-файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Вложенности

При написании HTML, Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Вы заметили, что селекторы ul, li, и a являются вложенными в селектор nav? Это отличный способ сделать ваш CSS-файл более читабельным. Когда вы сгенерируете CSS-файл, то на выходе вы получите что-то вроде этого:

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, которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss. Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import.

Импорт

CSS имеет возможность импорта, которая позволяет разделить ваш CSS-файл на более мелкие и облегчить их в обслуживании. Но у этого способа есть весомый недостаток: каждый раз когда вы в CSS используете @import, то в CSS создается еще один HTTP-запрос. Sass берет идею импорта файлов через директиву @import, но вместо создания отдельного HTTP-запроса Sass импортирует указанный в директиве файл в тот, где он вызывается, т.е. на выходе получается один CSS-файл, скомпилированный из нескольких фрагментов.

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
// base.scss

@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Обратите внимание на то, что мы используем @import 'reset'; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss. Sass — умный язык и он сам догадается. Когда CSS сгенерируется вы получите:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Миксины (примеси)

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Для создания миксина используйте директиву @mixin + название этого миксина. Мы назвали наш миксин border-radius. Также, в миксине мы используем переменную $radius внутри скобок, тем самым позволяя себе передавать в переменной все, что захотим. После того, как вы создали миксин, вы можете его использовать в качестве параметра CSS, начиная вызов с @include и имени миксина. Когда ваш CSS скомпилируется вы получите следующее:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходов.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Вышеуказанный код позволяет взять свойства CSS из .message и применить их в .success, .error и .warning. Во время компиляции CSS-файла работает магия, которая поможет вам избежать написания лишних классов в HTML элементах. Результат выглядит вот так:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Математические операторы

.container { width: 100%; }
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Практический пример:

В своем файле HTML нам нужен лишь очень простой код и ссылка на файл CSS в папке CSS нашего проекта.

<!doctype html>
<html>
<head>
 
<meta charset="utf-8">
<title>Simple CSS3 Button</title>
<link rel="stylesheet" href="/css/style.css">
 
</head>
<body>
<div id="container">
 
<a class="button">Click Me!</a>
 
</div>
</body>
</html>
 

Вот и весь нужный нам HTML! Теперь перейдем к Sass. Войдите в любимый текстовый редактор и создайте новый файл, сохраните его в папку sass и назовите style.scss. Чтобы было проще, мы будем писать все в SCSS, который Sass тоже умеет обрабатывать, да и SCSS не очень-то строг с новичками. В начале своего файла мы напишем базовый сброс для HTML, импорт для Compass и пропишем переменные цвета для кнопки.

@import "compass";
//Простой сброс
body, div, a {
margin: 0;
padding: 0;
border: 0;
}
a {text-decoration: none;}
a:focus {outline: 0;}
//Переменные цвета
$button-colour: #2e6bc6;
$button-start: #37a0dc;
$button-stop: #2068a6;
$border: #163861;
$text-shadow: #06304b;
//Цвета при проведении мышью
$button-hover-colour: #2e7dc6;
$button-hover-start: #3f9ff0;
$button-hover-stop: #2874a9;
$focus-shadow: #0b3c5f;
//Основные стили
body {
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Вверху файла мы вызываем Compass, чтобы включить его в файл и попозже воспользоваться абстрактными классами. Кроме того, мы написали простой сброс и уже употребили одно свойство: переменные. Это дает нам возможность хранить значения, которые мы будем постоянно использовать в своем CSS, включая цвета, значения шрифтов и многие другие! Здесь я применяю их для хранения использованных в кнопке цветов и для упрощения из записи, а также для повторного использования в таблице стилей.

Назначение стилей кнопке

.button {
width: 158px; height: 30px;
margin: 120px auto;
font-size: 16px; font-weight: bold;
text-align: center;
display: block;
color: #fff;
padding: 7px 0 0;
border: 1px solid $border;
text-shadow: 0 -1px 0 $text-shadow;
position: relative;
}

Давайте назначим стили этой кнопке! Мы начнем с применения основных стилей к тэгу с классом button. Я установил здесь базовые стили кнопки, и обратите внимание на то, как я употребляю переменные.

А теперь перейдем к интересной части! Помните импорт Compass, помещенный в начале таблицы стилей? Здесь мы воспользуемся им, потому что у Compass есть большая библиотека встроенных классов, которые включают префиксы CSS3 для тех браузеров, которым все еще нужна префиксная поддержка.

.button {
width: 158px; height: 30px;
margin: 120px auto;
font-size: 16px; font-weight: bold;
text-align: center;
display: block;
color: #fff;
padding: 7px 0 0;
border: 1px solid $border;
text-shadow: 0 -1px 0 $text-shadow;
position: relative;
//Классы Compass
@include background(
$button-colour
linear-gradient(top, $button-start 20%, $button-stop)
);
@include border-radius(3px);
@include box-shadow(inset 0 1px 0 rgba(#fff, 0.8));
@include transition(all 0.3s ease);
}

После первоначального определения стилей мы можем включить несколько абстрактных классов для фоновых цветов, линейных градиентов, радиусов рамки и переходов. Лучше всего то, что все будет компилироваться только с нужными префиксами, и сэкономит нам на их написании время! Класс пока будет компилироваться в файле style.css в следующее:

.button {
width: 158px;
height: 30px;
margin: 120px auto;
font-size: 16px;
font-weight: bold;
text-align: center;
display: block;
color: #fff;
padding: 7px 0 0;
border: 1px solid #163861;
text-shadow: 0 -1px 0 #06304b;
position: relative;
background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6);
background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6);
background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6);
background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Написание стилей с вложенными элементами

Еще одной отличной чертой такого препроцессора, как Sass, является способность вкладывать элементы и прикреплять классы с родительским элементом, которому вы назначаете стили. Затем для работы это компилируется в необходимый CSS.

.button {
 
&:hover {
@include background(
$button-hover-colour
linear-gradient(top, $button-hover-start 20%, $button-hover-stop)
);
@include box-shadow(inset 0 1px 1px rgba(#fff, 0.95));
}
 
&:active {
@include background(
linear-gradient(bottom, $button-start 20%, $button-stop)
);
text-shadow: 0 1px 0px $text-shadow;
@include box-shadow(inset 0 2px 8px $focus-shadow);
 }
}

После стилей основной кнопки можно вложить селекторы псевдоклассов для состояний элемента :hover и :active, с помощью амперсанда, который будет говорить Sass, что это – вложенный класс, прикрепленный к родительскому элементу. В состоянии проведения мышью :hover можно добавить выразительности градиенту и внутренней тени, использовав абстрактные классы Compass, тогда как активное состояние :active переворачивает градиент и меняет тень блока так, что создается впечатление нажатия кнопки.

.button:hover {
background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9));
background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9);
background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9);
background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9);
background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9);
-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
-moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.button:active {
background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6);
background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6);
background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6);
background: linear-gradient(bottom, #37a0dc 20%, #2068a6);
text-shadow: 0 1px 0px #06304b;
-webkit-box-shadow: inset 0 2px 8px #0b3c5f;
-moz-box-shadow: inset 0 2px 8px #0b3c5f;
box-shadow: inset 0 2px 8px #0b3c5f;
}

Выше показано, что получается после того, как состояния :active и :hover компилируются в Sass’е; они написаны, как селекторы псевдоклассов к родительскому элементу в действенном CSS, а также нужный нам CSS, дополненный альтернативами, для завершения нашей кнопки с тремя состояниями.

Файл style.scss и скомпилированная таблица стилей

Вот и все, что имеется во всем нашем файле style.scss, потому что он организован, написан просто и содержит абстрактные классы и переменные, которые проделывают часть работы за нас, а потом компилируются в окончательный файл таблицы стилей style.css.

 

Прочитано 924 раз Последнее изменение Воскресенье, 25 декабря 2016 12:40
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+