Как подключить файл sass к html

Обновлено: 07.07.2024

В настоящее время только Dart Sass поддерживает @use . Пользователи других реализаций должны использовать правило @import rule вместо этого.

Правило @use загружает миксины, функции и переменные из других таблиц стилей Sass и объединяет CSS из нескольких таблиц стилей вместе. Таблицы стилей, загруженные с помощью @use , называются "модулями". Sass также предоставляет встроенные модули, полные полезных функций.

Простейшее правило @use записывается как @use "<url>" , которое загружает модуль по заданному URL. Любые стили, загруженные таким образом, будут включены ровно один раз в скомпилированный вывод CSS , независимо от того, сколько раз эти стили загружались.

⚠️ Внимание!

Правила таблицы стилей @use должны стоять перед любыми правилами, кроме @forward , включая правила стилей. Однако вы можете объявить переменные перед правилами @use , которые будут использоваться при настройке модулей.

SCSS Syntax

Sass Syntax

CSS Output

Загрузка участников permalink Загрузка участников

Вы можете получить доступ к переменным, функциям и миксинам из другого модуля, написав <namespace>.<variable> , <namespace>.<function>() или @include <namespace>.<mixin>() . По умолчанию пространство имен - это только последний компонент URL -адреса модуля.

💡 Интересный факт:

Поскольку @use добавляет пространства имен к именам участников, можно безопасно выбирать очень простые имена, такие как $radius или $width , при написании таблицы стилей. Это отличается от старого правила @import , которое поощряло пользователей писать длинные имена, такие как $mat-corner-radius , чтобы избежать конфликтов с другими библиотеками, и это помогает сохранять ваши таблицы стилей ясными и удобными для чтения!

SCSS Syntax

Sass Syntax

CSS Output

Выбор пространства имен permalink Выбор пространства имен

По умолчанию пространство имен модуля - это только последний компонент его URL без расширения файла. Однако иногда вам может потребоваться выбрать другое пространство имен - вы можете захотеть использовать более короткое имя для модуля, на который вы много ссылаетесь, или вы можете загружать несколько модулей с одним и тем же именем файла. Вы можете сделать это, написав @use "<url>" как <namespace> .

SCSS Syntax

Sass Syntax

CSS Output

Вы даже можете загрузить модуль без пространства имен, написав @use "<url>" as * . Однако мы рекомендуем делать это только для таблиц стилей, написанных вами; в противном случае они могут ввести новых участников, что вызовет конфликты имен!

SCSS Syntax

Sass Syntax

CSS Output

Частные участники permalink Частные участники

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

💡 Интересный факт:

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

SCSS Syntax

Sass Syntax

Конфигурация permalink Конфигурация

Таблица стилей может определять переменные с помощью флага !default , чтобы сделать их настраиваемыми. Чтобы загрузить модуль с конфигурацией, напишите @use <url> с (<variable>: <value>, <variable>: <value>) . Настроенные значения заменят значения переменных по умолчанию.

SCSS Syntax

Sass Syntax

CSS Output

С миксинами permalink С миксинами

Настройка модулей с помощью @use . with может быть очень удобной, особенно при использовании библиотек, которые изначально были написаны для работы с правилом @import . Но он не особенно гибкий, и мы не рекомендуем его для более сложных случаев использования. Если вы обнаружите, что хотите настроить сразу несколько переменных, передать [карты]]maps в качестве конфигурации или обновить конфигурацию после загрузки модуля, подумайте о написании миксина для установки ваших переменных вместо этого и другого миксина для внедрения ваших стилей.

SCSS Syntax

Sass Syntax

CSS Output

Поиск модуля permalink Поиск модуля

Было бы неинтересно выписывать абсолютные URL -адреса для каждой загружаемой таблицы стилей, поэтому алгоритм поиска модуля Sass делает это немного проще. Во-первых, вам не нужно явно указывать расширение файла, который вы хотите загрузить; @use "variables" автоматически загрузит variables.scss , variables.sass или variables.css .

⚠️ Внимание!

Чтобы таблицы стилей работали в любой операционной системе, Sass загружает файлы по URL , а не по пути к файлу. Это означает, что вам нужно использовать косую черту, а не обратную, даже в Windows.

Загрузка путей permalink Загрузка путей

Все реализации Sass позволяют пользователям указывать пути загрузки: пути в файловой системе, которые Sass будет искать при поиске модулей. Например, если вы передаете node_modules/susy/sass в качестве пути загрузки, вы можете использовать @use "susy" для загрузки node_modules/susy/sass/susy.scss .

Однако модули всегда будут загружаться в первую очередь относительно текущего файла. Пути загрузки будут использоваться только в том случае, если не существует относительного файла, соответствующего URL -адресу модуля. Это гарантирует, что вы не сможете случайно испортить относительный импорт при добавлении новой библиотеки.

💡 Интересный факт:

В отличие от некоторых других языков, Sass не требует, чтобы вы использовали ./ для относительного импорта. Относительный импорт всегда доступен.

Есть множество приложений под Windows, Mac и Linux, которые помогут в освоении и работе с Sass. Большинство из них бесплатные, но некоторые из них все-таки платные (но это того стоит).

CodeKit (Платно) Mac
Compass.app (Условно-бесплатно) Mac Windows Linux
Ghostlab (Платно) Mac Windows
Hammer (Платно) Mac
Koala (Бесплатно) Mac Windows Linux
LiveReload (Условно-бесплатно) Mac Windows
Prepros (Платно) Mac Windows Linux
Scout-App (Бесплатно) Windows Linux Mac

Командная строка

Когда вы используете Sass через командную строку, то для того, чтобы запустить компиляцию .sass и .scss в .css файлы введите команду sass . Например:

Используя любой способ установки Sass, запустите команду sass --version чтобы быть уверенным, что установка прошла успешно. Если эту команду выполнить, то в ответ вы получите версию Sass 1.5.1 . Также вы можете запустить команду sass --help для получения информации по использованию Sass в командной строке.

Как только все настроено, начинайте наслаждаться. Если вы впервые столкнулись с Sass, то специально для вас мы создали несколько ресурсов для обучения.

Установка в любом месте (Standalone) Вы можете установить Sass в Windows, Mac, или Linux путем скачивания дистрибутива для вашей операционной системы from GitHub и выполните действия с PATH . Вот и все: никаких зависимостей нет и ничего не нужно устанавливать дополнительно. Установка в любом месте (npm)

Если вы используете Node.js, то вы можете установить Sass c помощью npm:

Однако, учтите, что это установит реализацию Sass на нативном JavaScript, которая работает несколько медленнее, чем другие реализации, перечисленные здесь. Но он имеет тот же интерфейс, поэтому будет легче поменять на другую реализацию позже, если вам потребуется немного больше скорости! Установка в Windows (Chocolatey)

Если вы используете менеджер пакетов Chocolatey для Windows, вы можете установить Dart Sass при помощи команды:

Установка в Mac OS X (Homebrew)

Если вы используете менеджер пакетов Homebrew для Mac OS X, вы можете установить Dart Sass при помощи команды:

Прежде, чем Вы сможете использовать Sass, Вам необходимо его настроить в вашем проекте. Если Вы хотите просто почитать, то не стесняйтесь — читайте, но мы рекомендуем сначала установить Sass. Установите Sass для того, чтобы разобраться во всех возможностях Sass.

Препроцессинг

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

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

Самый простой способ получить такой результат - использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS , используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .

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

Вы также можете указать папки для отслеживания изменений и куда сохранять компилированные CSS файлы, для этого достаточно указать пути и разделить их двоеточием, например:

Sass будет отслеживать все файлы в директории app/sass и компилировать CSS в директорию public/stylesheets .

Переменные

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

SCSS Syntax

Sass Syntax

CSS Output

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

Вложенности

При написании HTML , Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

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

Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

SCSS Syntax

Sass Syntax

CSS Output

Вы заметили, что селекторы ul , li , и a являются вложенными в селектор nav ? Это отличный способ сделать ваш CSS -файл более читабельным. Когда вы сгенерируете CSS -файл, то на выходе вы получите что-то вроде этого:

Фрагментирование

Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS , которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss . Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import .

Импорт

Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss . И мы хотим импортировать _reset.scss в base.scss .

SCSS Syntax

Sass Syntax

CSS Output

Миксины (примеси)

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3 , где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS , которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform :

SCSS Syntax

Sass Syntax

CSS Output

Расширение/Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами. Класс-шаблон - особый тип классов, который выводится только при использовании расширения - это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.

SCSS Syntax

Sass Syntax

CSS Output

Вышеуказанный код сообщает классам .message , .success , .error и .warning вести себя как %message-shared . Это означает, что где бы не вызывался %message-shared , то и .message , .success , .error и .warning тоже будут вызваны. Магия происходит в сгенерированном CSS , где каждый из этих классов получает css-свойства, как и %message-shared . Это позволит вам избежать написания множества классов в HTML элементах.

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

Когда вы генерируете ваш CSS , то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS , так как ни разу не был использован.

Математические операторы

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как + , - , * , / и % . В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article .

SCSS Syntax

Sass Syntax

CSS Output

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

Привет, Хабр! Представляю вашему вниманию перевод статьи «Introducing Sass Modules» автора Miriam Suzanne.

Недавно в Sass появилась функциональность, которая вам знакома по другим языкам: модульная система. Это большой шаг вперед для @import , одной из наиболее часто используемых функций в Sass. Несмотря на то, что существующая директива @import позволяет вам подключать сторонние пакеты и разделять ваши стили на поддерживаемые элементы, у неё всё же есть несколько ограничений :

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

Импортирование файлов с помощью @use

Новый @use похож на @import , но у него есть некоторые заметные различия:

Файл импортируется единожды, неважно сколько раз вы используете @use в проекте.
Переменные, миксины и функции (которые в Sass называются «членами»), начинающиеся с подчеркивания ( _ ) или дефиса ( - ), считаются приватными и не импортируются.
Члены из подключенного через @use файла (в наше случае buttons.scss ) доступны только локально и не передаются последующему импорту.
Аналогично, @extends будет применяться только вверх по цепочке; то есть расширение применяется только к стилям, которые импортируются, а не к стилям, которые импортируют.
Все импортированные члены по умолчанию имеют свое пространство имен.

Теперь у нас есть доступ к членам как файла buttons.scss , так и файла forms.scss , но этот доступ не передаётся между импортами: forms.scss по-прежнему не имеет доступа к переменным, определенным в buttons.scss . Поскольку импортированные сущности имеют пространство имен, мы должны использовать новый синтаксис с разделителем точкой для доступа к ним:

Мы можем изменить или удалить пространство имен по умолчанию, добавив к импорту as <name> .

Использование as * добавляет модуль в корневое пространство имен, поэтому префикс не нужен, но его члены по-прежнему локально ограничены текущим документом.

Импорт встроенных в Sass модулей

Внутренние возможности в Sass также были перемещены в модульную систему, поэтому мы имеем полный контроль над глобальным пространством имен. Существует несколько встроенных модулей — math , color , string , list , map , selector и meta — которые должны быть импортированы в файл явно перед использованием.

Встроенные модули также могут быть импортированы в глобальное пространство:

Встроенные функции, которые уже имеют префиксные имена, такие как map-get или str-index , могут использоваться без дублирования этого префикса:

Вы можете найти полный список встроенных модулей, функций и изменений названий в спецификации модулей Sass.

Новые и измененные основные функции

В качестве дополнительного преимущества это означает, что Sass может безопасно добавлять новые внутренние миксины и функции, не вызывая конфликтов имен. Самый потрясающий пример это миксин load-css из модуля sass:meta . Он работает по аналогии с @use , но только возвращает сгенерированный CSS и работает динамически в любом месте вашего кода:

Аргумент $with позволяет сконфигурировать с помощью структуры map любую переменную в загруженном модуле, при этом эта переменная должна удовлетворять условиям:

Не является приватной переменной, которая начинается с _ или -
Помечена директивой !default

Обратите внимание, что ключ 'base-color' устанавливает переменную $base-color .

Есть еще пара новых функций из модуля sass:meta : module-variables() и module-functions() . Каждая их них возвращает структуру map из имён и значений из уже импортированного модуля. Они принимают один аргумент, соответствующий пространству имен модуля:

Несколько других функций из sass:meta — global-variable-exists() , function-exists() , mixin-exists() , и get-function() — получат дополнительные аргументы $module , которые позволят нам явно проверять каждое пространство имен.

Настройка и масштабирование цветов

У модуля sass:color также есть несколько интересных оговорок по поводу решения некоторых наших старых проблем. Многие из таких устаревших функций, как lighten() или adjust-hue() больше не рекомендуются к использованию в пользу явных функций color.adjust() и color.scale() :

Некоторые из таких устаревших функций (например, adjust-hue ) являются избыточными и ненужными. Другие — такие как lighten , darken , saturate и т.д. — нуждаются в повторной реализации для улучшения внутренней логики. Оригинальные функции были основаны на adjust() , которая использует линейную математику: добавление 20% к текущей светлоте цвета red в нашем примере выше. В большинстве случаев, мы хотим изменять ( scale() ) цвет на определенный процент относительно текущего значения:

После полного устаревания и удаления эти функции в конечном итоге снова появятся в sass:color с новым поведением, основанным на color.scale() , а не color.adjust() . Это будет происходить постепенно, чтобы избежать внезапных нарушений обратной совместимости. Тем временем я рекомендую вручную проверить ваш код, чтобы увидеть, где color.scale() может оказаться полезнее.

Настройка импортируемых библиотек

Сторонние или повторно используемые библиотеки часто поставляются с переменными с некоторыми значениями по умолчанию, которые вы можете переопределить. Мы делали это с переменными перед импортом:

Поскольку при использовании модулей больше нет доступа к локальным переменным, нам нужен новый способ задать значения. Мы можем сделать это, передав настройки через map в @use :

Это похоже на аргумент $with в load-css() , но вместо того, чтобы использовать имена переменных в качестве ключей, мы используем сами переменные с символом $ .

Мне нравится то, какой явной стала настройка, но есть одно правило, которое сбило меня с толку несколько раз: модуль может быть настроен только один раз при первом использовании. Порядок подключения всегда был важен для Sass, даже с @import , но эти проблемы оставались незамеченными. Теперь мы получаем явную ошибку, и это одновременно хорошо и немного неожиданно. Убедитесь, что подключаете библиотеки через @use и настраиваете их в файле-точке входа (центральный документ, который импортирует все остальные файлы), чтобы эти настройки компилировались перед другими подключениями библиотек через @use .

Невозможно (в данный момент) «связать» конфигурации вместе, сохраняя их редактируемыми, но вы можете обернуть настроенный модуль и передать его как новый модуль.

Передача файлов с помощью @forward

Нам не всегда нужно использовать файл и обращаться к его членам. Иногда мы просто хотим передать его последующему импорту. Допустим, у нас есть несколько файлов, связанных с формами, и мы хотим подключить их все вместе как одно пространство имён. Мы можем сделать это с помощью @forward :

Члены таких проброшенных файлов не доступны в текущем документе и не создаётся никакого пространства имён, но эти переменные, функции и миксины будут доступны, когда другой файл подключит их через @use или пробросит всю коллекцию через @forward . Если переданные отдельные файлы содержат фактический CSS, он также будет передаваться без непосредственной его генерации до тех пор, пока не будет использован сам пакет. На этом этапе все это будет рассматриваться как один модуль с одним пространством имен:

Для заметки: Если вы попросите Sass подключить папку, то он будет искать в ней файл index или _index .

По умолчанию все публичные члены будут пробрасываться вместе с модулем. Но мы можем быть более избирательными c помощью условий show и hide и указания конкретных членов, которые мы хотим добавить или исключить.

Для заметки: когда функции и миксины имеют общее название, они добавляются и скрываются также вместе.

Для уточнения источников или избежания конфликтов имён проброшенных модулей мы можем добавить префиксы к членам подключенного файла c помощью as :

И, если нам нужно, мы всегда можем использовать через @use и пробросить через @forward один и тот же модуль, добавив оба правила:

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

И @use , и @forward должны быть объявлены в корне документа (не вложенном) и в начале файла. Только @charset и простые определения переменных могут появляться перед директивами импорта.

Переход к модульной системе

Чтобы протестировать новый синтаксис, я создала новую Sass библиотеку с открытым исходным кодом (Cascading Color Systems) и новый сайт для моей группы — оба еще в стадии разработки. Мне нужно было понять модули с точки зрения автора библиотеки и с точки зрения разработчика сайта. Давайте начнем с опыта «конечного пользователя» в написании стилей сайта с использованием синтаксиса модулей…

Поддержка и написание стилей

Использование модулей на сайте было приятным. Новый синтаксис поддерживает архитектуру кода, которую я уже использую. Все мои импорты глобальных настроек и инструментов находятся в одной директории (я называю её config ) с индексным файлом, который передаёт все, что мне нужно:

Разрабатывая другие части сайта, я могу импортировать эти инструменты и конфигурации везде, где они мне нужны:

Это даже работает вместе с моими существующими библиотеками, такими как Accoutrement и Herman, которые до сих пор используют старый синтаксис @import . Так как правило @import не будет заменено везде одним разом, разработчики Sass дали некоторое время для перехода. Модули доступны уже сейчас, но @import не устареет еще год или два — и будет удален из языка только через год после этого. В то же время, две системы будут работать вместе любым способом:

Если мы выполним @import для файла, который содержит новый синтаксис @use/@forward , то только публичные члены будут импортированы без пространства имён.
Если мы выполним @use или @forward для файла, который содержит старый синтаксис @import , мы получаем доступ ко всем вложенным импортам в виде единого пространства имен.

Инструмент миграции

Обновление не займет много времени, если мы будем использовать инструмент миграции, созданный Jennifer Thakar. Он может быть установлен с помощью NPM, Chocolatey или Homebrew:

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

Мигратор может быть запущен из командной строки и, надеюсь, будет добавлен в сторонние приложения, такие как CodeKit и Scout. Указываете ему на один файл Sass, например style.scss и говорите ему, какие миграции применить. На данный момент существует только одна миграция под названием module :

По умолчанию мигратор обновляет только один файл, но в большинстве случаев мы хотим обновить основной файл и все его зависимости: любые элементы, подключенные через @import , @forward или @use . Мы можем это сделать, указав каждый файл по отдельности или просто добавив флаг --migrate-deps .

Для пробного запуска мы можем добавить --dry-run --verbose (или в сокращенной форме -nv ) и посмотреть на результаты без изменения исходных файлов. Существует ряд других опций, которые мы можем использовать для настройки миграции — даже есть одна, специально предназначенная для помощи авторам библиотек в удалении старых пространств имен, созданных вручную — но я не буду описывать все из них здесь. Инструмент миграции полностью документирован на веб-сайте Sass.

Обновление опубликованных библиотек

Я столкнулась с несколькими проблемами на стороне библиотеки, в частности когда пыталась сделать пользовательские конфигурации доступными для нескольких файлов и найти решение для отсутствующих «цепных» конфигураций. Ошибки, связанные с порядком, могут быть сложными для отладки, но результаты стоят усилий, и я думаю, что скоро мы увидим несколько дополнительных исправлений. Мне все еще нужно поэкспериментировать с инструментом миграции на сложных пакетах и, возможно, написать дополнительную статью для авторов библиотек.

Важная вещь, которую нужно знать прямо сейчас, заключается в том, что Sass обеспечил нам защиту в течение переходного периода. Мало того, что старый импорт и модули могут работать вместе, мы можем создавать файлы «import-only», чтобы обеспечить более удобную работу для пользователей, которые по-прежнему подключают наши библиотеки через @import . В большинстве случаев это будет альтернативная версия основного файла пакета, и вы захотите, чтобы они были рядом: <name>.scss для пользователей модулей и <name>.import.scss для старых пользователей. Каждый раз, когда пользователь вызывает @import <name> , он загружает .import -версию файла:

Это особенно полезно для добавления префиксов для разработчиков, которые не используют модули:

Обновление Sass

Возможно, вы помните, что Sass несколько лет назад замораживал добавление новых функций, чтобы различные его реализации (LibSass, Node Sass, Dart Sass) догнали оригинальную реализацию на Ruby, чтобы в итоге полностью отказаться от неё. Заморозка завершилась в прошлом году с несколькими новыми функциями и активными обсуждениями и разработкой на GitHub — но не так торжественно. Если вы пропустили эти релизы, то вы можете почитать блог Sass:

Подобно CSS (начиная с CSS3), больше нет единого номера версии для новых выпусков. Все реализации Sass работают с одинаковой спецификацией, но у каждой из них есть уникальный график выпуска и нумерация, что отражено в информации о поддержке в новой красивой документации, дизайнером которой выступила Jina.

Модули Sass доступны с 1 октября 2019 года в Dart Sass 1.23.0.

Читайте также: