SASS (SCSS) в картинках — Часть 2 | Zencoder


SASS (SCSS) в картинках – Часть 2

В предыдущей части данного обзора – “SASS в картинках – Часть 1” мы посвятили все время установке, настройке и примерам мониторинга “сладкой” парочки Ruby/SASS. Разобрались, как установить под Windows платформу Ruby и ее приложение SASS, в чем отличия между старой и новой версией синтаксиса SASS. Как запустить SASS для мониторинга редактируемых файлов или директорий.

В этой статье мы приступим к самому интересному – разбору вкусностей SASS. Что он может, как он это делает. И каким образом мы можем облегчить себе жизнь с помощью него. И начнем с самого простого, постепенно переходя к более сложному.

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

SASS “вводит” в состав CSS переменные, которых изначально в нем нет. Тем самым, язык стилевых правил постепенно превращается в более-менее полноценный язык программирования. Как и в обычном языке программирования, сначала объявляется переменная (с помощью спецсимвола $), задается ее имя и присваивается значение. Затем эта переменная используется в последующем коде путем вызова ее по имени. Одновременно с применением переменной в коде с ней можно производить простые арифметические операции: сложение, вычитание, умножение и деление.

Например, на рисунке ниже переменной $color присвоено значение цвета в HEX-формате. Далее в одном месте кода эта переменная применяется “как есть”, а в другом месте из значения переменной вычитается еще одно число в этом же формате. В результате цвет получается темнее на заданное количество – очень удобно и быстро!

Переменные в SASS

Вложенность (Nesting)

Тут все просто – как вы обычно пишите правила CSS? Наверное, так:

1
2
3
4
5
6
7
8
  h1{
      fontsize: 12px;
      color: #ccc;
    }
    h1 a{
      textdecoration: none;
      color: #ddd;
    }

То есть, пишем, что заголовку первого уровня присвоить свойства – кегль и цвет шрифта. Ссылке, вложенной в этот заголовок, присваиваем свойства – убираем подчеркивание и задаем свой цвет.

Теперь напишем этот же код на SASS (SCSS):

1
2
3
4
5
6
7
8
h1{
      fontsize: 12px;
      color: #ccc;
      a{
        textdecoration: none;
        color: #ddd;
    }
  }

Вот в чем “фокус” – на SASS (SCSS) мы пишем код так, как видим. Смотрим HTML-код – ссылка вложена в тег h1. Поэтому, в SASS-коде так и “рисуем” – внутри селектора h1 помещаем селектор a, говоря тем самым SASS, что тег a вложен в тег h1. После конвертации в CSS-код у нас получиться точно такой код, как в первом примере (где представлен CSS-код).

Вложенность селекторов в SASS

В SASS вложенность (nesting) бывает двух типов: вложенность селекторов (рассмотренная выше) и вложенность свойств, которую мы рассмотрим сейчас.

Вложенность свойств – это почти тоже самое, что и первый случай. Разница лишь в том, что применяется она к CSS-свойствам, а не селекторам. Ее удобно использовать для сложносоставных свойств, таких как font. Например, на CSS мы бы написали так:

1
2
3
4
5
6
7
8
  h1{
    fontsize: 30px;
    fontstyle: italic;
    fontweight: bold;
    fontfamily: Arial, sansserif;
    color: #ccc;
    paddingleft: 10px;
  }

На SASS (SCSS) этот же код мы напишем так:

1
2
3
4
5
6
7
8
9
10
  h1{
      font: {
        size: 30px;
        style: italic;
        weight: bold;
        family: Arial, sansserif;
      }
    color: #ccc;
    paddingleft: 10px;
  }

 

Вложенность свойств на SASS

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

С помощью наследования можно значительно сократить код и ускорить его написание. Принцип также прост – если для одного элемента задан набор свойств, то можно для другого элемента указать наследовать эти же самые свойства. Наследование в SASS (SCSS) выполняется с помощью директивы @extend.

Например:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  h1{
      font: {
        size: 30px;
        style: italic;
        weight: bold;
        family: Arial, sansserif;
      }
    color: #ccc;
    paddingleft: 10px;
  }
  h2{
    @extend h1;
    color: #aaa;
  }

 

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

Parent

Не знаю, как переводиться данная фича в SASS, но в примере кода она очень понятна – может, и нет смысла искать ее перевод? Если кто изучал Javascript & jQuery, то знает о таком символе – &. Его можно перевести как “этот”. Давайте посмотрим код, и все сразу станет ясно:

SASS Parent

Видим, что в коде для ссылки прописаны свойства. И в этом же правиле прописано правило для hover. Так вот, чтобы не писать конструкции типа a, a:hover – запишем a, &:hover. Если описать это простым языком, то “этому же элементу присвоить правило при псевдоклассе :hover”.

Функции SASS

Когда мы рассматривали переменные, то упомянули об арифметических операциях над значением переменных. Иногда это удобно, а иногда нет. В SASS имеется достаточно большой набор функций, предназначенных для самых разнообразных задач. Ознакомиться с их полным перечнем можно по адресу sass-lang.com/docs/yardoc/Sass/Script/Functions.html:

Функции SASS

К примеру, у нас в коде имеется правило задания цвета для ссылки. А также есть правило, по которому ссылка изменяет цвет по наведению на нее курсора мыши. На SASS (SCSS) такой код можно написать так:

1
2
3
4
5
6
  a{
      color: #ddd;
    }
    a:hover{
      color: darken(#ddd, 30%);
    }

То есть, берем функцию darken() и передаем ей в качестве аргументов два значения – первоначальный цвет и величину в процентах, на которую необходимо затемнить цвет. Ну просто очень удобно и быстро!

Функция затемнения цвета в SASS

Подмешивания (Mixin)

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

Если сказать простым языком, то mixin – это большой кусок CSS-кода, который можно применять бесконечное число раз. Так же как и переменные, mixin сначала объявляется с помощью директивы @mixin и задается имя для него. Затем в теле подмешивания прописываются CSS-правила, при этом одновременно можно использовать переменные в этих правилах.

После объявления mixin его подключают в нужном месте кода с помощью директивы @include. Удобство применения подмешиваний заключается в том, что не нужно каждый раз писать один и тот же код в разных местах. Достаточно прописать всего одну строчку – “вставить такой кусок кода здесь”:

Подмешивания в SASS

Интерполяция (Interpolation)

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

Интерполяция в SASS

(На картинке закралась ошибка. Конечно же, переменной $top в названии свойства border не существует. На ее месте должна стоять переменная $vert).

Подмешивания (mixin) с аргументами

Ранее мы познакомились с функциями без аргументов (mixin). Но это был простой пример. На самом деле, функции (mixin) в SASS могут иметь аргументы, которые они принимают в качестве параметров. Например, рассмотрим такой рисунок:

Функции с аргументами в SASS

Видим, что в начале кода объявлена функция (mixin) с именем corners. В качестве аргументов она принимает три переменные – $vert, $hor, $radius. Значения переменных $vert и $hor передаются в тело функции как интерполяция, а значение переменной $radius подставляется в качестве значения CSS-свойства border.

В результате можно очень легко и быстро изменять вид и значение CSS-свойства: border-top-left: 8px, border-bottom-left: 8px, border-top-right: 8px, border-top-right: 8px и так далее.

Далее в коде подключается (вызывается) функция corners с помощью директивы @include. При вызове этой функции ей передаются аргументы:

1
2
  @include corners(top,left,15px);
  @include corners(bottom,right,35px);

В результате обработки этих аргументов функцией corners получиться следующий CSS-код:

1
2
  bordertopleft: 15px;
  borderbottomright: 35px;

Фантастика! )) Ну что же, на этом можно закончить обзор того, что умеет SASS (SCSS). Я думаю, что вы по достоинству оценили все преимущества данного языка и сразу же кинулись применять его на практике.

Вроде ничего не забыл… ))

Оцените статью:

(13 votes, average: 4,38 out of 5)

 

 

Меткой на: sass

 
Copyright © 2014 Zencoder Тема по: Theme Horse Создано: WordPress
 

http://zencoder.ru/sass-%d0%ba%d0%b0%d1%80%d1%82%d0%b8%d0%bd%d0%ba%d0%b0%d1%85-%d1%87%d0%b0%d1%81%d1%82%d1%8c-2/

Губарь Маргарита Александровна