Import sass не работает

Директива @import

Sass расширяет CSS правило 1 @import , позволяя импортировать scss и sass файлы. Все импортированные scss и sass файлы могут быть объединены в одном результирующем css файле. Кроме того, любые переменные или миксины, объявленные в импортированном файле, могут использоваться в главном файле.

Компилятор ищет другие файлы sass в текущей папке, и в каталоге файлов sass при использовании в Rack, Rails или Merb. Дополнительные каталоги поиска могут задаваться с помощью опции :load_paths или ключ —load-path в командной строке.

@import использует название файла для импорта. По умолчанию, @import ищет Sass-файлы, но есть несколько правил, по которым @import отрабатывает как CSS-правило:

• Если расширение файла .css
• Если имя файла начинается с http://
• Если имя файла вызывается через url()
• Если правило @import включает в себя любые медиа-запросы

Если ни одно из вышеперечисленных условий не соблюдено, а расширение файлов .scss или .sass, то эти файлы будут импортированы. Если расширения файлов не указаны, то Sass попытается найти файлы по имени с расширением .scss или .sass и импортирует их. Например:

Источник

Gulp-sass выдает ошибку, когда применяются изменения в @import-файлах

Использую gulp-sass для компиляции scss файлов. В одном каталоге находится главный файл style.scss и файл, который импортируется в главный print.scss. main.scss нормально компилируется без ошибок и принимает значения в файле print.scss, но как только я хочу сохранить изменения в файле print.scss, выдает ошибку:

Ниже привожу файл gilfile.js и остальные файлы которые могут помочь для решения данной проблемы.

Общий html-код элемента:

Код элемента где вложенность .scss (style.scss) работает:

Как это исправить и что здесь не так ?

4 ответа 4

Я нашел такой выход из данной ситуации:

1) Устанавливаем gulp-sass-glob;
2) В задачах ставим его перед отслеживанием sass;
3) Устанавливаем вывод ошибки но не прекращение процесса отслеживания;
4) В случае ошибки несколько раз сохраняем файл, пока система не применит изменения или просто разово сохраняем главный файл, куда импортируем дочерние;
5) Все миксины и переменные придется импортировать в каждый файл, потому как в друго случае работать они не могут.

P.S это один из вариантов решения, ничего по делу не нашел, если кто-то знает более еффективный путь решения, буду рад увидеть и применить! Заранее спасибо!

Есть как минимум 3 варианта исправления проблемы:
1. Предполагает хорошее понимание Node.js , а так же работу node-sass и libsas , которые собственно и выполняют компиляцию файлов.
Его суть заключается в написании собственного обработчика подключаемых файлов. Если заглянуть в документацию к node-sass , то можно увидеть в объекте options ключ importer , который на самом деле является пользовательской функцией. Когда LibSass встречает директиву @import . Пользовательский импортер позволяет расширить движок LibSass как в синхронном, так и асинхронном режиме.
2. Этот способ основан на небольшом хаке в watch задаче и сводиться к добавлению таймера на выполнение sass задачи:

Здесь я использовал плагин gulp-watch , но думаю и со стандартным галповским вотчером это прокатит.
3. Использование именно плагина gulp-watch , он принимает вторым параметром объект с опциями, среди которых есть задержка равная по умолчанию 10 миллисекундам.

Подробнее можно почитать в документации

в style.scss надо сделать:

т.е. без нижних подчеркиваний. Из-за них и ошибка была.

Источник

gulp sass, не работает @import

Спросил VeniVidiVici,
10 декабря 2015

Вопрос

VeniVidiVici

Может кто сталкивался с подобным, не могу импортировать другие sass файлы в основной (main.sass)

К примеру подключение стилей файла reset.sass:

После запуска компилятора, появляется ошибка

Гуглил, предлагают вставить строчку includePaths: [‘./styles’] ,либо плагины. Но почему-то всё равно не получается((

Изменено 11 декабря 2015 пользователем VeniVidiVici

Ссылка на комментарий

Поделиться на других сайтах

16 ответов на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Похожие публикации

Всем привет народ! Очень надеюсь на вашу помощь! Дело в том что я создавал сайты по видео урокам некого Михаила Базарова. Вот собственно его видео уроки https://camouf.ru/video/new_store/phpstorm.html?PAGEN_2=2
Теперь конкретно о проблеме: Дело в том, что данный человек использует bootstrap и sass. Он компилирует все стили в сжатый css. В этом то и проблема. У меня не компилируется, а стили на сайте не работают.
Что я сделал: установил Ruby, прописал в командной строке gem install sass, успешно установился. Перезагрузил компьютер и подключился к своему удаленному серверу через PhpStorm. Обмен между локальным и удаленным сервером идет успешно. Но на сайте не работают стили прописанные в sass
Скрин https://imgur.com/a/vV6QZBV

UPD: Оказалось что путь к файлам неверный, мог бы кто нибудь помочь настроить?

Здравствуйте! Не могу сделать импорт в sass. Не могу понять в чем дело? По урокам делал, как все показывали, но не выходит! Импорт для оптимизаций и адаптаций сайта

Источник

Sass: директива @import

Один из способов создания DRY-кода заключается в разделении основных задач и сохранении его в отдельных файлах:

Можно использовать директиву CSS import , чтобы включить содержимое одного файла в другой.

Правило CSS @import

Директива @import является правилом CSS , которое какое-то время было очень популярным, прежде чем попало в немилость разработчиков из-за проблем с производительностью.

С помощью @import можно подключать CSS внутри других стилей. При этом подключаемые файлы могут либо располагаться на одном сервере или на другом:

Это позволило импортировать CSS в другие файлы, но данная практика стала редко использоваться из-за снижения производительности. Но Sass устраняет все проблемы, так как операторы @import удаляются из кода Sass при компиляции в CSS .

Директива @import в Sass

Sass расширяет правило CSS @import , чтобы оно работало с файлами .scss и .sass . Он импортирует файл по ссылке. При этом все переменные или примеси, определенные в импортируемом файле, могут быть использованы в основном файле:

Если в текущем каталоге существует файл typography.scss , его содержимое заменит оператор @import .

Sass import CSS делает все еще проще. Если вы забыли включить расширение, то компилятор будет искать файл с таким же именем и расширением .scss или .sass :

Приведенный выше код будет искать файл typography.scss или typography.sass в той же папке, где находится файл, в который импортируются стили.

По умолчанию Sass будет включать содержимое импортируемого файла вместо оператора @import . Но бывают случаи, когда Sass компилирует правило @import . Тогда вы получите в файле .css @import вместо кода файла, указанного в правиле. Sass компилирует @import , если:

• Расширение файла — .css ;
• Имя файла начинается с HTTP://; ;
• Имя файла — URL() ;
• @import содержит медиа-запросы.

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

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

Но можно импортировать несколько файлов в одном операторе @import :

Все три файла будут импортированы в указанном порядке.

Партиалы

Sass компилирует все файлы .scss или .sass внутри каталога, который он просматривает. Но если нужно импортировать файл, не обязательно компилировать его.

Если добавить в начале имени файла подчеркивание, Sass не будет его компилировать. Если вы не хотите, чтобы файл color.scss компилировался в color.css , то назовите файл _color.scss . В Sass такие файлы называются партиалами.

Можно пропустить подчеркивание при ссылке на файл внутри правила @import . Так же можно пропустить расширение:

Sass import CSS понимает, что нужно импортировать файл _color.scss ( или _color.sass ) из текущего каталога, если он существует.

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

Вложенные директивы @import

Также можно вложить @import в другое правило Sass , подобно тому, как вкладываются директивы @media .
Например, вы создаете партиал с именем _nav-bkgd.scss , который содержит только фоновый цвет элементов навигации:

Можно импортировать файл-партиал непосредственно внутри блока кода всех стилей меню навигации. Скажем, внутри класса с именем .global-nav :

Если оба файла находятся в одной папке, будет компилирован следующий код:

Нельзя импортировать таким образом все. Например, такие директивы, как @mixin и @charset , размещение которых допускается только на базовом уровне документа, не могут содержаться внутри CSS import .

Структура файлов и папок с помощью @import и партиалов

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

Я использовал эту структуру папок при создании небольшого сайта несколько лет назад. Мой каталог .scss содержал три папки ( modules , partials и vendor ), каждая с одним или несколькими файлами. Также у меня был один файл верхнего уровня, main.scss :

В папке vendor содержатся коды, получаемые из сторонних источников. В моем примере есть файл под названием _ico-moon.scss от поставщика Ico Moon.

Папка partials включает в себя код, который будет импортирован в другой файл, а затем скомпилирован с остальной частью кода в этом файле. В папке partials содержатся некоторые общие стили ( в файле _base.scss ) и стили отдельных элементов навигации ( в файле _navigation.scss ). Я хочу подключить CSS import , импортировать их и скомпилировать.

Формально файлы во всех трех папках являются партиалами, но partials — имя, назначенное этой папке в структуре. Вы можете изменить имя папки в своем проекте на другое, если это сбивает вас с толку. Главное, что эти файлы содержат код, который будет включен в другой файл, а затем скомпилирован с этим файлом.

Папка modules включает в себя код, который не будет скомпилирован. Она содержит такие компоненты, как примеси, функции и переменные. В моем случае, это два файла _color.scss и _typography.scss . Они содержат переменные и ничего больше.

Я использовал файлы переменных, чтобы быстро показать клиенту имеющиеся варианты дизайна. Вместо одного файла _color.scss , у меня были _color-red.scss , _color-green.scss , _color-blue.scss , в цветовой гамме которых доминировал один конкретный цвет. Так я мог быстро показать цветовые вариации дизайна.

Что касается импорта файлов, за это отвечал файл main.scss . В самом начале файла размещалась серия операторов Sass import CSS :

Все файлы технически являются партиалами, поэтому не нужно включать подчеркивание или расширение файла при обращении к нему в операторе.

Мысли напоследок

Правило @import — это одно из правил CSS , которые ранее не рекомендовали использовать. Но все проблемы, связанные с ним, решаются с помощью Sass .

Можно сделать свой код более простым в обслуживании и поддержке, используя CSS import и разбивая большие файлы на более мелкие. Они импортируются в другие файлы, а затем сводятся в одном файле верхнего уровня, который компилируется в CSS .

Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!

Источник

Знакомство с Sass модулями

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

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

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

Авторы Sass-пакетов (как и я) пытались обойти проблемы с пространством имен, вручную расставляя префиксы для переменных и функций — но Sass модули гораздо более мощное решение. Вкратце, @import заменяется более явными правилами @use и @forward . В течение следующих нескольких лет @import в Sass будет считаться устаревшим, а затем будет удален. Вы по-прежнему можете использовать CSS Import ‘ы, но они не будут компилироваться Sass’ом. Но не волнуйтесь, существует инструмент для миграции, который поможет вам обновиться.

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

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

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

Когда мы подключаем файл через @use , Sass автоматически генерирует пространство имен на основе имени файла.

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

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

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

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

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

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

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

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

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

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

Первый аргумент это URL модуля (как и в @use ), но он может быть изменен динамически с помощью переменной, даже с использованием интерполяции, например theme-# <$name>. Второй (необязательный) аргумент принимает структуру map с конфигурацией:

Аргумент $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 . В большинстве случаев это будет альтернативная версия основного файла пакета, и вы захотите, чтобы они были рядом: .scss для пользователей модулей и .import.scss для старых пользователей. Каждый раз, когда пользователь вызывает @import , он загружает .import -версию файла:

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

Обновление Sass

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

• CSS импорты и совместимость с CSS (Dart Sass v1.11)
• Параметры директивы content и цветовые функции (Dart Sass v1.15)

В настоящее время Dart Sass является канонической реализацией и, как правило, первым внедряет новые функции. Я рекомендую переключиться на него, если хотите получать всё самое последнее. Вы можете установить Dart Sass с помощью NPM, Chocolatey или Homebrew. Он также отлично работает c gulp-sass.

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

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

Источник