Гостевой вход

Вы не залогинились
12:03

Введение в Sass для начинающих

Категория: Практикум

Метки: Sass
Для компиляции кода SASS для CSS есть несколько хороших приложений:

Hammer CodeKit Compass Koala

В этой статье процесс установки и компиляции sass рассматриваться не будет. Просто если хотите поэкспериментировать вместе, предлагаю воспользоваться онлайн-редактором, не требующим установки на ваш компьютер, например, таким как CodePad, ну или любым другим, какой вам нравится.

Прежде чем идти дальше, следует упомянуть о двух различных синтаксисах sass. Это всего лишь два разных способа написания кода. Оба на выходе выводят одно и то же. В данной статье используется синтаксис .scss

Variables (переменные)

Переменные эффективны, потому как позволяют быстро изменять код. При определении переменной мы сохраняем в ней определённые значения. Допустимые значения для переменных включают в себя числа, строки, цвета, null, списки и карты.
Чтобы объявить переменную в sass, вы ставите знак $, а далее следует имя переменной,в данном случае blue, затем двоеточие и затем значение этой переменной:

Код

$blue: #3498db;


Посмотрите на переменные в действии:

Код

/*
// We define the variables.
*/
$blue: #3498db;
$red: #e74c3c;
$background: #34495e;
   
/*
// We apply the variables.
*/
body {
  background-color: $background;
}
   
h1 {
  color: $blue;
}
   
p {
  color: $red;
}


Что компилируется в:

Код

body {
  background-color: #34495e;
}
   
h1 {
  color: #3498db;
}
   
p {
  color: #e74c3c;
}


Это базовый алгоритм использования переменных. Вы можете создать гораздо более продвинутый материал с переменными, но здесь мы подробно на этом останавливаться не будем.

Вложенность

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

Код

ul {
  list-style: none;
   
  li {
  padding: 10px;
  display: inline-block;
   
  a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  }
  }
}


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

Расширение / Наследование

Наследование - одна из самых полезных функций в sass, а использование расширения позволяет нам совместно использовать наборы свойств CSS от одного к другому. Это помогает нам не повторяться.

Расширение следует использовать, когда нам нужны элементы с аналогичным стилем, но которые все еще отличаются некоторыми деталями. Например, давайте сделаем две кнопки - первичную и вторичную.

Код

$blue: #3498db;
$red: #e74c3c;
$white: #fff;
   
.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: $white;
}
   
.btn-primary {
  @extend .btn;
  background-color: $blue;
}
   
.btn-secondary {
  @extend .btn;
  background-color: $red;
}


Компилируется это в:

Код

.btn, .btn-primary, .btn-secondary {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
}
   
.btn-primary {
  background-color: #3498db;
}
   
.btn-secondary {
  background-color: #e74c3c;
}


Видите, насколько мощная это функция? SASS объединил селекторы, вместо того, чтобы повторять снова и снова одни и те же объявления, сохраняя драгоценную память.

Микширование

Микширование - еще одна удивительная черта sass.

В принципе, микширование позволяет нам создавать группы объявлений CSS, которые мы хотим повторно использовать для нашего сайта. Мы можем передавать значения как аргументы, это позволяет нашему миксу быть более гибким.

Sass использует директиву @mixin для определения микса и директивы @include для их использования. Давайте построим простой базовый микс, с border-radius, который мы можем использовать для кнопок.

Код

/*
// We declare the mixin.
*/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
   
/*
// We apply it on our button.
*/
.btn {
  @include border-radius(4px);
}


Результат компиляции:

Код

.btn {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}


Это эффективный способ использования микширования, если для свойства требуется, чтобы префиксы работали во всех браузерах.

Итак, вот оно, основное введение в sass. Sass, как вы увидели, это очень мощный инструмент, который помогает нам делать действительно невероятные вещи.

Просмотров: 180 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

Онлайн статистика

18.11.2017

Суббота

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: