Следим и компилируем Sass, за пять быстрых шагов
Sass — возможно самый популярный препроцессор CSS; годами он помогал нам писать чистый, многоразовый и модульный CSS. В этом кратком руководстве я расскажу о том, что важно, и объясните, как скомпилировать Sass в CSS, используя командную строку.
1. Установка Node.js
Чтобы скомпилировать Sass через командную строку, для начала нам нужно установить node.js. Загрузите его с официального сайта nodejs.org, распакуйте и следуйте помощнику.
2. Инициализация NPM
NPM — это менеджер пакетов для Node на языке JavaScript. NPM упрощает установку и удаление сторонних пакетов. Для инициализации проекта Sass с помощью NPM, откройте ваш терминал и перейдите в каталог вашего проекта, используя команду CD (смените каталог).
Как только вы добрались до нужной папки, выполните команду npm init . Вас попросят ответить на несколько вопросов о вашем проекте, после чего NPM сгенерирует файл package.json в вашей папке.
3. Установка Node-Sass
Node-sass это пакет NPM, который компилирует Sass в CSS (и делает это очень быстро). Для установки node-sass выполните в терминале следующую команду: npm install node-sass
4. Пишем команду Node-sass
Всё готово для написания маленького скрипта для компилирования Sass. Откройте файл package.json в вашем редакторе кода. Вы увидите что-то вроде этого:
"name": "sass-tutorial",
Как компилировать scss в css в vs code
Компиляция 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
scss-to-css
For small projects, various engineering tools such as webpack are too heavy and cumbersome to configure. And a lot of modules have to be installed. Sometimes, we just want to simply use the convenience brought by scss. So for this purpose, I wrote a vsc plug-in, which can be automatically compiled into a css file (stored in the current directory by default) when the scss file is saved, and the browser prefix is automatically completed.
Configuration
- compileOnSave : Auto compile on document saved, default true
- autoPrefixer : Will autoprefixer. It can be run faster when turn off. default true
- output : Output style. default compressed 。
- exclude : The RegExp of path what you can to ignore(the var.scss file will never be compiled)。
Issues
This extension work well on all os. If any problem please let me known issue
Dependencies
We use node-sass (Deprecated in 3.1.0) instead of libsass .
v3.1.0 uses sass instead. No need to install node-sass globally
- node-sass , You need to install this module manually. Maybe root is required on linux.
Installation
Search scss-to-css and install in the marketplace.
.browserslistrc DEMO (Deprecated in 2.x)
Just for demo, you can change it by youself. If not exists, the default value will be last 2 version .
ie > 9 iOS > 8 Android >= 4.4 ff > 38 Chrome > 38 .scssrc DEMO (in 2.x or above)
instead of using .browserslistrc , we recommend to use .scssrc .
9", "iOS > 8", "Android >= 4.4", "ff > 38", "Chrome > 38"], "outdir": "dist" // relative path of this '.scssrc' file. > // You can also set other config in this file. // eg. compileOnSave,autoPrefixer,output,exclude
How to Compile SCSS Code in Visual Studio Code
Hello, world and in this tutorial I will be showing you how to compile your SCSS code into CSS using a Visual Studio Code Extension in real time! After you save the .scss file, it will automatically generate the .css file for you! The extension was made by Ritwick Dey, a developer with over 4.3 million downloads on his various extensions on the Visual Studio Marketplace. Now that that’s all said, let’s get into the tutorial!
1. Install the Extension
Go to the Live Sass Compiler Extension page and hit the large green install button. You can also click the “extensions” dialogue (Ctrl-Shift-X) in Visual Studio Code and search Live Sass Compiler and click on the one that is by Ritwick Dey.
2. Open Your SCSS File
You must have your .scss file currently open (not exactly active) in the Explorer panel.
3. Click the “Watch Sass” Button
Look at the bottom right of the Visual Studio Code interface, and you should see a button that says “Watch Sass”. Click the button, and the extension will generate a .css and .map.css file in the directory of all .scss files open!
4. Watch and Enjoy!
Now you can use and compile your sass files in real time without having to worry about running a command into the terminal every single time you need it reloaded! I hope that this article hoped you!