Препроцесор SSCS: змінні, вкладення

Sass (Syntactically Awesome Stylesheets) — це скриптова метамова, яка компілюється в звичайні CSS-стилі.

Препроцесор SСSS використовує:

змінні,
цикли,
міксини,
функції .

Особливості препроцесора SСSS:

читаність: синтаксис дуже схожий на CSS;
крива навчання: додається тільки кілька додаткових можливостей до CSS;
сумісність: CSS-файл є коректним SCSS-файлом;
ресурси: багато статей для читання і бібліотек з відкритим вихідним кодом для використання;
розширюваність: легко перейти від SCSS до Sass.

Можливості Sass

змінні: замість повторення #fce473 у всьому файлі CSS, просто встановити $yellow: #fce473 один раз;
вкладення: правила CSS можуть бути вкладені одна в одну;
домішки: призначені для користувача функції, які можуть приймати параметри і виключити непотрібні повтори;
розширення: найпростіший спосіб наслідувати однакові властивості іншого селектора;
оператори: додавання, віднімання, множення і ділення значень, на кшталт 960px / 4 або $space * 2.

Змінні в Sass

синтаксис: змінна починається зі знака долара ($):

$yellow: #fce473;

Цей рядок нічого не робить, крім визначення змінної, в даному випадку відтінку жовтого: значення # fce473 є змінною. Сенс імені $yellow залишається незмінним, але значення може змінитися.

Приклад:

$pink: #ff1493;
.quote { border-left: 5px solid $pink; }
.button { background: $pink; }
.sidebar a:hover { border-bottom-color: $pink; }
.footer a { color: $pink; }

Препроцесор зкомпіює це у код CSS таким чином:

.quote { border-left: 5px solid #ff1493; }


.button { background: #ff1493; }
.sidebar a:hover { border-bottom-color: #ff1493; }
.footer a { color: #ff1493; }

Якщо потрібно перейти на інший відтінок рожевого, то досить змінити один раз колір у змінній $pink

$pink: 
#c71585;

See the Pen scss-змінні by kravets (@raisa69) on CodePen.

Приклад:

А якщо потрібно використовувати не рожевий в якості основного кольору, а зелений, то потрібно визначити змінну $ green: # 32cd32 і замінити в CSS все $ pink на $ green

// Визначення значення кольору
$yellow: #fce473;
$pink: #c71585;
$green: #32cd32;
$blue: #1d90ff;
  
// Визначення основного кольору
$primary-color: $green;
  
.quote { border-left: 5px solid $primary-color; }
.button { background: $primary-color; }
.sidebar a:hover { border-bottom-color: $primary-color; }
.footer a { color: $primary-color; }

Замість безпосереднього посилання на змінну $green, визначається змінна для основного кольору, яка встановлюється як $green.

See the Pen scss-змінні основні by kravets (@raisa69) on CodePen.

Застосувати цей спосіб можна не тільки для кольорів:

// Колір
$yellow:              #fce473;
$pink:                #c71585;
$green:               #32cd32;
$blue:                #1d90ff;
  
$primary-color:       $blue;
$secondary-color:     $yellow;

// Шрифти
$serif:               "Lora", "Playfair Display", Georgia, serif;
$sans-serif:          "Roboto", "Source Sans Pro", "Open Sans", Arial, sans-serif;
$monospace:           "Inconsolata", monospace;
  
$primary-font:        $sans-serif;
$secondary-font:      $serif;

// Відстані
$mobile-space:        10px;
$desktop-space:       35px;

$blue: #3bbfce; /* колір */
$margin: 16px; /* відступ */
$fontSize: 14px; /* розмір тексту */

Вкладення в Sass (nesting)

У Sass правила вкладення CSS дозволяють визначити ієрархію селекторів:

SCSS

.title {
  strong {}
  em {}
}

Це буде скомпільовано в наступне:

CSS

.title {}
.title strong {}
.title em {}

Оскільки strong і em з'являються всередині правила .title (між двох фігурних дужок), то обидва вони будуть починатися з батьківського селектора .title.

Мета вкладення

Оскільки пріоритет в CSS може виявитися непростим, то при написанні селекторів зазвичай використовують специфічність, шляхом комбінації декількох класів або тегів, щоб заборонити взаємовиключні правила CSS

.description {}
.description p {}
.description p a {}
.description p a:hover {}
.description p strong {}
.description table {}
.description table tr {}
.description table tr:nth-child(2n) {}
.description table th,
.description table td {}
.description table td.empty,
.description table th.empty {}
.description table th {}

Щоб запобігти повторному написанню .description можна використовувати вкладення:

SCSS

description {
  p {}
  p a {}
  p a:hover {}
  p strong {}
  table {}
  table tr {}
  table tr:nth-child(2n) {}
  table th,
  table td {}
  table th {}
  table td.empty,
  table th.empty {}
}

В прикладі вище ще є повтори тегів p і table, тому вкладення можна поглибити:

.description {
  p {
    a {
      &:hover {}
    }
    strong {}
  }
  table {
    tr {
      &:nth-child(2n) {}
    }
    th,
    td {
      &.empty {}
    }
    th {}
  }
}

Відступи в Sass між батьківським селектором і його дочірнім дозволяють відтворити, як елементи HTML вкладені один в один.

// SCSS
.parent {
  .child {}
}
  
// перетворюється в CSS
.parent .child {}

Пропуск між .parent і .child визначає ієрархію: цей селектор націлюється на елементи HTML з class = "child" вкладені в class = "parent".

See the Pen scss-вкладеність by kravets (@raisa69) on CodePen.

Вкладеність властивостей

See the Pen scss-вкладені властивості by kravets (@raisa69) on CodePen.

Амперсанд батьківського селектора

Якщо потрібно в селекторах використати псевдокласи, то можна застосувати знак амперсанд:

// SCSS
.parent {
  &:hover {}
  &.other-class {}
}
  
// компілюється в CSS
.parent:hover {}
.parent.other-class {}

Увага! між .parent і : hover або .other-class немає пробілу.

За допомогою символу & можна явно вказати, де повинен бути вставлений батьківський селектор.

Приклад:

CSS

.post-content {}
.post-content a {}
.post-content a:hover {}
.post-content aside {}
.post-content blockquote {}
.post-content code {}
.post-content h3 {}
.post-content h3 a {}
.post-content h4 {}
.post-content h4:before {}
.post-content h4:after {}
.post-content p {}
.post-content p:first-child {}
.post-content p:last-child {}
.post-content ul {}
.post-content ul ul {}
.post-content ul ul ul {}
.post-content dl {}
.post-content dl:before {}
.post-content dl dt {}
.post-content dl dd {}
.post-content pre {}
.post-content pre code {}
.post-content table {}
.post-content table tr {}
.post-content table tr:nth-child(2n) {}
.post-content table th,
.post-content table td {}
.post-content table th {}
.post-content table td.empty,
.post-content table th.empty {}
.post-content table code {}
.post-content table pre {}
.post-content table pre:before {}

SCSS

.post-content {
  a {
    &:hover {}
  }
  aside {}
  blockquote {}
  code {}
  h3 {
    a {}
  }
  h4 {
    &:before {}
    &:after {}
  }
  p {
    &:first-child {}
    &:last-child {}
  }
  ul {
    ul {
      ul {}
    }
  }
  dl {
    &:before {}
    dt {}
    dd {}
  }
  pre {
    code {}
  }
  table {
    tr {
      &:nth-child(2n) {}
    }
    th,
    td {
      &.empty {}
    }
    th {}
    code {}
    pre {
      &:before {}
    }
  }
}

Pages