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-я)