SASS для Начинающих: SASS Переменные

SASS переменные очень полезны в больших проектах. Вы можете задать значение и использовать его множество раз, и при изменении переменной, значение будет автоматически меняться в местах, где она была использована. Если вы уже знакомы с каким-нибудь языком программирования, то наверняка уже знаете, что такое перменная и принцип её работы.

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

SASS переменные

Названия переменных в SASS начинаются с символа $,  а значение представляет собой желаемое значение CSS для этой переменной. Давайте добавим несколько переменных в верхнюю часть нашего style.scss файла:

// Color
$theme:#2196f3;
$text-dark:#333;
$text-medium:#666;
$text-light:#999;

// Font size
$title:30px;
$sub-title:20px;
$para:14px;
$label:12px;

Это простой пример того, как можно задавать SASS переменные. Здесь определена переменная для основного цвета или цвета бренда ($theme), которая может быть использована где угодно.

Три цвета текста определены как $text-dark, $text-medium и $text-light. Вы можете давать им любые короткие и понятные названия. Здесь также заданы 4 размера шрифта, которые мы используем позже.

Теперь дайте воспользуемся этими переменными. Для начала, создадим HTML, которые мы будем стилизировать с помощью SASS:

<header>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
      </nav>
    </header>
    <main>
      <h1>SASS Variables</h1>
      <p>This SASS tutorial for absolute beginners.</p>
      <h3>What you will learn?</h3>
      <ul>
        <li>Variables</li>
        <li>Mixins</li>
        <li>Nesting</li>
        <li>Partials</li>
        <li>Import</li>
        <li>Inheritance</li>
        <li>Operators</li>
      </ul>
  </main>

Теперь вставьте следующие стили в ваш style.scss файл сразу после переменных, которые мы добавили ранее:

header{
  background: $theme;
  height: 40px;
  padding: 0 15px;
}
header nav a{
  color: #FFF;
  text-decoration: none;
  line-height: 40px;
  display: inline-block;
  padding: 0 20px;
}
main h1{
  font-size: $title;
  color: $text-dark;
}
main p{
  font-size: $para;
  color: $text-medium;
}
main h3{
  font-size: $sub-title;
  color: $text-light;
}

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