Как компилировать sass в css

Компиляция 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"  ] >

Компиляция Sass-файла

Для компиляции Sass-файла нам понадобится пакет gulp-sass.

var sass = require('gulp-sass');

Переименуйте файл main.css в main.scss и встройте его в задачу mincss (также для этого вы можете создать отдельную задачу).

gulp.task('mincss', function()< return gulp.src('main.scss') .pipe(sass().on('error', sass.logError)) .pipe(minifyCss()) .pipe(gulp.dest('main')); >);

Теперь удалите всё что есть в main.scss и добавьте следующий код:

$color-title: #333; h1

Выполните команду gulp. Если теперь вы проверите main/main.css, то должны увидеть:

Вывод уведомления

Добавление уведомления — одна из самых простых вещей, которые делаются с Gulp. Просто включите gulp-notify в свой gulpfile.js

var notify = require('gulp-notify');

Затем пропустите CSS через это:

gulp.task('mincss', function()< return gulp.src('main.scss') .pipe(sass().on('error', sass.logError)) .pipe(minifyCss()) .pipe(gulp.dest('main')) .pipe(notify('Done! master zooboole.')); >);

Всё, что вам нужно сделать, это просто передать сообщение для отображения в notify() . Затем запустите gulp. Если всё хорошо, вы должны увидеть нечто вроде этого:

Автор: Ахмед Салифу Амиду
Последнее изменение: 05.08.2023

Настройка системы сборки
Создание первой задачи
Слежение за файлами
Компиляция Sass-файла
Живая перезагрузка
Рекомендуемые плагины
Адаптивный дизайн с Gulp

Компиляция Sass

Браузеры не понимают Sass напрямую, поэтому необходимо преобразовать файл в формат CSS. Существует несколько способов, как это сделать, вот самые популярные.

Установить Ruby и делать компиляцию через командную строку.
Установить специализированную программу вроде Scout.
Воспользоваться онлайновыми компиляторами.
Использовать компилятор на сервере, например, написанный на PHP.

Каждый способ имеет свои особенности. Так, под MacOS нет необходимости устанавливать Ruby, он идёт вместе с этой операционной системой. Поэтому процесс компиляции немного упрощается, потому что мы устраняем лишний шаг.

На этой странице перечислены некоторые инструменты, как платные, так и бесплатные, которые позволяют не связываться с командной строкой.

Автор: Влад Мержевич
Последнее изменение: 13.09.2022

Возможности Sass
Компиляция Sass
- Командная строка
- Использование Scout
- Сайт SassMeister
Гл. редактор: Влад Мержевич

О сайте

На сайте находятся справочники и учебные курсы по различным веб-технологиям, а также руководства по вёрстке веб-страниц.

Связи

Разделы сайта

Популярное
- Уроки по HTML и CSS
- Руководство по флексбоксам
- HTML5 и CSS3 на примерах
- Руководство по JSON
- Как верстать на HTML5 и CSS3
- Продвинутые уроки по HTML и CSS
- Визуальное руководство по свойствам flexbox
- Создание первого приложения на Node
Помощь по сайту

Сайт WebReference.ru использует VPS от компании Beget.

Установка Sass

Есть множество приложений под Windows, Mac и Linux, которые помогут в освоении и работе с Sass. Большинство из них бесплатные, но некоторые из них все-таки платные (но это того стоит).
- CodeKit (Платно) Mac
- Compass.app (Условно-бесплатно) Mac Windows Linux
- Ghostlab (Платно) Mac Windows
- Hammer (Платно) Mac
- Koala (Бесплатно) Mac Windows Linux
- LiveReload (Условно-бесплатно) Mac Windows
- Prepros (Платно) Mac Windows Linux
- Scout-App (Бесплатно) Windows Linux Mac
Командная строка

Когда вы используете Sass через командную строку, то для того, чтобы запустить компиляцию .sass и .scss в .css файлы введите команду sass . Например:
```
sass source/stylesheets/index.scss build/stylesheets/index.css 
```
Используя любой способ установки Sass, запустите команду sass —version чтобы быть уверенным, что установка прошла успешно. Если эту команду выполнить, то в ответ вы получите версию Sass 1.5.1 . Также вы можете запустить команду sass —help для получения информации по использованию Sass в командной строке.

Как только все настроено, начинайте наслаждаться. Если вы впервые столкнулись с Sass, то специально для вас мы создали несколько ресурсов для обучения.

Установка в любом месте (Standalone) Вы можете установить Sass в Windows, Mac, или Linux путем скачивания дистрибутива для вашей операционной системы from GitHub и выполните действия с PATH . Вот и все: никаких зависимостей нет и ничего не нужно устанавливать дополнительно. Установка в любом месте (npm)

Если вы используете Node.js, то вы можете установить Sass c помощью npm:
```
npm install -g sass
```
Однако, учтите, что это установит реализацию Sass на нативном JavaScript, которая работает несколько медленнее, чем другие реализации, перечисленные здесь. Но он имеет тот же интерфейс, поэтому будет легче поменять на другую реализацию позже, если вам потребуется немного больше скорости! Установка в Windows (Chocolatey)

Если вы используете менеджер пакетов Chocolatey для Windows, вы можете установить Dart Sass при помощи команды:
```
choco install sass
```
Установка в Mac OS X (Homebrew)

Если вы используете менеджер пакетов Homebrew для Mac OS X, вы можете установить Dart Sass при помощи команды:
```
brew install sass/sass/sass
```
Похожие публикации:

Как компилировать sass в css