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

Обновлено: 03.07.2024

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

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

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

⚠️ Внимание!

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

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

Загрузка участников постоянная ссылка Загрузка участников

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

Члены (переменные, функции и примеси), загруженные с помощью @use, видны только в таблице стилей, которая их загружает. Другие таблицы стилей должны будут написать свои собственные правила @use, если они также хотят получить к ним доступ. Это помогает легко определить, откуда именно приходит каждый участник. Если вы хотите загрузить участников из многих файлов одновременно, вы можете использовать правило @forward, чтобы перенаправить их всех из одного общего файла.

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

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

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

Выбор постоянной ссылки на пространство имен Выбор пространства имен

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

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

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

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

Частные участники постоянная ссылка Частные участники

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

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

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

Синтаксис SCSS

Синтаксис Sass

Конфигурация постоянной ссылки Конфигурация

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

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

Постоянная ссылка с миксинами С миксинами

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

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

Переназначение переменных постоянная ссылка Переназначение переменных

После загрузки модуля вы можете переназначить его переменные.

Синтаксис SCSS

Синтаксис Sass

Это работает, даже если вы импортируете модуль без пространства имен, используя as * . Присвоение имени переменной, определенной в этом модуле, перезапишет ее значение в этом модуле.

⚠️ Внимание!

Встроенные переменные модуля (например, math.$pi ) нельзя переназначить.

Поиск постоянной ссылки модуля Поиск модуля

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

⚠️ Внимание!

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

Пути загрузки постоянная ссылка Пути загрузки

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

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

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

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

Частичные постоянная ссылка Частичные

Согласно соглашению, файлы Sass, предназначенные для загрузки только как модули, а не компилируемые сами по себе, начинаются с _ (как в _code.scss ). Они называются partials и говорят инструментам Sass не пытаться компилировать эти файлы самостоятельно. Вы можете не использовать _ при импорте фрагмента.

Файлы индекса постоянная ссылка Файлы индекса

Если вы напишете _index.scss или _index.sass в папке, индексный файл будет загружен автоматически, когда вы загрузите URL-адрес самой папки.

Sass сохраняет код CSS СУХИМ (не повторяйтесь). Один из способов написать СУХОЙ код — хранить связанный код в отдельных файлах.

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

Импорт файлов Sass

Как и CSS, Sass также поддерживает директиву @import.

Директива @import позволяет включать содержимое одного файла в другой.

Синтаксис импорта Sass:

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

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

Пример

Давайте рассмотрим пример. Предположим, у нас есть файл сброса с именем "reset.scss", который выглядит следующим образом:

Пример

Синтаксис SCSS (reset.scss):

и теперь мы хотим импортировать файл "reset.scss" в другой файл с именем "standard.scss".

Вот как мы это делаем: Обычно директиву @import добавляют в начало файла; таким образом его содержимое будет иметь глобальную область действия:

Синтаксис SCSS (standard.scss):

набор шрифтов для основного текста: Helvetica, без засечек;
Размер шрифта: 18px;
цвет: красный;
>

Итак, когда файл "standard.css" транспилируется, CSS будет выглядеть так:

html, body, ul, ol <
margin: 0;
заполнение: 0;
>

набор шрифтов для основного текста: Helvetica, без засечек;
Размер шрифта: 18px;
цвет: красный;
>

Частицы Sass

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

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

Частичный синтаксис Sass:

В следующем примере показан частичный файл Sass с именем "_colors.scss". (Этот файл не будет передан непосредственно в "colors.css"):

Пример

Теперь, если вы импортируете частичный файл, опустите символ подчеркивания. Sass понимает, что он должен импортировать файл "_colors.scss":

Пример

набор шрифтов для основного текста: Helvetica, без засечек;
Размер шрифта: 18px;
цвет: $myBlue;
>

CSS расшифровывается как Sassy Cascading Style Sheets и представляет собой расширение CSS, добавляющее вложенные правила, переменные, примеси, селекторы, наследование и многие другие функции. Теперь Scss написан на Ruby и призван значительно облегчить нашу жизнь при написании CSS.

CSS или SCSS — что лучше?

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

КАК ПОЛЬЗОВАТЬСЯ SCSS

Scss помогает нам организовать беспорядок и превратить его в действительно конкретные модули и 16 фрагментов кода. Другая причина в том, что синтаксис легко выучить, особенно если мы уже знаем CSS. Теперь есть несколько специфических отличий от Scss, таких как использование отступов и знаков доллара для создания переменных.

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

Scss — это препроцессор. Это означает просто программу, которая обрабатывает входные данные и производит выходные данные, а затем эти выходные данные будут использоваться в другой программе. Sass имеет разные синтаксисы, теперь есть два популярных, называемых SCSS и SAS, поэтому у нас есть SCSS, который расшифровывается как Scssy CSS, и это надмножество синтаксиса CSS3, а SCSS больше похож на посредника между Scss и CSS, тогда у нас есть настоящий Scss. код, поэтому Scss будет просто полноценным файлом Scss, который будет скомпилирован в CSS.

КАК РАБОТАЕТ SCSS?

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

Преимущества использования SCSS?

SCSS более выразителен
Мы можем сжать несколько строк кода в синтаксисе SASS до гораздо меньшего количества строк SCSS. В SCSS стандартные строки также могут быть сжаты, когда я делаю что-то сложное, и могут быть снова расширены для справки.

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

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

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

SCSS – это препроцессор для CSS, позволяющий использовать дополнительные функции в таблицах стилей CSS. Он автоматически компилирует файлы .scss в файлы .css для чтения браузером.

Зачем использовать SCSS?

SCSS позволяет использовать переменные, вложенные селекторы, импорт, примеси и другие функции, которые пока недоступны в CSS. Хотя для достижения мастерства требуется некоторая практика, вы можете писать CSS прямо в файлы SCSS.

Быстрая настройка

Можно скомпилировать SCSS самостоятельно, однако большинство сборщиков веб-приложений легко используют сторонние библиотеки, чтобы сделать это за вас. В этом руководстве мы настроим SCSS с проектом Vanilla JS Parcel, а также с приложением React, используя Create-React-App.

Настройка HTML/SCSS (посылки)

Parcel — это сборщик веб-приложений, похожий на Webpack, но с меньшей (нулевой) конфигурацией. Вы можете следовать этому руководству по настройке и размещению простых приложений Parcel или просто следовать приведенным ниже инструкциям.

Здесь мы создаем новый проект в папке проекта участка и инициализируем новое приложение узла. Затем мы установили модуль JavaScript sass, который будет компилировать для нас наши таблицы стилей .scss.

Примечание. Sass — это оригинальное название и пакет для более популярного SCSS

Далее мы создадим файлы для наших html и css. В index.html добавьте следующее

Parcel позаботится обо всех наших ресурсах и скомпилирует для нас scss, поэтому все, что нам нужно сделать, это импортировать ./styles.scss как обычную таблицу стилей.

В styles.scss добавьте следующее

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

Вы можете проверить это самостоятельно в браузере с помощью следующей команды терминала

Настройка React (создать-реагировать-приложение)

Scss можно использовать в проекте create-реагировать-приложение, просто

1. установка зависимого от разработчиков узла-sass
1. импорт файлов .scss в ваши компоненты

Чтобы настроить новый проект SCSS React, введите следующие команды (отдельно)

create-react-app создаст приложение React с таблицей стилей .css, которую мы можем просто изменить на .scss .

Не забудьте также изменить оператор импорта в файле app.js.

Поскольку мы всегда можем написать css внутри наших файлов scss, запустите приложение, чтобы начать использовать SCSS.

Вы можете протестировать приложение, добавив следующий SCSS в app.scss

Здесь мы используем переменные SCSS, объявляя их после знака $. Переменные можно задать один раз и использовать в нескольких селекторах (и файлах), чтобы обеспечить быстрое крупномасштабное изменение.

В этом руководстве по созданию-реагированию-приложению содержится более подробная информация о том, как работает этот инструмент

Настройка папки SCSS

SCSS также позволяет импортировать файлы .scss в другие файлы .scss. Это позволяет нам создать файл main.scss, который импортирует все наши отдельные файлы .scss. Мы создадим несколько разных файлов .scss для обработки определенных функций или функций на нашей странице. Эта настройка позволяет нам масштабировать наше приложение, сохраняя при этом читабельность и доступность наших таблиц стилей. Добавьте в приложение следующие папки и файлы сейчас

В следующей настройке папки SCSS мы будем использовать main.scss в качестве нашей основной таблицы стилей и импортируем ее в наше приложение React (либо в app.js, либо в index.js). Добавьте следующие импорты в main.scss сейчас

При создании новых функций или компонентов добавляйте дополнительные элементы импорта внизу этой страницы. Каждый файл импортируется по порядку, поэтому сначала нужно импортировать mixins.scss и variable.scss.

Миксины Media Query

Мы можем упростить наши медиа-запросы для конкретных устройств в качестве примера миксина. Добавьте следующее в mixins.scss

Теперь у нас есть доступ к медиазапросам phone, tab-port, tab-land и big-desktop, если мы хотим разрабатывать специально для разрешений за пределами 1040–1500 пикселей (в данном случае). Не стесняйтесь изменять эти значения для любых точек останова, которые имеют для вас наибольшее значение. Также можно добавить дополнительные точки останова, используя тот же шаблон.

Чтобы использовать эти примеси точек останова, добавьте в любой селектор CSS следующее

Этот синтаксис @include response(device) < >может использоваться с указанными выше примесями. Добавьте эту ссылку в медиа-запросы, которые мы настроили в .mixins.scss .

Список переменных

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

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

Базовые стили

Назовите этот файл как хотите, здесь мы будем включать глобальные стили, которые хотим добавить на нашу страницу. Добавьте следующее в base.scss

Стили анимации

Наконец, в файл animation.scss мы можем включить любую анимацию ключевых кадров, которую мы хотим использовать.

Дополнительные компоненты

В этом примере мы также настраиваем файлы nav.scss и footer.scss. Используйте эти файлы (и синтаксис) для добавления таблиц стилей для конкретных функций по мере их создания. Разделяя как можно больше основных функций, SCSS упрощает настройку и поддержку стилей.

Это некоторые из основных методов и настроек для настройки SCSS в ваших проектах.

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

Предварительная обработка

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

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

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

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

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

Sass просматривает все файлы в папке app/sass на наличие изменений и компилирует CSS в папку public/stylesheets.

Переменные

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

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

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

Вложение

При написании HTML вы, вероятно, заметили, что он имеет четкую вложенную и визуальную иерархию. CSS, с другой стороны, нет.

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

Имея это в виду, вот пример некоторых типичных стилей навигации по сайту:

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

Вы заметите, что селекторы ul , li и a вложены в селектор навигации. Это отличный способ упорядочить CSS и сделать его более читабельным.

Частичные

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

Модули

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

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

Обратите внимание, что мы используем @use 'base'; в файле styles.scss. Когда вы используете файл, вам не нужно включать расширение файла. Sass умен и все сделает за вас.

Миксины

Некоторые вещи в CSS немного утомительны для написания, особенно с CSS3 и множеством существующих префиксов поставщиков. Mixin позволяет вам создавать группы объявлений CSS, которые вы хотите повторно использовать на своем сайте. Это помогает сохранить ваш Sass очень сухим. Вы даже можете передавать значения, чтобы сделать миксин более гибким. Вот пример для темы .

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

Чтобы создать миксин, используйте директиву @mixin и дайте ему имя. Мы назвали нашу тему миксина . Мы также используем переменную $theme внутри круглых скобок, чтобы мы могли передать тему, какую захотим. После создания миксина вы можете использовать его как объявление CSS, начинающееся с @include, за которым следует имя миксина.

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

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

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

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

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

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

Операторы

Выполнение математических операций в CSS очень полезно. В Sass есть несколько стандартных математических операторов, таких как +, -, *, math.div() и %. В нашем примере мы собираемся выполнить простую математику, чтобы рассчитать ширину статьи и боковых сторон .

Синтаксис SCSS

Синтаксис Sass

Вывод CSS

Мы создали очень простую плавную сетку на основе 960 пикселей. Операции в Sass позволяют нам делать что-то вроде получения значений пикселей и без особых хлопот преобразовывать их в проценты.

Текущие выпуски:
Дарт Сасс1.49.9
LibSass3.6.5
Руби Сасс ⚰
Руководство по внедрению

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