Sass (Syntactically Awesome Stylesheets) [ Синтаксически Удивительные таблицы стилей ] — модуль, включенный в Haml. Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Возможность использования CSS-библиотек, на любой случай жизни.
Отличительная особенность SASS препроцессора использование Фреймворков - упарщающие жизнь разработчику.
Один из таких Фреймворков - это Bourbon
SASS препроцессор - также обладает двумя СИНТАКСИСАМИ.
Можно выбрать один из 2-х синтаксисов.
Либо упрощенный SASS
Либо развернутый CSS-подобный, - S-CSS
САМА ИДЕЯ ИСПОЛЬЗОВАНИЯ CSS-препроцессора
Дело в том, что если писать CSS на прямую, то это превращается в пытку.
Многие действия приходилось повторять:
- Копировать селекторы
- Свойства
- И целые CSS-блоки
ПОЭТОМУ - ДЛЯ УПРОЩЕНИЯ РАБОТЫ НАД CSS - БУДЕМ ИСПОЛЬЗОВАТЬ CSS-ПРЕПРОЦЕССОР SASS
Разнообразить разработку
и даже не много по развлечься
В качестве окружения для работы SASS
- будем использовать версию SASS - для Task-Менеджера Gulp.
Gulp SASS
Для использования Ruby-версии или компиляции SASS с помощью специального софта.
Подключим SASS - наиболее популярным образом - используя Gulp!
1 Убедитесь, что у вас установлена финальная версия Gulp!
2 И финальная версия Node.js ( npm )
Gulp - Для самых маленьких!
С помощью GULP - можно автоматизировать разработку Front-End.
GULP - предназначен для:
- СОЗДАНИЕ ВЕБ-СЕРВЕРОВ
- АВТОМАТИЧЕСКИЙ RE-FRESH СТРАНИЦЫ В БРАУЗЕРЕ
- СЛЕЖЕНИЕ ЗА ИЗМЕНЕНИЕМ В ФАЙЛАХ ПРОЕКТА
- ИСПОЛЬЗОВАНИЕ РАЗЛИЧНЫХ JAVA-скрипт, CSS и HTML препроцессоров
Таких как Coffe-скрипт, LESS, SASS, Stylus, Cheat
- Минимизация CSS и JS кода
- Оптимизация и конкатинации файлов проекта в один
- Автоматическое создание Вендерных префиксов
- это приставки в названиям CSS-свойств, которые добавляет производитель браузеров - для нестандартных свойств CSS
- Позволяет автоматизировать управление файлами и папками в рамках проекта:
СОЗДАНИЕ, УДАЛЕНИЕ, ПЕРЕИМЕНОВАНИЕ - Позволяет запускать и контролировать внешние команды ОС
- Запускать внешние приложения: Джекил
- Оптимизировать работу с изображениями:
СЖИМАТЬ, СОЗДАВАТЬ СПРАЙТЫ, РЕСАЙЗ - Позволяет делать Deploy - отправка на внешний сервер Вашего проекта:
FTP, SFTP - Позволяет делать подключения, используя бесконечно большого количества Gulp-утилит
Gulp-утилит - действительно очень много, и можно под любую задачу найти любую утилиту.
- Позволяет создавать карты проекта и автоматизировать РУЧНОЙ ТРУД какой то
Можно сказать, что GULP - способен решить практически любую задачу, при разработке проекта ЛЮБОЙ КРУПНОСТИ (СЛОЖНОСТИ) - от не большого сайта - до крупного проекта.
Любой проект на Gulp - имеет в корневой директории файл: gulp.js
Написание инструкций для Gulp - это не совсем программирование - это инструкции.
Хотя они пишутся на языке java-script.
Не стоит пугаться больший файлов Gulp.js - поскольку все инструкции, однотипные.
НАМ НУЖНО УСТАНОВИТЬ GULP
А для этого ДОЛЖЕН БЫТЬ УСТАНОВЛЕН Node.js
Качаем здесь: https://nodejs.org/en/download/
И финальная версия Node.js (npm)
NODE.JS - УСТАНОВЛЕН!
SASS - CSS препроцессор (Часть 2-я)