Css файл можно переименовать в scss и он будет валидным
CSS — действительно простой и понятный язык, но когда он становится слишком длинным — скажем, для тысячи строк, он превращается в «кошмар» обслуживания. Все будет слишком сложно поддерживать, и мы потеряемся в том, какие правила стиля нужно соблюдать или перезаписывать. По этой причине был создан препроцессор CSS, чтобы сделать запись CSS программируемой и более удобной в обслуживании.
Среди разработчиков и дизайнеров пользуется популярностью Sass, о котором мы ранее писали в таких статьях:
Если вы только что перешли с CSS на Sass, возможно, вы думаете преобразовать свой старый CSS в Sass или SCSS. Что ж, если это так, вы можете использовать сторонний инструмент под названием css2sass.
Использование CSS2SASS
Этот инструмент прост и интуитивно понятен — мне, возможно, даже не придется рассказывать вам, как его использовать, но в демонстрационных целях мы проведем несколько тестов с этим инструментом. Во-первых, учитывая следующие коды CSS:
заголовок .nav заголовок .nav li заголовок .nav li a
Мы хотели бы преобразовать его в синтаксис Sass, который превращается в:
заголовок .nav margin-top: 100px li margin-left: 10px высота: 30px line-height: 10px
Теперь правила стиля вложены в предыдущие селекторы с использованием отступа для разделения уровня каскадирования. Если преобразовать его в синтаксис SCSS, каскад будет отличаться фигурными скобками, как в CSS.
Те же правила стиля
Давай попробуем еще раз. На этот раз у нас есть два следующих селектора с одинаковыми правилами стиля, и мы скроем их в синтаксис Sass.
Сгенерированный вывод довольно умный, этот инструмент объединяет селекторы в одну строку и разделяет их запятой, как показано ниже.
Хотя на самом деле это не то, чего я ожидал. Было бы лучше, если бы вывод был в Наследование селектора, вероятно, будет что-то вроде кода ниже.
Результат такой, как ожидалось. Этот инструмент вкладывает псевдокласс и комбинацию селектора со знаком &, вот так.
Я не совсем уверен, можно ли интегрировать Компас в этот инструмент преобразования. Было бы здорово, если бы мы смогли преобразовать следующее правило CSS3 @ font-face:
… В миксин Compass @ font-face следующим образом
@include font-face («DroidSansRegular», файлы шрифтов («DroidSansRegular-webfont.ttf», «DroidSansRegular-webfont.otf», «DroidSansRegular-webfont.woff»), «DroidSansRegular-webfont.eot», обычный);
Но в целом этот инструмент — одно из многих хороших мест для тех, кто только начинает работать с Sass. Преобразуйте свой старый CSS, и вы увидите, как он построен в синтаксисе Sass или SCSS.
Ранее была опубликована статья "С чего начать изучение и использование SASS/SCSS?" и назрел вопрос вполне логичный вопрос: "В чем разница между SASS и SCSS?". Тема интересная, поэтому давайте разбираться.
Когда речь идет о Sass , как правило, мы подразумеваем препроцессор и язык в целом.
Тем не менее, используя Sass (препроцессор) мы можем использовать два различных синтаксиса:
- Sass (отступы) ;
- SCSS ( CSS-подобный синтаксис).
@while
Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной @mixin .
Рассмотрите следующий пример:
Вы также можете использовать составные миксины, например как:
Вы также можете передавать переменные в миксинах:
Будет скомпилено в:
Вы также можете определять функции, возвращающие значение. Для примера.
Будет скомпилировано в:
Вы столкнетесь с ситуацией, когда вам нужно будет переиспользовать стили. Рассмотрите следующий пример:
Оба будут иметь одинаковые стили, кроме цвета.
Это будет скомпилировано в:
Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.
Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать % перед селектором.
В сети ведётся много споров о том, стоит ли использовать CSS-препроцессор в разработке. По моему личному мнению, препроцессор излишен для маленьких веб-проектов и приложений.
Тем не менее, по мере разрастания проекта поддержка и читаемость CSS становится всё труднее. Разработчики тратят больше времени при работе с тысячами строк CSS-правил, из-за чего повышается стоимость проекта. Поскольку проект становится больше, CSS вызывает некоторые проблемы, такие как:
- Большие усилия для внесения небольших изменений
- Трудности при структурировании кода
- Избыточность кода
- Бесконечные строки CSS-классов и правил
Это программа/инструмент, имеющая свой собственный синтаксис, который затем компилируется в стандартный CSS-код.
Препроцессор имеет свой собственный синтаксис, чтобы разработчики могли писать более простой и чистый CSS-код. Так как браузеры не понимают такой синтаксис, он преобразовывается, и на выходе получается привычный CSS в отдельном файле.
Существуют различные препроцессоры, такие как Sass, Less и Stylus. В этой статье я расскажу о некоторых преимуществах Sass.
Sass является одним из наиболее широко используемых CSS-препроцессоров. Он имеет различные функции, помогающие разработчикам писать CSS-код лучше и чище. За более подробной информацией вы можете обратиться к официальному сайту Sass и GitHub-репозиторию.
Немного истории
Первоначально Sass являлся частью другого препроцессора — Haml, который придумали и написали разработчики из Ruby.
Поэтому стили Sass использовали Ruby-подобный синтаксис, без скобок, без точек с запятой и строгих отступов, например:
По сравнению с синтаксисом CSS есть ощутимая разница.
Переменная задается через ! , а не $ , символ присвоения значения = , а не :.
Но так Sass выглядел до версии 3.0, выпущенной в мае 2010 года, в которой был представлен совершенно новый синтаксис под названием SCSS или Sassy CSS .
Его целью было приблизить синтаксис Sass к CSS , сделав его более совместимым с CSS :
SCSS определенно более близок к CSS , чем Sass . Разработчики Sass потрудились над тем, чтобы сделать оба синтаксиса ближе друг к другу, заменив ! (знак переменной) и = (знак присвоения) на $ и : из CSS .
Поэтому при запуске нового проекта вы можете задуматься, какой синтаксис использовать. Позвольте мне помочь принять Вам решение.
FAQ: Sass или SCSS
Это часто задаваемый вопрос. На самом деле, они оба являются Sass-препроцессором, просто имеют разный синтаксис. Проще говоря, SCSS — это новый синтаксис Sass 3 версии.
Пример синтаксиса Sass:
Пример синтаксиса SCSS:
Как мы можем видеть, SCSS (Sassy CSS) имеет CSS-подобный синтаксис, который намного легче читается. Он является расширением CSS, в то время как синтаксис Sass имеет более существенные отличия. Они также имеют разное расширение файла: .sass и .scss .
Подробнее об этом можно прочитать здесь. А теперь давайте перейдем к особенностям Sass.
В одном проекте разные CSS-классы могут содержать одинаковое правило или группу правил. Например, на странице у нас есть 20 блоков с разным цветом фона:
Позже наш клиент передумал и захотел блоки большего размера. Поэтому мне нужно поменять значения свойств width and height один за другим для каждого класса. А классов может быть и 50. В реальном программировании это может занять много времени. Как я уже упоминал выше, это пример больших усилий для небольших изменений.
Как можно сделать это более эффективно?
Sass предоставляет решение в виде переменных. Как и в других языках программирования, мы можем использовать переменные для хранения значений и использовать их повторно.
Возвращаясь к примеру выше, можно задать переменные для свойств width и height :
Если в дальнейшем нужно будет внести изменения, мы должны будем поменять значения всего лишь один раз:
CSS теперь также поддерживает переменные, но они не работают в IE и старых версиях других браузеров:
Стандартный CSS не поддерживает вложенность. Мы не можем написать класс внутри другого класса. С ростом проекта это приводит к проблемам с читаемостью. Структура также выглядит не очень хорошо.
Например, создадим ниже в HTML навигационное меню с гиперссылками:
HTML поддерживает вложенный код. Но CSS без вложенности будет выглядеть так:
Нам приходится добавлять класс nav для каждого тега, даже для псевдокласса hover, потому что nav является родительским тегом для всех элементов. Однако, Sass поддерживает вложенность:
Используя Sass, мы можем писать более структурированный код, как в HTML. Больше не нужно добавлять nav для каждого класса, что также предотвращает избыточность кода.
Важно: не рекомендуется допускать более 3 уровней вложенности.
Выше мы узнали, как применять переменные для CSS-правил. Но что, если нам нужно использовать несколько правил вместе? Для этих целей у Sass есть миксины.
14 Answers 14
After having the same issue, I got confused with all the answers here and the comments over the repository of sass in github.
I just want to point out that as December 2014, this issue has been resolved. It is now possible to import css files directly into your sass file. The following PR in github solves the issue.
The syntax is the same as now - @import "your/path/to/the/file" , without an extension after the file name. This will import your file directly. If you append *.css at the end, it will translate into the css rule @import url(. ) .
In case you are using some of the "fancy" new module bundlers such as webpack, you will probably need to use use ~ in the beginning of the path. So, if you want to import the following path node_modules/bootstrap/src/core.scss you would write something like
@import "~bootstrap/src/core" .
NOTE:
It appears this isn't working for everybody. If your interpreter is based on libsass it should be working fine (checkout this). I've tested using @import on node-sass and it's working fine. Unfortunately this works and doesn't work on some ruby instances.
This seems to be implemented in libsass but when using the ruby implementation of sass, it seems that this syntax works, but only if you have sass-css-importer required. At least that's what I'm seeing. Can anyone else confirm this?
Are you sure you have the latest version of sass? I have been using this syntax for a while and it works fine with both ruby and nodejs interpreters. Have you checked if you're not placing an extension after the file name? The correct syntax is @import "path/to/style/file (without the .css extension)
I'm using ruby sass v3.4.18 (with Jekyll) according to my Gemfile.lock. Still seeing Error: File to import not found or unreadable: cssdep/cssfile . If I create a cssdep/cssfile.scss it suddenly works. So not a path issue, for some reason I still can't include '.css' files from SASS :(
ruby -v : ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v : Sass 3.4.17 (Selective Steve) not working here
Thank you for this! I was able to import normalize.css using node-sass with @import "node_modules/normalize.css/normalize";
To cut the long story short, the syntax in next:
Вложенные импорты:
Если demo.scss включает в себя:
Будет скомпилировано в
SCSS переменные начинаются с символа $.
Будет скомпилировано в:
Переменные доступны только внутри уровня вложенного селектора где они объявляются. Если вы хотите хотите, чтобы переменная была доступна за пределами скоупа, то вам нужно добавить к ней !global
Вы можете указывать переменные в отдельном файле и вы можете импортировать этот scss файл, чтобы использовать эти переменные. Это как конфиг файл для вашего проекта. Если вы меняете значение переменных, то оно будет изменено везде, где вы его используете. Это очень эффективно для больших проектов. Мы увидим это чуть позже.
Вы также можете производить разные операции в SCSS. Для примера:
CSS vs. SCSS селекторы.
CSS отрывок выше, может быть написан в SCSS таким образом:
Как мы можем видеть, SCSS структура более схожа с DOM структурой. Это позволяет нам организовать наш CSS более эффективно. Вот примеры:
Будет скомпилировано в:
Ссылаясь на родительский селектор:
& будет заменен родительским селектором. То есть код выше, будет эквиалентен:
Частичный
Если вы не хотите компилировать SCSS файл как CSS, вы можете использовать “ _ ” перед названием файла.
Плюсы SCSS синтаксиса
Во-первых, он полностью совместим с CSS . Это означает, что вы можете переименовать файл CSS в .scss , и он будет работать, как ни в чем не бывало.
Создание SCSS , полностью совместимого с CSS , всегда было приоритетом для поддержки Sass с самого момента релиза SCSS , и, на мой взгляд, это серьезный аргумент.
Кроме того, они стараются следить, за тем, что может стать валидным синтаксисом CSS в будущем, и реализовать это (отсюда @directives ).
Так как SCSS совместим с CSS , он практически не требует дополнительного обучения. Синтаксис почти тот же: в конце концов, это просто CSS с некоторыми дополнениями.
Это важно для начинающих разработчиков: они смогут быстро начать составлять код, почти ничего не зная о Sass .
Кроме того, он более читаем, так как конкретные конструкции уже имеют смысл. Когда вы видите @mixin , вы знаете, что это объявление примеси; когда вы видите @include , вы знаете, что это вызов примеси.
Нет никаких привязок, и все имеет смысл без интерпретации.
Также почти все существующие инструменты, плагины и демо-презентации для Sass разрабатываются с помощью синтаксиса SCSS . Этот синтаксис становится все более ориентированным на профессионалов и выбирается ими по умолчанию (если не является единственно возможным).
В основном в силу указанных выше причин. Например, становится все труднее найти подсветку чистого синтаксиса Sass с отступами; как правило, доступны только варианты подсветки SCSS .
Использование Sass
Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:
Если вы на Windows, то возможно вам надо установить сначала Ruby.
Для запуска Sass из командной строки просто используйте:
sass input.scss output.css
Вы также можете указать Sass следить за файлом и обновлять CSS каждый раз, когда Sass файл меняется:
sass --watch input.scss:output.css
Если у вас есть директория с множеством Sass файлов, то вы также можете указать Sass следить за всей директорией:
sass --watch app/sass:public/stylesheets
Используйте sass --help для полной документации.
Нормальный импорт.
to import (include) the raw CSS-file
the syntax is **without `.css`** extension at the end (results in actual read of partial `s[ac]ss|css` and include of it inline to SCSS/SASS):
Плюсы синтаксиса Sass с отступами
Хотя этот синтаксис может казаться вам немного странным, но у него есть несколько интересных моментов. Прежде всего, он короче и его легче набирать. В нем нет скобок и точек с запятой, они не нужны.
В нем не нужны @mixin или @include , когда достаточно простого символа: = и + .
Также в Sass присутствуют чистые стандарты кодирования из-за использования отступов. Так как неправильный отступ может сломать всю таблицу стилей .sass , здесь в первую очередь обеспечивается, чтобы код был чистым и надлежащим образом отформатированным.
Существует только один метод составления кодов Sass : составлять их правильно.
Не забывайте, что отступы имеют логическое значение в Sass . Когда применяется отступ блока селектора, это означает, что это вложенный селектор.
Простой факт смещения .element-b на один уровень вправо означает, что он является дочерним элементом от .element-a , что приводит к изменению результативного CSS -кода. Так что, будьте осторожны с отступами!
Полагаю, что синтаксис на основе отступов больше понравится команде, работающей в основном с Ruby/Python , нежели команде PHP/Java программистов (но это не точно).
Заключение
Выбор в любом случае остается за Вами, но если у вас нет действительно веских причин использовать синтаксис с отступами, я бы настоятельно рекомендовал использовать SCSS , а не Sass . Это не только более просто, но и более удобно. Если Вы совсем новичок, то SCSS — это то, что нужно. Сходство с CSS не отпугнет Вас от изучения верстки на препроцессорах. Но после уже можно рассмотреть вариант использования Sass в своих проектах. Главное не бояться использовать новое технологии в своей работе!
P.S. Обратите внимание, Sass никогда не обозначается аббревиатурой из прописных букв, независимо синтаксис ли это или язык программирования. В то время как SCSS всегда обозначается большими буквами.
Is there anyway to import a regular CSS file with Sass's @import command? While I'm not using all of the SCSS syntax from sass, I do still enjoy it's combining/compressing features, and would like to be able to use it without renaming all of my files to *.scss
Yes, there is a way: just remove '.css' extension in css file path in @input statement :) (works for sass version >=3.2)
Что такое миксин?
Миксины (также иногда называемые примесями) являются функциями Sass, которые группируют CSS-правила. Мы можем использовать их в качестве переменных.
Миксин создается с помощью команды @ mixin и названия миксина:
Также можно создать миксин в виде функции и добавлять к ней параметры:
После создания миксина мы можем воспользоваться им в любом классе при помощи команды @ include. Таким образом, мы можем подключить миксин my-font вместо того, чтобы каждый раз писать 4 строки правил для шрифта. Такой подход упрощает код.
Использование миксинов — это хороший способ предотвратить избыточность кода.
Наконец, мы можем разбить наши огромные CSS-файлы на более мелкие с помощью Sass-функции импорта. Гораздо проще читать и поддерживать маленькие файлы, а не один большой файл с бесконечными строками.
Всё, что требуется сделать — это импортировать один Sass-файл в другой, используя команду @ import:
При указании пути к файлу не нужно добавлять расширение .scss, Sass найдет его и без этого.
Таким образом, в статье были представлены некоторые важные особенности Sass, которые помогут писать более эффективный CSS-код. Чтобы разобраться в этом получше, вы можете установить Sass в вашу систему. Или же можно сразу начать практиковаться на codepen.io.
to import the CSS-file in a traditional way
syntax goes in traditional way, **with `.css` extension** at the end (results to `@import url("path/to/file.css");` in your compiled CSS):
And it is damn good: this syntax is elegant and laconic, plus backward compatible! It works excellently with libsass and node-sass .
answer might be updated, as soon as something changes.
just to clarify, importing the css as sass worked like this for me: @import url("path/to/file-without-css-extension");
This doesn't actually work in the ruby-based version of sass. For example, the command: sass myFile.scss:output.css fails with a css import, but works when you change the .css file's extension to .scss. Run with the latest version as of the writing of this comment: 3.4.22 / Selective Steve. This also affects any task runners using the ruby version, like grunt-contrib-sass.
@ansorensen, I think there's confusion from your side. What do you mean by "works when you change the .css file's extension to .scss"? The whole idea was exactly about regular CSS files, and two ways of working with them (don't confuse with importing SCSS). Please read one more time the question and the answer.
@Farside No confusion. Import 'path/to/file' syntax doesn't work in the latest version of the sass gem in Ruby. When I run sass with an import, the import works successfully when the file at the path imported has an .scss extension and fails when the file has a .css. The question asks for an import of css into scss, and you provide an answer for lib-sass & node-sass. I'm commenting that this functionality is not in the ruby-based versions of sass.
Looks like this is unimplemented, as of the time of this writing:
For libsass (C/C++ implementation), import works for *.css the same way as for *.scss files - just omit the extension:
This will import path/to/file.css .
See this answer for further details.
See this answer for Ruby implementation (sass gem)
@kleinfreund not true with Sass 3.3.1. The @import statement is not changed at all and appears in the resulting CSS file, Sass doesn't include the referenced CSS file like @GSto is asking. It looks like it will be implemented in Sass 3.4 or 4.0
If you're using Gulp or Grunt, just use a different tool to import your CSS files, it's easier and it works now. I use gulp-import-css, I'm not sure what's the Grunt equivalent.
"Import works for *.css the same way as for *.css files" is a tautology. You meant for one of those to be *.scss , right?
You must prepend an underscore to the css file to be included, and switch its extension to scss (ex: _yourfile.scss ). Then you just have to call it this way:
And it will include the contents of the file, instead of using the CSS standard @import directive.
Thank you! This works, but I found that I didn't need to pre-pend an underscore in order for it to work. Is there something that I'm missing with the underscore?
In case anyone's wondering, this works because Sass' SCSS syntax is a superset of CSS3. That's also why the semicolon is needed.
Good news everyone, Chris Eppstein created a compass plugin with inline css import functionality:
Now, importing a CSS file is as easy as:
Fails due to using deprecated starting point. "What is, but can never be. " I'm sure it was great when it first came out, but it needs an update to function again, or you must install deprecated plugins. Thanks, C§
If you have a .css file which you don't wish to modify, neither change its extension to .scss (e.g. this file is from a forked project you don't maintain), you can always create a symlink and then import it into your .scss .
Creates a symlink:
Imports symlink file into a target .scss :
Your target output .css file is going to hold contents from imported symlink .scss file, not a CSS import rule (mentioned by @yaz with highest comment votes). And you don't have duplicated files with different extensions, what means any update made inside initial .css file immediately gets imported into your target output.
@LocalPCGuy it is, when both files ( .css and created symlink) are available to everyone via a shared repository, for example.
I just did this and was gonna answer about sym links on this thread, but glad it's already here! It's true that this need is rare, but my situation involved not wanting to modify the CSS file at all (because it was a bower file), so building a symlink and importing that worked perfectly.
For Windows users, the same functionality would have a different syntax mklink /H , and it's called hard link @mrsafraz.
You can use a third-party importer to customise @import semantics.
node-sass-import-once, which works with node-sass (for Node.js) can inline import CSS files.
Example of direct usage:
Note that node-sass-import-once cannot currently import Sass partials without an explicit leading underscore. For example with the file partials/_partial.scss :
- @import partials/_partial.scss succeeds
- @import * partials/partial.scss fails
In general, be aware that a custom importer could change any import semantics. Read the docs before you start using it.
If I am correct css is compatible with scss so you can change the extension of a css to scss and it should continue to work. Once you change the extension you can import it and it will be included in the file.
If you don't do that sass will use the css @import which is something you don't want.
unfortunately sometimes the imported css files are out of your control, as in a library which packages some static assets.
I figured out an elegant, Rails-like way to do it. First, rename your .scss file to .scss.erb , then use syntax like this (example for highlight_js-rails4 gem CSS asset):
Why you can't host the file directly via SCSS:
Doing an @import in SCSS works fine for CSS files as long as you explicitly use the full path one way or another. In development mode, rails s serves assets without compiling them, so a path like this works.
. because the hosted path is literally /assets/highlight_js/github.css . If you right-click on the page and "view source", then click on the link for the stylesheet with the above @import , you'll see a line in there that looks like:
The SCSS engine translates "highlight_js/github.css" to url(highlight_js/github.css) . This will work swimmingly until you decide to try running it in production where assets are precompiled have a hash injected into the file name. The SCSS file will still resolve to a static /assets/highlight_js/github.css that was not precompiled and doesn't exist in production.
How this solution works:
Firstly, by moving the .scss file to .scss.erb , we have effectively turned the SCSS into a template for Rails. Now, whenever we use template tags, the Rails template processor will replace these snippets with the output of the code (just like any other template).
Stating asset_path("highlight_js/github") in the .scss.erb file does two things:
- Triggers the rake assets:precompile task to precompile the appropriate CSS file.
- Generates a URL that appropriately reflects the asset regardless of the Rails environment.
This also means that the SCSS engine isn't even parsing the CSS file; it's just hosting a link to it! So there's no hokey monkey patches or gross workarounds. We're serving a CSS asset via SCSS as intended, and using a URL to said CSS asset as Rails intended. Sweet!
Sass это расширение CSS, которое придаёт мощи и элегантности этому простому языку. Sass даст вам возможность использовать переменные, вложенные правила, миксины, инлайновые импорты и многое другое, всё с полностью совместимым с CSS синтаксисом. Sass помогает сохранять огромные таблицы стилей хорошо организованными, а небольшим стилям работать быстро, особенно с помощью библиотеки стилей Compass.
Суть этой статьи в том, чтобы дать понять как работает Sass в разных кейсах и именно самому решить для себя нужен ли он вам.
Сразу обратите внимание, что если вам нужен простой функционал, такой как перменные, то в простом CSS они уже появились и не нужно загружать себя таким инструментом как Sass. Вот статья — Руководство по работе с переменными в CSS
👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый повсюду в этой статье — это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют .scss расширение.
Второй и более старый синтаксис, также известный как краёный синтаксис или иногда просто Sass, даёт более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал, хотя некоторые из них имеют слегка другой подход. Файлы используемые этот синтаксис имеют расширение .sass .
Любой синтаксис может импортировать файлы, написанные в другом. Файлы могут быть автоматически сконвертированы из одного в другой, используя sass-convert команду:
Читайте также: