Как настроить live sass compiler для vs code

Live Sass Compiler | VSCode Extension

Compile Sass or Scss to CSS at realtime with live browser reload.

Settings

• liveSassCompile.settings.format
• liveSassCompile.settings.savePath

liveSassCompile.settings.extensionName

[NEW] liveSassCompile.settings.formats : To setup Format (style), Extension Name & Save location for exported css [Multiple Format Supported].

Format can be _ expanded _, _ compact _, _ compressed _ or _ nested _. _Default is expanded ._

Extension Name can be .css or .min.css . Default is .css .

Default value is null . ( null means, it will generate CSS in the location of scss/sass. By The Way, It is null , NOT «null» ).

” / ” denotes relative to root.

” denotes relative to every sass file. — Complex Scenario. (Checkout the example)

You can use negative glob pattern.

• Example : if you want exclude all file except file1.scss & file2.scss from path/subpath directory, you can use the expression —

liveSassCompile.settings.includeItems : This setting is useful when you deals with only few of sass files. Only mentioned Sass files will be included.

• NOTE: No need to include partial sass files.
• Default value is null
• Example :

liveSassCompile.settings.autoprefix : Automatically add vendor prefixes to unsupported CSS properties (e. g. transform -> -ms-transform ).

Specify what browsers to target with an array of strings (uses Browserslist).

Set null to turn off. (Default is null )

Источник

/ vscode-live-sass-компилятор

Настройки

liveSassCompile.settings.format

liveSassCompile.settings.savePath

liveSassCompile.settings.extensionName

[НОВОЕ] liveSassCompile.settings.formats : для настройки формата (стиля), имени расширения и места сохранения для экспортированного CSS [Поддерживается несколько форматов].

Формат может быть расширенным , compact , compressed или вложенный . По умолчанию expanded .

Расширение Имя может быть .css или .min.css . По умолчанию: .css .

[Новое] Местоположение сохранения относительно корня рабочей области или ваших файлов Sass.

Значение по умолчанию — null . ( null означает, что он будет генерировать CSS в месте scss/sass. Кстати, это null , а НЕ «null » ).

» / «обозначает относительно корня.

» обозначает относительно каждого файла sass. — Сложный сценарий. (Ознакомьтесь с примером)

liveSassCompile.settings .excludeList : чтобы исключить определенные папки. Все файлы Sass/Scss внутри папок будут проигнорированы.

значение по умолчанию:

Вы можете использовать отрицательный шаблон глобуса.

• Пример: если вы хотите исключить все файлы, кроме file1.scss & file2.scss из каталога path/subpath , вы можете использовать выражение —

liveSassCompile.settings.includeItems : этот параметр полезен, когда вы имеете дело только с несколькими файлами sass. Будут включены только упомянутые файлы Sass.

• ПРИМЕЧАНИЕ. Не нужно включать частичные файлы Sass.
• Значение по умолчанию — null
• Пример:

liveSassCompile.settings.generateMap : установите для него значение false , если вы этого не сделаете. хотите файл .map для скомпилированного CSS.

liveSassCompile.settings.autoprefix : Автоматически добавлять префиксы поставщиков к неподдерживаемым свойствам CSS (например, transform -> -ms-transform ).

Укажите, на какие браузеры настроить таргетинг с помощью массива строк (использует список браузеров).

Установите null , чтобы выключить. (По умолчанию null )

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

• ПРИМЕЧАНИЕ. Вы можете использовать палитру команд, чтобы открыть окно вывода Live Sass.
• Значение по умолчанию: true

Источник

VS Code и плагин Live Sass Compiler. Как изменить директорию компиляции и не компилировать другие Sass-файлы?

Здравствуйте, попытаюсь описать проблему максимально подробно. Извиняюсь, если вдруг где-то затупил, но я действительно не могу разобраться как тут это сделать)))

Проблема первая
Раньше работал в gulp + sublimeText
Так вот, там в gulp-файле можно было настроить, чтобы компилятор SCSS компилировал в файл CSS только главный файл main.scss, а такие файлы как header.scss он не трогал.

То есть например, у нас есть главный файл main.scss и вспомогательный файл header.scss. Так вот, внутри main.scss прописывается импорт header.scss и таким образом все стили из header.scss благополучно перекачуют в main.scss.
Далее этот главный файл main.scss компилируется в просто main.css. То есть вспомогательный файл header.scss НЕ компилируется.

Сейчас я перешел в visual studio code и нашел довольно популярный плагин Live Sass Compiler.
так вот, он компилирует абсолютно все файлы, то есть если взять пример описанный выше, то он скомпилирует как главный файл main.scss, так и вспомогательный header.scss

Проблема вторая
компиляция в данном плагине происходит в одну директорию, а мне бы хотелось, опять же из опыта работы с gulp, чтобы главный файл был скомпилирован в другую папку.
То есть например я создал одну папку где лежат «черновые» файлы с расширением .scss и другую папку для «чистового» файла .css. И нужно что бы главный файл с расширением .scss был скомпилирован в файл .css из «черновой» папки соответственно в «чистовую» для .css.

Источник

Live Sass Compiler

Ritwick Dey

Live Sass Compiler

[If you like the extension, please leave a review, it puts a smile on my face.]

[If you found any bug or if you have any suggestion, feel free to report or suggest me.]

A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.

Usage/Shortcuts

Click to Watch Sass from Statusbar to turn on the live compilation and then click to Stop Watching Sass from Statusbar to turn on live compilation .

Press F1 or ctrl+shift+P and type Live Sass: Watch Sass to start live compilation or, type Live Sass: Stop Watching Sass to stop a live compilation.

Press F1 or ctrl+shift+P and type Live Sass: Compile Sass — Without Watch Mode to compile Sass or Scss for one time.

Features

• Live SASS & SCSS Compile.
• Customizable file location of exported CSS.
• Customizable exported CSS Style ( expanded , compact , compressed , nested ).
• Customizable extension name ( .css or .min.css ).
• Quick Status bar control.
• Exclude Specific Folders by settings.
• Live Reload to browser (Dependency on Live Server extension).
• Autoprefix Supported (See setting section)

Installation

Open VSCode Editor and Press ctrl+P , type ext install live-sass .

Settings

All settings are now listed here Settings Docs.

All FAQs are now listed here FAQ Docs

Extension Dependency

This extension has dependency on Live Server extension for live browser reload.

What’s new ?

Version 3.0.0 (11.07.2018)

• Upgrade sass.js library that included fixes for 8 digit Hex code & grid name. [Fixes #39, #40, #78]

Changelog

To check full changelog click here changelog.

LICENSE

This extension is licensed under the MIT License

Источник

Live Sass Compiller, расширение в VS Code

вопрос такой. Решил перейти с Sublime на VS Code, нашёл полезное расширение, которое компилирует код sass в css, но файл .css сохраняется в той же папке, где и сам .sass файл. Не могу найти настройки, чтобы изменить папку сохранения скомпилированного файла.

4 ответа 4

Устанавливаем в VS Code расширение Live Sass Compiller

Открываем параметры в VS Code по умолчанию, на Русском языке, сочетание клавиш: ctrl+б

Вводим в строку параметры поиска текст: liveSassCompile.settings.formats VS Code находит этот параметр и отображает возможные действия с ним ниже строки поиска.

В открывшемся окне видим слева интересуемый нас параметр и его настройки по умолчанию:

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

Далее вам необходимо настроить путь к файлу SASS откуда будет браться ваш код и пусть к файлу CSS куда будет компилироваться код из вашего файла SASS.

К примеру, если у вас в директории APP расположена директория: SASS в котором находится редактируемый вами файл *.sass и в этой же папке APP также расположена директория CSS в которой вы хотите, чтобы компилировался уже готовый файл *.css , то настройка будет выглядеть примерно так:

Вообще настраивать пути можно более широко.

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

Источник