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

Предыдущий урок: Скачивание и установка SASS

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

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

SASS переменные

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

// Цвета
$theme: #2196f3;
$text-dark: #333;
$text-medium: #666;
$text-light: #999;

// Размеры шрифта
$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 Переменные</h1>
    <p>Туториал по SASS для новичков.</p>
    <h3>Чему мы научитесь?</h3>
    <ul>
        <li>Переменные</li>
        <li>Миксины</li>
        <li>Вложенные стили</li>
        <li>Фрагменты</li>
        <li>Импорт</li>
        <li>Наследование</li>
        <li>Операторы</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 на красный цвет, тогда все элементы, для которых была использована эта переменная, будут окрашены в красный.

Следующий урок: Вложенные стили, фрагменты и импорт в SASS