Полный гайд по scss/sass

Создание компонентов

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

Существует множество различных стратегий, но после многократных попыток их применения, я выбрал одну, которая лучше всего сработала для Devbridge Group — это стратегия компонентов. Компоненты — это независимые элементы, которые можно многократно использовать в различных местах. Это могут быть небольшие элементы, как, например, “Button”, “Input” или большие — например, “Article.” Главное — сделать их независимыми: не создавайте страницы или модули, зависящие от контента. Делайте так, чтобы они представляли объект, тип графического элемента или функцию и называйте их так, чтобы легко было понять, что они означают (избегайте сокращений, например, btn, frm, ppl, и т.д.).

Что касается структуры файлов: рекомендуется создавать один файл для одного компонента. Это вначале может показаться странным, но в итоге такой подход позволяет в будущем найти необходимый компонент намного быстрее. Воспринимайте файл как класс в ООП, или, если вы знакомы с ReactJS, как React компонент. Если же у вас сотни и тысячи небольших компонентов — создавайте папки. Например, вы можете положить все компоненты формы в папку /form-elements.

Другая проблема — инкапсуляция стилей. Иногда нужно сделать небольшие изменения — допустим, нужно сделать кнопку шире или выше. В таком случае, вы возможно захотите переопределить ее как “.my-custom-page .button”. Однако в дальнейшем такой подход может вызвать путаницу — вам будет тяжело поддерживать код с большим количеством переопределений. Вместо этого, измените сам компонент, например: “.button—large”.

Лучший способ придерживаться этого шаблона, на мой взгляд — это использовать стратегию именования CSS классов BEM (если вы не в курсе, что такое BEM, вы можете прочитать здесь). BEM хорошо подходит для Saas. Используя селектор & и вложенность, вы легко сможете сконструировать модули.

.article {
    width: 100px;
     
    &__title {
        font-size: 20px;
        font-weight: 500;
    }

    &--wide {
        width: 200px;
    }
}

Other Functions permalinkOther Functions

In addition to user-defined function, Sass provides a substantial core library of built-in functions that are always available to use. Sass implementations also make it possible to define in the host language. And of course, you can always call (even ones with weird syntax).

Plain CSS Functions

Any function call that’s not either a user-defined or built-in function is compiled to a plain CSS function (unless it uses ). The arguments will be compiled to CSS and included as-is in the function call. This ensures that Sass supports all CSS functions without needing to release new versions every time a new one is added.

️ Heads up!

Because any unknown function will be compiled to CSS, it’s easy to miss when you typo a function name. Consider running a CSS linter on your stylesheet’s output to be notified when this happens!

Функция «Если» в Excel

Trigonometric Functions permalinkTrigonometric Functions

Dart Sass

since 1.25.0

LibSass

✗

Ruby Sass

✗

Returns the of .

must be an angle (its units must be compatible with ) or unitless. If has no units, it is assumed to be in .

Dart Sass

since 1.25.0

LibSass

✗

Ruby Sass

✗

Returns the of .

must be an angle (its units must be compatible with ) or unitless. If has no units, it is assumed to be in .

Dart Sass

since 1.25.0

LibSass

✗

Ruby Sass

✗

Returns the of .

must be an angle (its units must be compatible with ) or unitless. If has no units, it is assumed to be in .

Dart Sass

since 1.25.0

LibSass

✗

Ruby Sass

✗

Returns the of in .

must be unitless.

Dart Sass

since 1.25.0

LibSass

✗

Ruby Sass

✗

Returns the of in .

must be unitless.

Dart Sass

since 1.25.0

LibSass

✗

Ruby Sass

✗

Returns the of in .

must be unitless.

Dart Sass

since 1.25.0

LibSass

✗

Ruby Sass

✗

Returns the 2-argument arctangent of and in .

and must have compatible units or be unitless.

Fun fact:

is distinct from because it preserves the quadrant of the point in question. For example, corresponds to the point and returns . In contrast, and resolve first to , so both return .

Рекорд по смешанным единоборствам

Преимущества Sass

• Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
• Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
• Sass — это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
• Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков — Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
• Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе — упрощенный (SASS) и развернутый CSS-подобный (SCSS).

Когда я только знакомился с CSS препроцессорами, мне, как и многим другим начинающим веб-разработчикам, была не до конца понятна сама идея использования CSS препроцессоров. Зачем делать дополнительную прослойку, использовать какие-то инструменты, усложнять CSS, думал я. Но со временем начал понимать, что изо дня в день написание CSS становилось пыткой, серой рутиной, многие действия приходилось повторять, копировать селекторы, свойства и даже целые блоки CSS кода для достижения необходимого результата. Сегодня, на примерах, я покажу вам, как можно упростить работу, используя препроцессор Sass, разнообразить разработку и даже немного поразвлечься при написании каких-то более или менее сложных функций.

SassScript

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

2.1 Переменные в Sass

Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.

$accent: #FF9910

.button
	background-color: $accent
	color: #fff

.button {
	background-color: #FF9910;
	color: #fff;
}

2.2 Операции с числами и строками + интерполяция

Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения (<, >, <=, >=, ==, !=) также поддерживаются для чисел.

Кроме того, в Sass есть возможность конкатенировать (соединять) строки.

$summ: 10 + 20 / 2
$cn: content

.selector
	margin:
		top: $summ + px
		bottom: 12px + 8px
	background-color: trans + parent
	#{$cn}: "con" + "tent"

.selector {
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: transparent;
	content: "content";
}

Как видим из примера $summ: 10 + 20 / 2, соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике

Обратите внимание, что при сложении 12px + 8px, мы получим 20px

Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке. Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:

Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:

$in: интер

.interpol
	content: "#{$in}поляция"

.interpol {
	content: "интерполяция";
}

2.3 Операции с цветами

Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.

$color1: #440203 + #550506
$color2: #010203 * 2
$color3: rgba(180, 0, 0, 0.75) + rgba(20, 255, 0, 0.75)

body
	background-color: $color1
	color: $color2
	border-color: $color3

body {
	background-color: #990709;
	color: #020406;
	border-color: rgba(200, 255, 0, 0.75);
}

$translucent-red: rgba(255, 0, 0, 0.5);

p
	color: opacify($translucent-red, 0.3)
	background-color: transparentize($translucent-red, 0.25)

.selector
	background-color: rgba(#333, 0.75)

p {
	color: rgba(255, 0, 0, 0.8);
	background-color: rgba(255, 0, 0, 0.25);
}

.selector {
	background-color: rgba(51, 51, 51, 0.75);
}

Переменные

Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS, которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ . Рассмотрим пример:

CSS Output

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

Как правильно пишется, ударение в слове «поставленная задача»

Значение слова «поставить»

ПОСТА́ВИТЬ, -влю, -вишь; сов., перех.

Все значения слова «поставить»

Зада́ча — проблемная ситуация с явно заданной целью, которую необходимо достичь; в более узком смысле задачей также называют саму эту цель, данную в рамках проблемной ситуации, то есть то, что требуется сделать. В первом значении задачей можно назвать, например, ситуацию, когда нужно достать предмет, находящийся очень высоко; второе значение слышно в указании: «Ваша задача — достать этот предмет». Несколько более жёсткое понимание «задачи» предполагает явными и определёнными не только цель, но и условия задачи, которая в этом случае определяется как осознанная проблемная ситуация с выделенными условиями (данным) и требованием (целью). Ещё более узкое определение называет задачей ситуацию с известным начальным состоянием системы и конечным состоянием системы, причём алгоритм достижения конечного состояния от начального известен (в отличие от проблемы, в случае которой алгоритм достижения конечного состояния системы не известен).

Все значения слова «задача»

Предложения со словосочетанием «поставленная задача»:

• Наш войсковой подвоз, и ранее не справлявшийся с поставленными задачами, вовсе «захлебнулся».

• Им была поставлена задача — обнаружить бойцов штурмовой группы ещё на подходе, до проникновения в самолёт.

• Параллельно им была поставлена задача по патрулированию воздушного пространства в районе аэродрома.

(все предложения)

Приступим!

Пока вы хотя бы раз не попробуете сгенерировать значения для свойств с помощью цикла, вы не познаете настоящую мощь Sassy CSS. Но мы начнём с основ SCSS и постепенно доберёмся до самого интересного.

Что такого есть в Sass/SCSS, чего нет в стандартном CSS?

1. Вложенные правила: вы можете вкладывать CSS свойства, в несколько наборов скобок {}. Это сделает ваш CSS чище и понятней.
2. Переменные: в стандартном CSS тоже есть переменные, но переменные Sass куда более мощный инструмент. Например, вы можете использовать переменные в циклах и генерировать значения свойств динамически. Также можно внедрять переменные в имена свойств, например так: property-name-N { … }.
3. Лучшая реализация операторов: вы можете суммировать, вычитать, делить и умножать CSS значения. Sass реализация более интуитивна, чем стандартный функционал CSS calc().
4. Функции: Sass позволяет многократно использовать CSS стили, как функции.
5. Тригонометрия: помимо базовых операций (+, -, *, /), SCSS позволяет писать собственные функции. Например, функции sin и cos можно написать, используя только синтаксис Sass/SCSS. Конечно, вам понадобятся знания тригонометрии. Такие функция могут понадобится для создания анимации.
6. Удобный рабочий процесс: вы можете писать CSS, используя конструкции, знакомые по другим языкам: for-циклы, while-циклы, if-else. Но имейте в виду, это только препроцессор, а не полноценный язык, Sass контролирует генерацию свойств и значений, а на выходе вы получаете стандартный CSS.
7. Миксины: позволяют один раз создать набор правил, чтобы потом использовать их многократно или смешивать с другими правилами. Например, миксины используют для создания отдельных тем макета.

Препроцессор Sass

Sass не динамичный язык. Он не позволяет генерировать или изменять CSS свойства и значения в реальном времени. Но вы можете генерировать их более эффективным способом и внедрять в стандартные свойства (например, для CSS анимации).

Новый синтаксис

SCSS на самом деле не добавляет ничего нового в сам язык CSS. Это просто новый синтаксис, который в большинстве случаев сокращает время написания стилей.

Несколько фактов для начала

CSS препроцессоры добавляют новый синтаксис в CSS.

Существует 5 CSS препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Здесь я буду говорить в основном о SCSS, который схож с Sass. О Sass можно почитать здесь: .

• SASS (.sass) Syntactically Awesome Style Sheets.
• SCSS (.scss) Sassy Cascading Style Sheets.

Обратите внимание на расширения, они схожи, но отличаются. Для любителей командной строки, есть возможность конвертировать .sass в .scss и наоборот:. Конвертация форматов .scss и .sass

Используем команду sass-convert

Конвертация форматов .scss и .sass. Используем команду sass-convert.

Sass — это первая спецификация Sassy CSS, её разработка началась в 2006 году. Позже разработали альтернативный синтаксис, который некоторые считают лучшей версией языка, а также изменилось первоначальное расширение .sass на новое .scss.

На данный момент ни один браузер не поддерживает CSS препроцессоры напрямую. Вы можете свободно экспериментировать с любым из 5 препроцессоров на сервисе codepen.io. Кроме того, используя препроцессор, вы должны будете установить его к себе на веб-сервер.

Эта статья о SCSS, но другие препроцессоры имеют схожие функции, хотя синтаксис может отличаться.

Superset

Sassy CSS в любом своём проявлении является «расширением» языка CSS, а значит, всё что работает в CSS, работает и в Sass/SCSS.

Переменные

В Sass/SCSS есть переменные, и они отличаются от тех, которые вы вероятно видели в CSS — они начинаются с двух тире (). В SCSS переменная обозначается знаком доллара ().

Определение переменных

Вы можете перезаписать имя переменной или задать для неё значение по умолчанию. Для этого добавьте метку !default к переменной, и если её значение не изменится в дальнейшем и не будет пустым, то будет использоваться заданное значение по умолчанию.

В примере выше окончательным значением переменной $text будет “Piece of string.”, а не “Another string.”, потому что переменная не пуста.

Sass переменные можно назначить любому свойству CSS

Сравнение SASS и LESS:

Теперь перейдём к самому сравнению этих двух технологий.

Подробнее о каждом:

SASS (Syntactically Awesome Stylesheets) — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Был создан в 2006 году, не большой командой разработчиков, но главный автор этого языка Хамптон Катлин (англ. Hampton Catlin).

Также стоит упомянуть, что у SASS есть два синтаксиса, что может показаться на первый взгляд удобно, но об этом ниже

LESS (Leaner Style Sheets, компактная таблица стилей)— это динамический язык стилей. Он создан под влиянием языка стилей SASS, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS.

Этот язык был создан в 2009 году, силами человека по имени Алексис Селье (англ. Alexis Sellier).

Также надо сказать, что сейчас его разработка прикрашена, ещё в 2016 году, но зато он перерос практически в отдельную JavaScript библиотеку, что усложнит его использование не подготовленному человеку, то есть не знающего JS.

Синтаксис:

Как говорилось выше у SASS есть два синтаксиса, первый это стандартный который был изначально, но он на мой взгляд не удобный и не понятный сразу, поэтому буду использовать второй, который был создан под влиянием LESS, называется SCSS.

Для LESS всё стандартно, покажу как использовать именно в обычно LESS, без JavaScript.

Попытаемся сделать эту картинку.

Сначала посмотрите как сделать это на SASS со синтаксисом  SCSS.

Sass

Теперь LESS.

LESS

Как можете заметить, в LESS программа на две строчки больше, что не значительно, когда нужно сверстать совсем не много, но может быть существенно во время вёрстки целого шаблона.

Также, на личный взгляд SASS более простой, за счёт наличия подобии функции, как в других языках программирования, да и вообще его синтаксис не много напоминает обычные языки программирования.

Работа:

Самое главное, это сколько вакансий можно найти по каждой технологии.

SASS всего 223 вакансии, что не так много, как я думал на момент 4 Января 2020 года, LESS же 283 вакансии, что в больше, это всё по Москве.

Но надо сказать, что это не имеет большого значения что вы изучите в начали, так как, эти технологии достаточно простые и много времени не займёт их изучение.

Scope permalinkScope

Variables declared at the top level of a stylesheet are global. This means that they can be accessed anywhere in their module after they’ve been declared. But that’s not true for all variables. Those declared in blocks (curly braces in SCSS or indented code in Sass) are usually local, and can only be accessed within the block they were declared.

Shadowing

Local variables can even be declared with the same name as a global variable. If this happens, there are actually two different variables with the same name: one local and one global. This helps ensure that an author writing a local variable doesn’t accidentally change the value of a global variable they aren’t even aware of.

If you need to set a global variable’s value from within a local scope (such as in a mixin), you can use the flag. A variable declaration flagged as will always assign to the global scope.

️ Heads up!

Dart Sass

since 2.0.0

LibSass

✗

Ruby Sass

✗

Older Sass versions allowed to be used for a variable that doesn’t exist yet. This behavior was deprecated to make sure each stylesheet declares the same variables no matter how it’s executed.

The flag may only be used to set a variable that has already been declared at the top level of a file. It may not be used to declare a new variable.

Flow Control Scope

Variables declared in flow control rules have special scoping rules: they don’t shadow variables at the same level as the flow control rule. Instead, they just assign to those variables. This makes it much easier to conditionally assign a value to a variable, or build up a value as part of a loop.

️ Heads up!

Variables in flow control scope can assign to existing variables in the outer scope, but they can’t declare new variables there. Make sure the variable is already declared before you assign to it, even if you need to declare it as .

Синтаксис Sass

Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass — это синтаксис отступов. Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса — *.sass. Второй вариант — это синтаксис, расширяющий синтаксис CSS, Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом — *.scss.

SASS и SCSS синтаксис:

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
	font: 100% $font-stack
	color: $primary-color

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
	font: 100% $font-stack;
	color: $primary-color; }

Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import, например, если вы скачали файл carousel.scss, то можете подключить его в ваш main.sass строкой @import «carousel». Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass, где x.x — это номер заголовка примера из данной статьи.

Мы будем использовать синтаксис отступов.

CSS vs. SCSS селекторы.

#main {color: #999;}#main .content {color: #bfbfbf;}

CSS отрывок выше, может быть написан в SCSS таким образом:

#main{color: #999;.content{ color: #bfbfbf;}}

Как мы можем видеть, SCSS структура более схожа с DOM структурой. Это позволяет нам организовать наш CSS более эффективно. Вот примеры:

#main h1 {color: #00ff00;width: 97%;.title {background-color: #ff0000;color: #000000;}}

Будет скомпилировано в:

#main h1 {color: #00ff00;width: 97%;}#main h1 .title{background-color: #ff0000;color: #000000;}

Ссылаясь на родительский селектор:

#wrapper h1{width:20px;&:hover{width:25px;}}

& будет заменен родительским селектором. То есть код выше, будет эквиалентен:

#wrapper h1{width:20px;}#wrapper h1:hover{width:25px;}

Показатели и нормы гемостаза

При исследовании показателей разные лаборатории могут использовать различные методики. Так, норма скорости процесса коагуляции варьирует от 5-10 до 8-12 минут в зависимости от выбранной методики (по Ли-Уайту или по Масс и Марго). Оценка соответствия результатов норме должна проводиться в соответствии с нормативами конкретной лаборатории.

Каждая норма коагулограммы и ее компонентов в таблице приведена без учета половозрастных показателей и индивидуальных особенностей. Для расшифровки показателей гемостаза необходимо обращаться к специалисту.

@while

$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i — 2;}

Скомпилируется в:

.item-6 { width: 12em; }.item-4 { width: 8em; }.item-2 { width: 4em; }

Миксины

Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной .

Рассмотрите следующий пример:

@mixin large-text {font: {family: Arial;size: 20px;weight: bold;}color: #ff0000;}.page-title {@include large-text;padding: 4px;margin-top: 10px;}

Скомпилируется в:

.page-title {font-family: Arial;font-size: 20px;font-weight: bold;color: #ff0000;padding: 4px;margin-top: 10px;}

Вы также можете использовать составные миксины, например как:

@mixin mixin-one{color: red;}@mixin mixin-two{width:20px;}.page-title {@include mixin-one;@include mixin-two;}

Вы также можете передавать переменные в миксинах:

$globel-prefixes:webkit moz ms o;@mixin prefixer ($property,$value,$prefixes:null){@if $prefixes==null{@each $prefix in $globel-prefixes {-#{$prefix}-#{$property}: $value; }} @else {@each $prefix in $prefixes {-#{$prefix}-#{$property}: $value;}}#{$property}: $value;}*{@include prefixer(box-sizing,border-box);}

Будет скомпилено в:

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}

Функции

Вы также можете определять функции, возвращающие значение. Для примера.

$no-of-columns:12;$gutter-width:2%;@function get-column-width($i){@return (100% — ($no-of-columns/$i — 1) * $gutter-width) / $no-of-columns * $i;}.col-6 {width:get-column-width(6);}

Будет скомпилировано в:

.col-6 {width: 49%;}

Расширения

Вы столкнетесь с ситуацией, когда вам нужно будет переиспользовать стили. Рассмотрите следующий пример:

<button class=”btn”>Normal</button><button class=”btn-blue”>Blue</button>

Оба будут иметь одинаковые стили, кроме цвета.

.btn{margin:10px;color:black;width:200px;height:100px;}.btn-blue{@extend .btn;background:blue;}

Это будет скомпилировано в:

.btn,.btn-blue{margin:10px;color:black;width:200px;height:100px;}.btn-blue{ background:blue; }

Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.

Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать перед селектором.

%btn{margin:10px;color:black;width:200px;height:100px;}.btn-blue{@extend %btn;background:blue;}.btn-red{ @extend %btn; background:red; }Будет скомпилировано в:.btn-blue{margin:10px;color:black;width:200px;height:100px;background:blue;}.btn-red{margin:10px;color:black;width:200px;height:100px;background:red;}

Локальные переменные и mixins

Переменные и mixins в Sass по умолчанию являются глобальными. Если вы определили $primary-color, то его значение можно использовать везде, что не всегда хорошо. Например, у вас есть статичное значение (фиксированная высота), и вы используете его только для самого компонента и его дочерних элементов. Первый способ (и не самый эффективный) — это записать значение в глобальную переменную. Такой подход в дальнейшем может сильно увеличить список глобальных переменных, которые к тому же будут очень специфичны.

Более эффективное решение — локальные переменные. Можно задать переменную внутри блока селектора, рядом со свойствами. Таким образом, она будет доступна только внутри селектора.

Такой же подход применим и для mixins. Вы можете не только создавать глобальные mixins, но можете также использовать локальные, когда необходимо создать какие-то повторяющиеся действия или элементы внутри компонента. Реальный пример — необходимость пересчитать что-то на каждой breakpoint, но только с другим значением высоты/ширины.

.filters-block {
    $_filter-height: 20px;
    
        @mixin _note-size($value) {
        height: $value;
        line-height: $value;
        margin-top: -($value);
    }
    &__list {
        height: $_filters-height * 7; // Display 7 filters
        overflow: auto;
    }
    &__item {
        height: $_filter-height;
    }
    &__note {
        @include _note-size(30px);
    }
    @media screen and (max-width 1000px) {
        &__note {
            @include _note-size(40px);
        }
    }
}

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

Для обозначения локальных переменных, я рекомендую использовать нижнее подчеркивание “_” перед названием переменной/mixin, так же как это делается в других языках программирования.