Как установить sass

#2 — Gulp и SASS. Установка и работа

#2 - Gulp и SASS. Установка и работа

Препроцессор SASS позволяет прописывать CSS стили быстрее, используя переменные, циклы, условия, функции и многое другое. Но есть и проблема, код SASS необходимо конвертировать в CSS через консоль. Gulp позволяет оптимизировать процесс и выполняет все автоматически. В ходе урока вы научитесь это делать.

Видеоурок

Полезная ссылка:

Gulp позволяет оптимизировать множество рутинных задач и одна из таких задач — конвертация кода из SASS в CSS. Для автоматической конвертации данных необходимо построить функцию (задачу), прописать все настройки и далее выполнить команду в терминале, которая преобразует ваш SASS код в CSS.

Для работы с SASS предварительно необходимо установить плагин gulp-sass .

npm install --save-dev gulp-sass

Далее необходимо прописать переменную и подключить в неё библиотеку.

var sass = require('gulp-sass')

Теперь чтобы преобразовать данные из SASS в CSS необходимо прописать команду sass() внутри задачи:

function sassToCSS(done) < gulp.src('./scss/style.scss') .pipe(sass(< errorLogToConsole: true, outputStyle: 'compressed' >)) .on('error', console.error.bind(console)) .pipe(rename()) .pipe( gulp.dest('./css/') ); done(); >

Как установить Sass (SCSS) на Mac и скомпилировать в CSS

Прежде всего уточним что такое Sass. Абревиатура SASS расшифровывается как Syntactically Awesome Style Sheets дословно переводится как синтетически потрясающие таблицы стилей. Установка sass или scss довольно проста — давайте разберем ее по шагам.

Как установить Sass (SCSS) на Mac

Для того чтобы установить Sass (он же будет обрабатывать и все scss файлы) на Mac, сначала установим джем для sass.

sudo gem install sass

Как установить Sass (SCSS) в Sublime Text

Для того, чтобы синтаксис Sass и scss правильно распознавался у вас в Sublime Text, нужно установить пакет Sass:

Заходим в Sublime Text и идем в Tools — Command Palette.
В появившуюся строку вводим Package Control и в выпадающем меню выбираем Package Control: Install Package.
В появившейся строке вводим Sass и выбираем его.
Немного ждем пока установится пакет и вуаля — теперь в правом нижнем углу, помимо всех остальных форматов, мы можем выбирать Sass. Но это еще не все.
Чтобы и в дальнейшем у вас все scss файлы сразу открывались с форматированием и синтаксисом sass — открываем новый scss файл, идем в View — Syntax — Open all with current extension as . — Sass.

Как перекомпилириовать Sass (SCSS) в CSS. Преобразование SCSS в CSS

Как препроцессить Sass (scss) в CSS в терминале:

sass input.scss:output.css

sass --watch input.scss:output.css

Get in touch

Установка 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

Install Sass

There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it).

CodeKit (Paid) Mac
Prepros (Paid) Mac Windows Linux

Libraries Libraries permalink

The Sass team maintains two Node.js packages for Sass, both of which support the standard JavaScript API . The sass package is pure JavaScript, which is a little slower but can be installed on all platforms Node.js supports. The sass-embedded package wraps a JS API around the Dart VM , so it’s faster but only supports Windows, Mac OS , and Linux.

There are also community-maintained wrappers for the following languages:

Ruby
Swift
Java, including:
- A Gradle plugin.
- A lightweight Maven plugin wrapping the Sass CLI . It specifies the Sass version to use. The CLI arguments are passed-in with an list.
- A batteries-included Maven plugin wrapping Dart Sass. It bundles a fixed dart-sass version. The CLI arguments are exposed as Maven parameters.
Command Line Command Line permalink

When you install Sass on the command line, you’ll be able to run the sass executable to compile .sass and .scss files to .css files. For example:
```
sass source/stylesheets/index.scss build/stylesheets/index.css 
```
First install Sass using one of the options below, then run sass —version to be sure it installed correctly. If it did, this will include 1.69.4 . You can also run sass —help for more information about the command-line interface.

Once it’s all set up, go and play. If you’re brand new to Sass we’ve set up some resources to help you learn pretty darn quick.

Install Anywhere (Standalone)

You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH . That’s all—there are no external dependencies and nothing else you need to install.

Install Anywhere (npm)

If you use Node.js, you can also install Sass using npm by running
```
npm install -g sass 
```
However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it’ll be easy to swap in another implementation later if you need a bit more speed!

Install on Windows (Chocolatey)

If you use the Chocolatey package manager for Windows, you can install Dart Sass by running
```
choco install sass 
```
Install on Mac OS X or Linux (Homebrew)

If you use the Homebrew package manager for Mac OS X or Linux, you can install Dart Sass by running
```
brew install sass/sass/sass 
```
- Current Releases:
- Dart Sass1.69.4
- LibSass3.6.5
- Ruby Sass ⚰
- Implementation Guide
Sass © 2006–2023 the Sass team, and numerous contributors. It is available for use and modification under the MIT License.
Похожие публикации: