Запуск системи модулів SASS

Запуск системи модулів SASS

Команда Sass роками знала, що правило @import, одне з найдавніших доповнень до Sass, було не так добре, як ми цього хотіли.  Це спричинило цілу проблему для наших користувачів:

Ми також знали, що будь-яка заміна, яку ми хотіли запровадити, повинна бути розроблена і розроблена з максимальною ретельністю, щоб гарантувати, що вона забезпечить міцну основу для майбутнього розвитку Сасса.  Протягом останніх кількох років ми обговорювали, розробляли та розробляли абсолютно нову модульну систему, яка вирішує ці проблеми та багато іншого, і сьогодні ми з радістю оголосимо, що вона доступна в Dart Sass 1.23.0.

Зверніть увагу, що модульна система повністю сумісна з зворотним ходом.  Жодні існуючі функції не були видалені або застаріли, і ваші поточні таблиці стилів Sass будуть працювати так само, як завжди.  Ми розробили модульну систему, яка буде повністю сумісна з @import, щоб полегшити авторам таблиці стилів поступово переходити до неї.  Ми плануємо врешті-решт позбутися @import, але ненадовго після того, як усі зможуть мігрувати.

 @use, серце модульної системи

@use "bootstrap";

.element {
  background-color: bootstrap.$body-bg;
  @include bootstrap.float-left;
}

Окрім простору імен, є кілька важливих відмінностей між @use та @import:

 Зауважте, що селектори заповнювачів не мають простору імен, але вони дотримуються конфіденційності.

Контроль просторів імен

Хоча простір імен за замовчуванням для правила @use визначається базовим іменем його URL-адреси, його також можна встановити явно, використовуючи як.

@use "bootstrap" as b;

.element {
  @include b.float-left;
}

Спеціальна конструкція як * також може бути використана для включення всього до простору імен верхнього рівня.  Зауважте, що якщо кілька модулів викривають учасників з тим самим іменем і використовуються як *, Sass видасть помилку.

@use "bootstrap" as *;

.element {
  @include float-left;
}

 

Налаштування бібліотек 

За допомогою @import бібліотеки часто конфігуруються шляхом встановлення глобальних змінних, які переосмислюють змінні за замовчуванням, визначені цими бібліотеками.  Оскільки змінні більше не є глобальними за допомогою @use, він підтримує більш чіткий спосіб конфігурування бібліотек.

// bootstrap.scss
$paragraph-margin-bottom: 1rem !default;

p {
  margin-top: 0;
  margin-bottom: $paragraph-margin-bottom;
}

 

@use "bootstrap" with (
  $paragraph-margin-bottom: 1.2rem
);

 

Це встановлює змінну $paragraph-margin-bottom $ bootstrap 1.2rem перед її оцінкою. Властивість with дозволяє лише змінні, визначені (або переслані) модулем, який імпортується, і лише якщо вони визначені за замовчуванням !, тому користувачі захищені від помилок. 

@forward для авторів бібліотеки

Правило @forward включає змінні, суміші та функції іншого модуля, що є частиною API, що піддається впливу поточного модуля, не роблячи їх видимими для коду в поточному модулі.  Це дозволяє авторам бібліотеки мати змогу розділити свою бібліотеку на безліч різних вихідних файлів, не приносячи шкоди місцевості в цих файлах.  На відміну від @use, вперед не додає просторів імен до імен.

// bootstrap.scss
@forward "functions";
@forward "variables";
@forward "mixins";

Контроль видимості 

Правило @forward може вибирати показ лише конкретних імен:

@forward "functions" show color-yiq;

Це також може приховати імена, призначені для приватної бібліотеки: 

@forward "functions" hide assert-ascending;

Додаткова префіксація 

Якщо ви пересилаєте дочірній модуль через модуль "все в одному", ви можете додати до цього модуля простір імен вручну.  Ви можете робити те, що з пунктом as, який додає префікс до кожного пересланого імені члена:

// material/_index.scss
@forward "theme" as theme-*;

Таким чином користувачі можуть використовувати модуль "все в одному" з чітко визначеними іменами для змінних тем:

@use "material" with ($theme-primary: blue);

 

або вони можуть використовувати дочірній модуль із більш простими назвами:

@use "material/theme" with ($primary: blue);

 

Вбудовані модулі 

Нова система модулів також додає вбудовані модулі (sass: математика, sass: колір, sass: рядок, sass: список, sass: карта, sass: селектор, і sass: meta), щоб утримувати всі існуючі вбудовані функції Sass  .  Оскільки ці модулі (як правило) будуть імпортовані з простором імен, тепер набагато простіше використовувати функції Sass, не вступаючи в конфлікти з простими функціями CSS.

Це, в свою чергу, робить набагато безпечнішим для Sass додавання нових функцій.  Ми очікуємо, що до цих модулів у майбутньому додамо ряд функцій зручності.

Перейменовані функції

Деякі функції мають різні імена у вбудованих модулях, ніж у глобальних.  Вбудовані функції, які вже мали ручні простори імен, наприклад map-get (), видаляють ці простори імен у вбудованих модулях, щоб ви могли просто написати map.get ().  Аналогічно, налаштування color (), scale-color () та change-color () тепер є color.adjust (), color.scale () та color.change ().

Ми також скористалися цією можливістю змінити пару заплутаних старих імен функцій.  unitless () тепер math.is-unitless (), а comparable () тепер math.compatible ().

Видалені функції

Кольорові функції кольору Sass освітлюють (), затемнюють (), насичують (), знесолюють (), зменшують (), затухають (), прозоріють () і зникають (), і все це мало неінтуїтивну поведінку.  Замість того, щоб легко масштабувати їх пов’язані атрибути, вони просто збільшували їх на статичну кількість, так що світліше (колір $, 20%) поверне біле для кольору з 85% легкістю, а не повернення кольору з 88% легкістю (на 20% ближче  до повного білого).

Щоб допомогти нам на шляху до виправлення цього, ці функції (поряд з коригуванням відтінку ()) не включені до нових вбудованих модулів.  Ви все одно можете отримати той же ефект, зателефонувавши за кольором color.adjust () - наприклад, освітлити ($ колір, $ сума) еквівалентно color.adjust ($ колір, $ легкість: $ сума) - але ми рекомендуємо спробувати використовувати колір  .scale () натомість, якщо можливо, через те, наскільки вона інтуїтивніша.

 В якийсь момент у майбутньому ми плануємо додати color.lighten () та подібні функції як скорочення для color.scale ().
 мета.load-css () постійне посилання
 meta.load-css ()

Нова система модулів поставляється з новим вбудованим mixin, meta.load-css ($ url, $ з: ()).  Цей міксин динамічно завантажує модуль із вказаною URL-адресою та включає його CSS (хоча його функції, змінні та міксини не доступні).  Це заміна вкладеного імпорту, і це допомагає вирішувати деякі випадки використання динамічного імпорту без багатьох проблем, які виникли, якщо нові члени могли динамічно завантажуватися.

@import Сумісність

Екосистема Sass не перейде на @use протягом ночі, тому тим часом їй потрібно добре взаємодіяти з @import.  Це підтримується в обох напрямках:

 Для того, щоб дозволити бібліотекам підтримувати існуючий API, орієнтований на імпорт, де необхідний чіткий простір імен, ця пропозиція також додає підтримку файлів, видимих ​​лише для @import, а не для використання @use.  Вони записані "file.import.scss" і імпортуються, коли користувач пише @import "файл".

Автоматична міграція

Одночасно із запуском нової модульної системи ми запускаємо новий автоматизований мігратор Sass.  Цей інструмент дозволяє легко перенести більшість таблиць стилів, щоб автоматично використовувати нову модульну систему.  Дотримуйтесь інструкцій на веб-сайті Sass, щоб встановити його, а потім запустіть його у своїй програмі:

$ sass-migrator module --migrate-deps <path/to/style.scss>

Прапор --migrate-deps повідомляє переселенцеві перенести не лише файл, який ви передаєте, але і все, що він імпортує.  Мігратор автоматично підбирає файли, імпортовані через синтаксис node_modules Webpack, але ви також можете пропускати явні шляхи завантаження із позначкою --load-path.

Якщо ви хочете, щоб переселенець повідомив вам, які зміни він буде вносити, фактично не вносячи їх, передайте і прапор - сухий запуск, і прапор --verbose, щоб він просто роздрукував зміни, які він вніс, не зберігаючи їх на диску.

Бібліотека міграцій

Якщо ви хочете перенести бібліотеку Sass, призначену для завантаження та використання нижчих за рівнем користувачів, запустіть:

$ sass-migrator module --migrate-deps --forward=all <path/to/index.scss>

 

Прапор --forward вказує мігратору додати правила @forward, щоб користувачі все ще могли завантажувати всі мікси, змінні та функції, які ваша бібліотека визначає за допомогою одного @use.

Якщо ви додали в свою бібліотеку простір імен, щоб уникнути конфліктів імен, мігратор видалить його вам, якщо передасте прапор --remove-prefix.  Ви навіть можете вибрати лише переслати членів, які спочатку мали цей префікс, передавши --forward = з префіксом.

Підбиття підсумків

Інструмент міграції є абсолютно новим, тому він все ще може мати деякі шорсткі краї.  Якщо у вас виникли проблеми, будь ласка, не соромтеся подавати проблему на GitHub!

Спробуте це зараз!

Модульна система доступна як частина Dart Sass 1.23.0.  Ви можете встановити її прямо зараз, використовуючи наступну компанду:

$ npm install -g sass

Крім того, перегляньте сторінку встановлення для всіх різних способів її встановлення! 

Плани на майбутнє

Команда Sass хоче виділити велику кількість часу, коли @use та @import можуть співіснувати, щоб допомогти екосистемі плавно переходити до нової системи.  Однак цілком відмовитись від @import - це кінцева мета простоти, продуктивності та сумісності CSS.  Таким чином, ми плануємо поступово відключати підтримку @import на такій часовій шкалі:

 Це означає, що буде, як мінімум, два повних роки, коли @import і @use можуть бути використані одночасно, і, ймовірно, ближче до трьох років на практиці.

Джерело