Как настроить sass в vscode

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

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

Отслеживать
задан 12 сен 2018 в 16:37
Дмитрий Нищев Дмитрий Нищев
27 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков

Вроде их надо менять с помощью .md файла, но я ни разу не работал с файлами такого расширения и не знаю как их правильно использовать

12 сен 2018 в 16:40
какое расширение-то?
12 сен 2018 в 18:02

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

13 сен 2018 в 6:14
В названии вопроса же написал: Live Sass Compiller
15 сен 2018 в 17:34

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

1. Устанавливаем в VS Code расширение Live Sass Compiller
2. Открываем параметры в VS Code по умолчанию, на Русском языке, сочетание клавиш:ctrl+б
3. Вводим в строку параметры поиска текст: liveSassCompile.settings.formats VS Code находит этот параметр и отображает возможные действия с ним ниже строки поиска.
4. Находим ниже ссылку: Изменить в settings.json и нажимаем на неё.
5. В открывшемся окне видим слева интересуемый нас параметр и его настройки по умолчанию:

 "liveSassCompile.settings.formats": [< "format": "expanded", "extensionName": ".css", "savePath": null >], 

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

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

"liveSassCompile.settings.formats": [< "format": "expanded", "extensionName": ".css", *//Имя файла, который будет формироваться (здесь не указано имя, а указано, только расширение. Поэтому имя файла будет такое же, как и имя файла источника sass.* "savePath": "/css/" *//Путь к дериктории, где будет формироваться скомпелированный файл .css* >], 

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

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

После настройки плагина Live Sass Compiler для VSCode не появилось файлов Style.css.map, Style.min.c

Руководствуясь уроком 2.4. Препроцессоры. SASS/SCSS/LESS, настраивала плагин Live Sass Compiler.

Зашла в Formates->Edit in settings.json. Поместила в файл настройки из документации, рукоменованные в уроке :

«workbench.colorTheme»: «Oceanic Next»,
«workbench.iconTheme»: «vscode-icons»,
«liveServer.settings.donotShowInfoMsg»: true,
«editor.minimap.enabled»: false,
«window.zoomLevel»: -1,
«liveSassCompile.settings.formats»: [

«format»: «expanded»,
«extensionName»: «.css»,
«savePath»: null
>
],

«liveSassCompile.settings.formats»:[
«format»: «compressed»,
«extensionName»: «.min.css»,
«savePath»: «~/../css/»
>
],
«liveSassCompile.settings.autoprefix»: [
«> 1%»,
«last 2 versions»
]
>

По окончании данной настройки в папке css должны были появиться новые файлы: Style.css.map, Style.min.css, Style.min.css.map. Но они не появились:

Как настроить sass в vscode

Компиляция SASS/SCSS в CSS в VS CODE с помощью плагина Live Sass Compiler

14 апреля 2023
Оценки статьи
Еще никто не оценил статью

SASS (Syntactically Awesome Style Sheets) и SCSS (Sassy CSS) — это мощные препроцессоры CSS, которые предоставляют разработчикам множество дополнительных функций, таких как переменные, вложенность, миксины и многое другое, что делает стилизацию веб-сайтов более эффективной и организованной. Однако, браузеры не могут понимать эти языки препроцессоров напрямую, поэтому необходимо компилировать их в обычный CSS перед использованием на веб-страницах.

VS Code — одна из популярных интегрированных сред разработки (IDE) с множеством расширений для облегчения работы разработчиков. Одним из таких расширений является Live Sass Compiler, которое позволяет автоматически компилировать SASS/SCSS файлы в CSS и создавать уменьшенные версии CSS. Давайте рассмотрим, как установить и настроить это расширение.

Установка Live Sass Compiler

Для начала, откройте VS Code и перейдите в расширения VSCODE (Visual Studio Marketplace), либо используйте поиск расширений по идентификатору @glenn2223.live-sass . Установите расширение Live Sass Compiler и перезагрузите VS Code, если это требуется.

Настройка компиляции SASS/SCSS в CSS

Теперь, когда расширение установлено, откройте ваш файл SASS/SCSS в VS Code. Внизу на панели инструментов вы увидите надпись «Watch Sass» с иконкой глаза. Щелкните по ней, чтобы включить автоматическую компиляцию SASS/SCSS файлов в CSS.

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

Оптимизация CSS файла с помощью Live Sass Compiler

Вы также можете настроить различные параметры компиляции, используя настройки расширения.

Например, вы можете настроить расположение экспортируемого CSS файла, стиль компиляции CSS (расширенный или сжатый), имя расширения для экспортируемого файла и другие параметры.

Для этого нажмите Ctrl+Shift+P, введите «Открыть пользовательские настройки (JSON)» и откройте файл с настройками. Затем добавьте необходимые параметры в файл настройки.

Например, добавим следующий фрагмент:

settings.json

"liveSassCompile.settings.formats":[    "format": "compressed"  >,  ] 

При компиляции SASS/SCSS файлов, ваш CSS файл будет максимально сжат.

Другие полезные настройки:

Подробнее о них на github.

settings.json

  "liveSassCompile.settings.formats":[    "format": "expanded",  "extensionName": ".css",  "savePath": "/css"  >,    "extensionName": ".min.css",  "format": "compressed",  "savePath": "/dist/css"  >  ],  "liveSassCompile.settings.excludeList": [  "**/node_modules/**",  ".vscode/**"  ],  "liveSassCompile.settings.generateMap": true,  "liveSassCompile.settings.autoprefix": [  "defaults"  ] > 

Меню категорий

Загрузка категорий.

Добро пожаловать в Блог Разработчика Владислава Александровича.

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

Django Core: 0.3.4 / Next.js 1.0 / UPD: 05.06.2023

Работа с Sass в приложении ASP.NET Core

Sass (Syntactically Awesome Style Sheets) — это скриптовый язык, используемый для создания каскадных таблиц стилей (CSS-файлов). Его синтаксис очень похож на обычный CSS, но вдобавок он поддерживает использование переменных, вложенность, миксины и наследование для селекторов, чего очень не хватает в базовом CSS, ведь эти фичи незаменимы в организации и поддержке стилей вашего веб-приложения. В этой статье я продемонстрирую вам шаги, необходимые для добавления и настройки Sass в вашем ASP.NET Core проекте как в Visual Studio, так и в VS Code.

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

• Упрощенный синтаксис: благодаря таким фичам, как вложенность, переменные, миксины (mixins или примеси) и наследование, Sass позволяет писать CSS в более лаконичном и удобном для чтения формате. Это поможет сэкономить ваше время и сделать ваш код более удобным в сопровождения.

• Реюзабельность: Sass позволяет вам писать код, который можно повторно использовать (например, миксины), и затем удобно применять его в вашем проекте. Благодаря этому вы можете уменьшить дублирование кода и сделать его более модульным.

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

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

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

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

Если вы только начинаете свое знакомство с Sass, то я настоятельно рекомендую вам взглянуть на это руководство, которое может послужить отличным введением в использование Sass в вашем приложении. Чуть позже я приведу пример с использованием Bootstrap Sass. Чтобы воспользоваться всеми преимуществами Sass, вам понадобится Sass-компилятор — инструмент, который обрабатывает ваши Sass-файлы и создает CSS, который сможет использовать ваше веб-приложение. Вы можете компилировать Sass из командной строки сразу после установки Sass или использовать расширение для управления этим процессом непосредственно из Visual Studio или VS Code. Расширения прекрасно работают с функцией Hot Reload как в Visual Studio, так и в VS Code, поэтому я также рассмотрю примеры работы с ними в обоих этих средах разработки.

Visual Studio

При работе в Visual Studio я использую расширение Web Compiler 2022+ от Джейсона Мура (Jason Moore). Это форк расширения, разработанного Мадсом Кристенсеном (Mads Kristensen) из Microsoft, модернизированный для работы с VS 2022. Добавить его можно, перейдя в пункт меню VS “Extensions” и нажав “Manage Extensions”. Затем убедитесь, что в левой части появившегося диалогового окна выбран параметр “Online”, и просто введите поисковый запрос “Web Compiler 2022”.

Работа с этим расширением так же проста как и его установка. Кликните правой кнопкой мыши по любому .scss-файлу и выберите в контекстном меню пункт “Web Compiler”. Затем выберите “Compile file”:

В результате первого запуска в корневом каталоге приложения будет создан файл compilerconfig.json, который, как вы, наверное, уже догадались, служит в качестве конфигурации Sass-компилятора. Изначально этот файл будет содержать всего одну запись для компилируемого вами файла, результат компиляции которого по умолчанию выводится в то же место с расширением .css.

Также по умолчанию включен минимизатор, поэтому там же вы должны увидеть и .min.css-файл:

Дефолтный режим работы компилятора настраивается в файле compilerconfig.json.defaults, который генерируется вместе с конфигурацией компилятора. Если, например, вы хотите отключить минимизатор, то вам нужно установить опцию enabled параметра minifiers:css в false :

"minifiers": < "css": < "enabled": false, "termSemicolons": true, "gzip": false >, "javascript": < "enabled": true, "termSemicolons": true, "gzip": false >>

Это расширение также позволяет вам добавить компиляцию в качестве этапа сборки. Просто кликните правой кнопкой мыши на файл compilerconfig.json и выберите “Web Compiler” — “Enable compile on build…”

В результате будет установлен Nuget-пакет, который добавляет необходимый этап сборки.

Visual Studio Code

Live Sass Compiler — один из самых популярных компиляторов Sass для Visual Studio Code. Просто введите «live sass compiler» в маркетплейсе расширений:

Хоть эта версия и имеет всего около 800 тысяч загрузок (на момент написания статьи), это самая актуальная версия расширения. После установки перейдите в “File” > “Preferences” > “Settings”и снова введите поисковый запрос «live sass compiler», или найдите Live Sass Compiler в разделе расширений на панели “Commonly Used”. Таким образом вы откроете редактор настроек этого расширения.

Некоторые настройки можно задать прямо в появившемся окне, но большинство из них требуют редактирования файла settings.json. Поэтому кликните “Edit” в settings.json и добавьте следующее:

"liveSassCompile.settings.formats": [ < "format" :"expanded", "extensionName": ".css", "savePath": "~/" >, < "format" :"compressed", "extensionName": ".min.css", "savePath": "~/" >],

Таким образом вы настроите два формата вывода: первый создает стандартные css-файлы с пробелами и отступами. Второй генерирует минимизированную версию для использования в продакшене. Для обеих savePath (что представляет собой расположение .scss-файл, который мы компилируем) указан как ~/ . Больше информации по настройкам и командам вы можете найти на странице проекта этого расширения на Github.

Использование Bootstrap Sass

Наконец мы подошли к небольшому примеру, иллюстрирующему, как с помощью Bootstrap Sass заставить расширения для компиляции scss-файлов в css генерировать цвета. Сначала загрузите исходные файлы Bootstrap (https://github.com/twbs/bootstrap/archive/v5.2.3.zip), а затем распакуйте содержимое папки scss в wwwroot/lib/bootstrap/dist/. Полученная в результате структура папок должна выглядеть следующим образом:

Далее переименуйте дефолтный файл site.css в site.scss, а затем измените его содержимое следующим образом:

@import "../lib/bootstrap/dist/scss/_functions.scss"; @import "../lib/bootstrap/dist/scss/_variables.scss"; html < font-size: 0.9rem; color: $blue-900; >@media (min-width: 768px) < html < font-size: 1rem; >> html < position: relative; min-height: 100%; >body

Первые две строки импортируют функции и переменные Bootstrap Sass и, в частности, позволяют использовать переменные для цветов. Как уже упоминалось ранее, в Visual Studio вы можете кликнуть правой кнопкой мыши по файлу site.scss и выбрать “Web Compiler” > “Compile file”. С этого момента расширения отслеживают любые изменения и при необходимости будут перекомпилировать файл. В VS Code вам нужно активировать компилятор, что можно сделать, просто нажав “Watch Sass” в строке статуса в нижней части IDE:

Прежде чем вы это сделаете, вам нужно добавить исключение в настройки, чтобы содержимое папки Bootstrap scss, которую вы только что добавили, не компилировалось:

"liveSassCompile.settings.excludeList":[ "/**/lib/bootstrap/dist/scss/**" ],

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

Заключение

Использование Sass может помочь вам создавать лучший CSS быстрее, с меньшим количеством повторений и обслуживания. В этой статье я показал, как интегрировать и настроить компиляцию Sass в проекте ASP.NET Core с помощью расширения Web Compiler в Visual Studio и расширения Live Sass Compiler в VS Code. Наконец, я продемонстрировал пример использования Sass, который использует переменные Bootstrap Sass для генерации шестнадцатеричных цветов в таблице стилей CSS.

Перевод статьи подготовлен в преддверии старта курса C# Asp.Net. По ссылке вы сможете подробнее узнать о курсе, а также зарегистрироваться на бесплатный урок.