Вашей программе нужно немного Sass

Sass (сокращение от Syntactically Awesome Style Sheets) — это альтернативный вариант оформления ваших программ. Проще говоря, это способ усилить ваш CSS и сделать его более похожим на традиционный язык программирования. Есть два способа написать синтаксис для sass. Вы можете написать его в форме с отступом, чтобы использовать отступ для разделения блоков кода и символов новой строки для разделения правил. Если вы используете этот синтаксис, вам нужно будет работать с файлом с расширением .sass. Более новая версия — «SCSS» (Sassy CSS). SCSS использует блоки, подобные CSS. Он использует фигурные скобки для обозначения блоков кода и точку с запятой для разделения правил внутри блока. SCSS требует, чтобы ваш файл заканчивался расширением .scss.

Некоторые из функций, которые делают sass знакомым программистам, — это переменные, вложенность, примеси и наследование селекторов.

Переменные

Когда мне рассказали о sass, меня сразу же заинтересовал тот факт, что он может хранить переменные. Это то, что спасло мне жизнь в моем последнем проекте, позволив мне сохранить определенный золотой цвет, который я хотел использовать на протяжении всего проекта. SassScript поддерживает четыре типа данных: числа, строки, цвета и логические значения.

Переменные начинаются со знака доллара ($) и заканчиваются двоеточием (:).

$primary-color: #3bbfce;

Вложение

Sass также позволяет вкладывать логику. Это позволяет вам объявить стиль для родительского элемента, а затем, при необходимости, ввести любой стиль для дочерних элементов в том же блоке. Как вы можете видеть ниже, вы можете стилизовать братьев и сестер аккуратно и организованно.

#navigation-bar {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Частицы и модули

Чтобы избежать повторяющегося и утомительного кода CSS, вы можете написать кусок кода в другом файле и обращаться к нему всякий раз, когда это необходимо. Вы можете создать отдельный файл с символом подчеркивания перед его именем и расширением .scss ( _partial.scss ). Вы можете сделать партиал доступным как модуль с помощью «@use».

//inside _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
//inside your stylesheet
@use 'base';

.card {
  background-color: base.$primary-color;
  color: white;
}

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