Установка SASS

Процесс установки и настройки sass достаточно хорошо описан в официальной документации. Чтобы понять как это происходит совсем не обязательно знать английский язык. Я думаю, что если на googl-e набрать "sass установка", высветится много разных статей. Все бы хорошо, но к сожалению после данной установки процесс компиляции будет занимать приличное время. Мне бы не хотелось повторяться, на главной странице я уже описывал это при сравнении sass и less, поэтому скажу так. Официальная документация хоть и официальная документация, но мы пойдем другим путем. Сейчас я опишу установку, при которой компиляция будет занимать милисекунды.

Итак, нам понадобится node.js, сборщик проектов gulp, три плагина к нему (gulp-watch, gulp-plumber, gulp-sass) и какой-нибудь файловый менеджер. В скриншотах я использовал total commander, но поскольку он платный, то могу посоветовать его бесплатный аналог - double commander, он ничуть не хуже и вполне справится с нашими задачами. Если вдруг у вас что-то не будет получаться, то вы можете скачать готовый пример, для его работы нужен только установленный node.js. Архив нужно будет распаковать, войти в проект через какой-нибудь файловый менеджер, и в командной строке файлового менеджера сперва набрать "npm install --save-dev", а потом набрать "npm install gulp -g". После того как произойдет установка всех модулей в командной строке файлового менеждера нужно будет набрать "gulp". Я все-таки советую вам ознакомиться с текстом ниже. Весь материал я постараюсь описать подробно, чтобы ни у кого не оставалось никаких вопросов.

При верстке я использую "open server". Навязывать я никому ничего не хочу, но это лучший локальный сервер которым я когда-либо пользовался. Начинал я с denver-а, потом ставил "apache", потом долго пользовался xamp-ом. По сравнению с ними "open server" лучший. Советую устанавливать плагины в папку где лежат проекты. Обычно у меня проекты для верстки лежат в папке localhost. SCSS - файлы лежат в папке "localhost/название проета/scss", css-ка генерится по адресу "localhost/название проекта/project/css". HTML-файлы лежат по адресу "localhost/название проета/project". Вы можете настраивать пути так как вам удобно, все это я опишу. Для примера я буду просмативать папку "scss" и генерить css-ку в папку "project/css".

  1. 1. Для начала идем на официальный сайт node.js (Рис. 1) и скачиваем его дистрибутив, здесь особо объяснять нечего, я думаю это просто))) После того, как мы его уснановили, стоит проверить работает ли он. Для этого жмем "Win+r", в появившемся окне набираем "node" (Рис. 2) и жмем "Enter". Если все прошло успешно, то должно появиться вот такое окно (Рис. 3). Если вы начинающий разработчик, то можете использовать его как калькулятор, хотя node.js это полноценный сервер не хуже чем apache. Если же он не появился, то скорее всего у вас какие-то проблемы с правами. В операционных системах Vista и Windows 7-8 нужно запускать инсталятор с правами администратора.
  2. 2. Теперь создайте какую-нибудь папку. В моем архиве она называется gulp, вы можете назвать ее также, или как вам будет угодно. Условно будем называть ее нашим проектом.
  3. 3.

    Теперь поставим сборщик проектов gulp, и некоторые плагины к нему (просмотрите документацию по gulp, я думаю это будет полезным). В интернете много про это написано, но все авторы описывают это не совсем четко. Установку модулей для node.js осуществляет NPM, я вначале пытался это сделать прямо в node.js, это логично, но не правильно. Естественно у меня ничего не получалось. Итак, закрываем node.js.

    Из документации следует, что gulp нужно устанавливать сперва глобально, а после локально. Итак, заходим в наш проект через какой-нибудь файловый менеджер (total commander или double commander) и в командной строке файлового менеджера сперва набираем "npm install gulp -g", а после набираем "npm install gulp --save-dev" (Рис. 4). Появится окно с установкой, подождем когда установка пройдет и окно пропадет. После установки в нашем проекте появится папка "node_modules". В ней будут лежать все наши плагины, пока в ней лежит только gulp.

  4. 4. После установки gulp-а, нам нужно установить три плагина к нему gulp-watch, gulp-plumber, gulp-sass. Компилировать scss-файлы будет плагин gulp-sass, gulp-plumber необходим для того, чтобы показывать ошибки если вдруг они будут, а они непременно будут (gulp-plumber показывает номер строки с ошибкой, иначе трудно понять что не так), gulp-watch нужен для того, чтобы компиляция происходила автоматически при изменении scss-файлов. Это я ниже подробно опишу.

    Идем на официальный сайт gulp-а (Рис. 5), переходим на страницу с плагинами (Рис. 6). Эта страница очень удобна, вверху есть поле поиска. В этом поле нужно найти наши плагины, перейти на их страницы. Там будут описаны настройки и процесс установки плагинов.

    Итак, для того, чтобы установить плагин gulp-sass (Рис. 7) в наш проект, нужно зайти в наш проект через какой-нибудь файловый менеджер, ввести в командной строке файлового менеджера "npm install gulp-sass --save-dev" (Рис. 8). Я думаю, что плагины gulp-plumber и gulp-watch вы установите сами, это не трудно.

  5. 5. После того, как плагины установлены, нужно создать файл gulpfile.js (Рис. 9) и написать в нем следующее.
    1 2 3 4 5

    // Объявляем наши плагины

    var gulp = require('gulp');

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

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

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

    6

    // Создаем sass задание

    7

    // gulp.src - путь по которому лежит scss-файл который мы будем компилировать

    8

    // gulp.dest - путь в который мы будем генерить нашу css-ку

    9

    // plumber() - не выбрасывать из компилятора если есть ошибки

    10

    // errLogToConsole: true - выводить номер строки в которой допущена ошибка

    11 12 13 14 15 16

    gulp.task('sass', function () {

    gulp.src('scss/main.scss')

    .pipe(plumber())

    .pipe(sass({errLogToConsole: true}))

    .pipe(gulp.dest('project/css'));

    });

    17

    Тут все просто, мы полностью просматривает папку в которой лежит scss-файл который мы хотим скомпилировать, и при любом изменении файлов в этой папки запускаем задание sass (gulp.task('sass))

    18 19 20 21 22 23

    gulp.task('default', function() {

    gulp.run( 'sass');

    gulp.watch('scss/**', function(event) {

    gulp.run('sass');

    })

    })

    Впринципе все, теперь можем проверять. Как видно из файла gulpfile.js, scss-файлы у нас лежат в папке scss, компилируется только файл с именем main.scss. В папке project образно лежит наш проект с html файлами, картинками. В папку project/css мы будем генерить css-ку.

    В папке scss создадим файл main.scss, код может быть любой. В моем примере код выглядит так.

    1 2 3 4 5 6 7 8 9 10 11

    $blue: #3bbfce;

    $margin: 32px;

    .content-navigation {

    border-color : $blue;

    color : darken($blue, 9%);

    }

    .border {

    padding : $margin / 2;

    margin : $margin / 2;

    border-color : $blue;

    }

    Для того, чтобы его скомпилировать, нужно войти в корень нашего проекта (где лежит gulpfile.js) и в командной строке файлового менеджера написать "gulp" (Должно появиться окно как на Рис. 10). Если у вас текстовый редактор "sublime text" то вы можете в одной вкладке открыть "main.scss", а в другой "main.css", меняя параметры "main.scss" вы можете видеть как меняется "main.css". Не правда ли здорово)))

    А теперь давайте проверим, не вылетает ли наш компилятор при наличии ошибок в scss-файле. Для этого заменим переменную "$margin" на "$margins" (Рис. 11), как видим, компилятор показал ошибку в 9 строке, как раз то место, где первый раз встречается наша переменная, все работает.

А теперь не много теории. Как правило для уменьшения запросов на сайт, все css-ки компилируются в одну большую. Как это делать на нашем компиляторе? Мы создаем файл main.scss и в нем через директиву @import подключаем другие scss-файлы. Наш компилятор так настроен, что он при изменении любого scss-файла лежащего в папке scss компилирует "main.scss". Если проект большой, вы можете подключать таким образом разные стили для разных блоков. Если же проект маленький, то вы можете подключить к примеру "normalize" а стили для сайта писать в другом scss-файле. Нечего "normalize" маячить в основной css-ке. Не стоит на него отвлекаться. В большом проекте можно таким образом разбить css-ку на header, footer, стили для каталога и для внутренних страниц, разные стили для всевозможных слайдеров и тд. На больших проектах это вам пригодится. В unix-ых системах есть такое правило, файлы которые начинаются с подчеркивания не компилируются. Поэтому мой вам совет, те файлы который подключаются к основному scss-файлу должны начинаться с подчеркивания. Конечно можно этого и не делать, но это стандарт. Если вы в gulpfile.js замените "gulp.src('scss/main.scss')" на "gulp.src('scss/**.scss')", т.е. скажете генерить все scss-файлы лежащие в папке scss, то при создании и изменении файла с расширенем scss, файл с таким же именем, но с расширением css появится в папке css проекта. А теперь попробуйте дописать к scss-файлу нижнее подчеркивание вначале, вы увидите, что этот файл в папку css проекта генериться не будет.

Если у вас что-то не получается, вы можете написать мне письмо, или задать мне вопрос вконтакте. Я с радостью отвечу на все ваши вопросы. Единственное, в заголовке почты и сообщения контакта напишите sass-lessons, чтобы я его не пропустил.

Рис.1
Рис.2
Рис.3
Рис.4
Рис.5
Рис.6
Рис.7
Рис.8
Рис.9
Рис.10
Рис.11