Модуларен систем на Sass: водич за @use и @forward

Oд

во Веб, Вести, Дизајн, Мора да прочиташ, Совети, Софтвер

Порано во Sass постоеше само @import, кој едноставно ја копираше содржината на еден фајл во друг. Тоа создаваше проблеми: глобално зголемување на простор, конфликти на имиња, дуплирање на код. Директивите @use и @forward се појавија пред неколку години, но дури сега, со приближувањето на излегувањето на Dart Sass 3.0.0, @import официјално е прогласен за застарен и ќе биде целосно отстранет. Поради тоа е добро да се запознаеме со модуларниот систем, ако досега сте го заобиколувале.

1. @use – поврзување на модул

@use вчитува фајл (модул) и ја прави неговата содржина достапна во тековниот фајл, но во изолиран простор на имиња. Тоа е главната разлика од @import.

@use 'патека/фајл';

По стандард, сите променливи, mixin и функции од вчитаниот фајл стануваат достапни преку простор на имиња кој одговара на последниот дел од патеката (без екстензија).

Пример:

// helpers/_colors.scss
$primary: blue;
$secondary: gray;

Поврзување во body/header.scss:

@use '../helpers/colors';

.button {
  color: colors.$primary; // пристап преку namespace "colors"
}

Просторот на имиња по стандард се зема од името на фајлот.

2. Промена на namespace (as)

Може да се зададе сопствено име за модулот за да се скрати или прецизира контекстот:

@use 'helpers/colors' as myColors;

.button {
  color: myColors.$primary; // пристап преку "myColors"
}

Namespace во Sass се идентификатори и ги следат истите правила како имињата на променливи:

Дозволено:

  • букви a-z, A-Z
  • цифри 0-9
  • camelCase (myColors)
  • PascalCase (MyColors)

Забрането:

  • цртичка (-)
  • празни места
  • специјални знаци (!@#$%^&*)
  • почнување со цифра

3. Вградени модули (math, list, map, color, string)

Sass обезбедува вградени модули кои се поврзуваат преку @use со префиксот sass::

@use 'sass:math';
@use 'sass:list';
@use 'sass:map';
@use 'sass:color';
@use 'sass:string';

Примери:

$width: math.div(100%, 3);             // делење
$len: list.length($my-list);           // должина на листа
$color: color.adjust(#336699, $lightness: 20%);
$index: string.index($string, 'sub');

Важно: вградените модули мора да се поврзат во секој фајл каде се користат нивните функции. Тие не се наследуваат преку други импорти.

4. Користење на mixins и функции од модули

Mixin и функциите дефинирани во кориснички фајлови исто така се достапни преку namespace:

// helpers/_mixins.scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// components/_card.scss
@use '../helpers/mixins';

.card {
  @include mixins.flex-center;
}

Ако е потребно да се поврзат повеќе модули во еден фајл, тоа се прави експлицитно:

@use '../helpers/colors';
@use '../helpers/variables' as var;
@use '../helpers/mixins';

5. Организација на фајлови

Секој SCSS-фајл сам одговара за своите зависности. На почетокот на фајлот се набројуваат сите потребни модули со @use. Тоа обезбедува целосна транспарентност и го поедноставува рефакторингот.

Препорачана структура на папки:

scss/
  helpers/
    _colors.scss
    _variables.scss
    _mixins.scss
  components/
    _button.scss
    _card.scss
  pages/
    _about-page.scss
  template.scss

Пример components/_button.scss:

@use '../helpers/colors' as myColors;
@use '../helpers/variables';
@use '../helpers/mixins';

.button {
  background-color: myColors.$primary;
  padding: variables.$spacing-md;
  @include mixins.border-radius;
}

6. Предности на пристапот со namespace

  • Експлицитност – веднаш се гледа од кој модул е земена променливата или миксинот.
  • Отсуство на конфликти – дури и ако во различни модули постојат исти имиња, тие не се преклопуваат.
  • Лесен рефакторинг – може да се менува еден модул без страв дека ќе се скршат другите.
  • Поддршка на IDE – автодополнувањето работи подобро бидејќи namespaces се познати.
  • Скалабилност – кодот останува разбирлив дури и во големи проекти.

7. Важни напомени

@use работи само на почетокот на фајлот (пред сите правила).

Еден ист модул може да се користи во повеќе фајлови, секој пат со експлицитно поврзување.

Вградените модули не треба да се копираат во проектот, тие веќе постојат во Sass. Потребно е само да се поврзат експлицитно во соодветниот фајл:

@use '../helpers/colors' as myColors;
@use '../helpers/variables';
@use '../helpers/mixins';
@use 'sass:list';

.button {
  background-color: myColors.$primary;
  padding: variables.$spacing-md;
  @include mixins.border-radius;
  $len: list.length($my-list); // должина на листа
}

8. @use … with ()

@use ... with () е механизам за конфигурација на модули во Sass. Тој овозможува да се пренесат вредности во модулот при неговото поврзување, преку замена на променливи кои се означени со !default.

8.1 Како функционира

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

// helpers/_theme.scss
$bg-color: #ffffff !default;
$text-color: #333333 !default;
$spacing-unit: 8px !default;
$border-radius: 4px !default;

!default значи: “користи ја оваа вредност ако никој не пренел своја”. Ако вредноста НЕ БИЛА зададена пред импортот, се користи онаа после !default. Ако ВЕЌЕ БИЛА зададена, се користи зададената, а вредноста после !default се игнорира.

Пример кога вредноста е зададена ПРЕД импортот:

// pages/about-page.scss
$bg-color: #000000; // зададовме црна ПРЕД импортот

@use 'helpers/theme';

body {
  background: theme.$bg-color; // ќе биде #000000
}

8.2 Пренесување нови вредности при импорт преку with

// pages/dark-theme.scss
@use '../helpers/theme' with (
  $bg-color: #1a1a1a,
  $text-color: #f0f0f0,
  $spacing-unit: 12px
);

body {
  background: theme.$bg-color;       // ќе биде #1a1a1a
  color: theme.$text-color;          // ќе биде #f0f0f0
  padding: theme.$spacing-unit;      // ќе биде 12px
  border-radius: theme.$border-radius; // ќе биде 4px (останато стандардно)
}

Значи, со @use ... with () исто така ги замениме променливите, само наместо “ПРЕД импортот”, ги пишуваме директно во with на самиот импорт.

Постојат два начина за замена на променливи во конкретен фајл:

  1. Да се замени пред конкретниот импорт, а подобро, пред сите импорти во фајлот
  2. Да се замени преку with() директно во импортот

8.3 Напомена

Многу Sass-библиотеки користат !default за конфигурација на своите стилови. Нив исто така може да се заменат на двата начина опишани погоре.

Директивата with() за ист модул работи само при првиот импорт. Сите наредни @use ... with () за истиот модул ќе бидат игнорирани:

// Правилно
@use 'helpers/theme' with (
  $bg-color: #000
);

// Бескорисно (повторниот импорт го игнорира with)
@use 'helpers/theme' with (
  $bg-color: #f00  // НЕМА ДА РАБОТИ!
);

@use ... with () може да се применува за секој различен импорт:

// Правилно
@use 'helpers/colors' with (
  $primary: red,
  $secondary: lightgray
);

// Правилно
@use 'helpers/spacing' with (
  $padding: 24px,
  $margin: 12px
);

9. @forward – проследување на модул

@forward е директива која ја пренесува содржината на поврзаните фајлови понатаму, но самата не дава пристап до нив во тековниот фајл. Таа се користи за создавање единствена влезна точка (јавно API) од повеќе модули.

9.1 Што прави @forward

@forward е корисен затоа што може да се користи во еден SCSS-фајл кој потоа се поврзува во останатите SCSS-фајлови, без потреба да се пишуваат повеќе импорти во секој фајл.

Пример со @forward:

Создаваме SCSS-фајл, на пример _core.scss, и во него пишуваме линкови преку @forward до SCSS-фајлови кои се глобални (променливи, бои, миксини, фонтови, базни стилови и слично):

// core.scss
@forward "helpers/colors";
@forward "helpers/variables";
@forward "base/fonts";
@forward "helpers/fonts-variables";
@forward "helpers/extend";
@forward "base/reset";
@forward "base/reboot";
@forward "base/base";
@forward "base/new-system";

Потоа во SCSS-фајловите додаваме само еден импорт:

// ./pages/about-page.scss
@use "../core.scss";

Предноста е дека наместо, на пример, 9 импорти, се користи само еден “core”. Меѓутоа, недостатокот е во тоа дека при користење на namespace не може точно да се одреди од кој SCSS-фајл доаѓа потребната променлива, бидејќи сите namespace ќе бидат еднакви на името на еден фајл (оној со @forward) или на зададено преку as.

// ./pages/about-page.scss
@use "../core.scss"; // или @use "../core.scss" as core;

.button {
  color: core.$blue;
  border-radius: core.$border-radius-medium;
  @include core.flex-center;
}

Без @forward е попогодно затоа што веднаш може да се одреди од кој фајл доаѓа потребниот стил:

// ./pages/about-page.scss
@use '../helpers/colors';
@use '../helpers/variables';
@use '../helpers/mixins';

.button {
  color: color.$blue;
  border-radius: variables.$border-radius-medium;
  @include mixins.flex-center;
}

9.2 Важна да се знае

Како што беше споменато, @forward само го проследува содржината понатаму, но самиот фајл во кој се пишуваат @forward директивите не добива пристап до тие променливи и миксини. Ако внатре во _core.scss е потребно да се користи нешто од проследените фајлови, треба да се додаде посебен @use:

// _core.scss
@forward 'helpers/colors'; // проследување нанадвор
@use 'helpers/colors' as c; // за користење внатре

body {
  background: c.$bg-color; // работи благодарение на @use
}

9.3 Namespace при користење на @forward

При поврзување на збирниот фајл преку @use, namespace се одредува на ист начин како и за обичен модул.

9.4 Селективно проследување (show / hide)

Со show и hide може да се ограничи што точно се проследува од модулот:

  • show – проследува само наведените имиња
  • hide – проследува сe освен наведените
// helpers/_index.scss
@forward 'colors' show $primary, $secondary; // само овие променливи
@forward 'mixins' hide private-mixin;        // сe освен private-mixin

9.5 Конфигурација преку with() при проследување

Ако проследениот фајл содржи променливи со !default, може да се заменат директно во @forward преку with():

// helpers/_theme.scss
$bg-color: #fff !default;
$text-color: #000 !default;

// helpers/_index.scss
@forward 'theme' with (
  $bg-color: #f0f0f0,
  $text-color: #222
);

10. Организација на зависности помеѓу модули

Во модуларниот систем на Sass секој фајл е изолиран и мора експлицитно да покажува од каде ги зема променливите, миксините и функциите. Тоа важи и кога еден ваш модул (на пример variables.scss) користи променливи од друг модул (colors.scss).

Пример: variables.scss зависи од colors.scss:

// _core.scss
@forward 'helpers/colors';
@forward 'helpers/variables';
@forward 'helpers/mixins';

Внатре во _variables.scss сепак треба да се пише:

// variables.scss
@use 'colors'; // експлицитна зависност

Зошто ова е правилно:

  • Експлицитност – веднаш се гледа од кои модули зависи фајлот
  • Доверливост – при преместување на фајлот на друго место, зависностите не се губат
  • Поддршка на IDE – автодополнувањето работи прецизно
  • Рефакторинг– лесно се наоѓаат сите места кои користат конкретен модул

11. За крај

  • Експлицитноста е поважна од краткоста – секој фајл сам ги поврзува потребните модули преку @use. Тоа ги прави зависностите транспарентни.
  • Namespace е задолжителен – пристапувај до променливи и миксини преку името на модулот или алијасот. Нема глобален пристап.
  • Имиња на модули – само букви и цифри (не на почеток). Цртички и специјални знаци се забранети.
  • Вградените модули (sass:math, sass:list и сл.) се поврзуваат таму каде се користат. Не се наследуваат.
  • Конфигурација преку !default и with()– овозможува флексибилно конфигурирање на модули со замена на стандардните вредности. with() работи само при првиот импорт.
  • @forward за збирни фајлови – погоден за создавање единствена влезна точка, но го крие изворот на променливите. Користи го свесно.
  • show / hide во @forward – овозможуваат прецизна контрола над тоа што влегува во јавното API.
  • Зависности внатре во модули – дури и ако фајлот е дел од збирниот фајл, внатре во него треба експлицитно да се пишува @use за другите модули.
  • Повторни импорти се норма – дури и ако еден модул е потребен во сто фајлови, во секој се пишува @use. Тоа е цената за доверливост.
  • Рефакторингот станува безбеден – промените во еден модул не ги кршат другите ако нивните имиња не се во конфликт.

12. Глобалниот пристап (кој не треба да се користи, но вреди да се знае)

Постои уште една варијанта: @use ... as *.

@use 'helpers/colors' as *;

as * го поврзува модулот во глобалниот простор на имиња. Променливите, миксините и функциите стануваат достапни без префикс, исто како со стариот @import.

Зошто ова е лоша практика:

  • Ги враќа истите проблеми од кои бевме избегале – конфликти на имиња, глобално загадување, нејасни зависности.
  • Ја уништува транспарентноста на кодот – гледајќи $primary, е невозможно да се знае од кој модул доаѓа таа променлива.
  • Рефакторингот станува опасен – бришењето или преименувањето на модулот може да скрши код на неочигледни места.
  • Самиот Dart Sass не го препорачува овој пристап – тој е оставен само за премин од @import, а не за употреба во нова кодна база.

as * е решетка од минатото. Ако пишувате код од нула или свесно го мигрирате проектот, користете обични namespace. Експлицитноста е поважна од краткоста.

Стани премиум член и доби пристап до сите содржини, специјален попуст на над 2.200 производи во ИТ маркет, верификуван профил и можност за огласување на ИТ Огласник. Плус ќе го поддржиш медиумот кој го градиме цели 16 години!

basic

членство

42 ден./мес

зачлени се

1337

членство

125 ден./мес

зачлени се
* плаќањето е на годишно ниво

Доколку веќе имаш премиум членство, најави се тука.

Добивај известувања
Извести ме за
guest
0 Коментари
Најнови
Најстари Со највеќе гласови
Inline Feedbacks
View all comments

поврзани теми

слични статии

ит кариера

Deutsche Neubau AG Ltd.

IT Specialist / IT Support

Deltatre

L2 Support Engineer

Init Group

AI Enablement Lead

Deltatre

Technical Lead Front-End

види ги сите огласи на kariera.it.mk

ит маркет

за целосна понуда на продукти, на market.it.mk