Препроцессоры

Препроцессоры:

• Профессиональные инструменты.
• Расширяют стандартные языка.
• Бывают для CSS, HTML, JavaScript.

Возможности:

• Подключение файлов (в любом месте файла)
• Переменные
• Математические операции
• Управление цветами
• Вложенные селекторы

Варианты препроцессоров:

• Less
• Sass (SCSS/Sass)

Синтаксис не особо отличим.

Спойлер: Less

{Less}
RU doc (не законченная)

• Писали на Ruby
• Работаем из Node.js или браузера офк

Песочница

Спойлер: Sass

Sass
RU doc (даже очень неплохая)

Песочница

• На Ruby, перенесен на С++
• Работает на Ruby и конечно на Node.js

Синтаксис

• Sass
• SCSS

Переменные

Спойлер: Less

Код:

@fancy-color: tomato;

body {
      color: @fancy-color;
}

Результат:
color: tomato;

Спойлер: Sass (SCSS)

Код:

$fancy-color: tomato;

body {
      color: @fancy-color;
}

Результат:
color: tomato;

Спойлер: CSS

Код:

html {
     --fancy-color: tomato;
}

body {
     color: var( --fancy-color);
}

Мат. операции

Спойлер: Less

Код:

@body-size: 16px;

body {
      margin-top: 10px * 2
      font-size: @body-size * 1.25
}

Спойлер: Sass (SCSS)

Код:

$body-size: 16px;

body {
      margin-top: 10px * 2
      font-size: @body-size * 1.25
}

Спойлер: CSS

Код:

html {
      --body-font-size: 16px;
}

body {
      margin - top: calc(10px * 2);
      font-size: calc(var(--body-font-size) * 1.25);
}

Операции с цветами

Спойлер: Less

Код:

body {
     color: fade(#302682, 50%);
     color: desaturate(#302682, 30%);
     color: lighen(#302682, 20%);
}

Спойлер: Sass (SCSS)

Код:

body {
     color: rgba(#302682, 0.5);
     color: desaturate(#302682, 30%);
     color: lighen(#302682, 20%);
}

Спойлер: CSS

Код:

body {
     color: #302682;
     color: rgba(47, 38, 130, 0.5);
     color: hsla(246, 55%, 33%, 0.5);
}

Вложенности

Спойлер: Однотипные в большинстве случаев

Код:

// Less/Sass(SCSS)

.link {
       color: tomato;

       &:hover {
           color: red;
        }
     
        // Второй класс link--active
        &--active {
           border - bottom: 1px solid black;
        }
}

Спойлер: CSS

Код:

// CSS

.link {
       color: tomato;
}

.link:hover {
       color: red;
}
     
.link--active {
       border - bottom: 1px solid black;
}

Рекомендую не делать вложенности больше двух уровней.
Если Ваши стили будут насчитывать тысячи (сотни тысяч) строк, то скорость работы сайта может немного (или даже нет) упасть.
Так же большие вложенности могут вызывать трудности при переопределении свойств классов (например).

В большинстве случаев, того, что выше вам хватит на долго.

Примеси

Спойлер: Less

Код:

.heading() {
         margin-bottom: 20px;
         margin - top: 20px;
         font-size: 18px;
}

.title {
     .heading();
}

Спойлер: Sass (SCSS)

Код:

@mixin heading {
       margin-bottom: 20px;
       margin-top: 20px;
       font-size: 14px;
}

.title {
    @includе heading
}

Надеюсь никого через @ не вызвал

Спойлер: CSS

Список можно и дальше продолжать полезными свойствами, но для этого есть документация.
Лично мой выбор был - Sass, а именно SCSS.
Основная причина на тот момент - переведенная документация

Сборка

Спойлер: Sass + Gulp

Node.js
Gulp
npm gulp-sass

Создаете в своем проекте файл gulpfile.js (например)

Скопировано с 3 ссылки:

Код:

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

В консоле gulp sass
Чекаем style.css


Пример проекта:
Посмотреть вложение 23700

Спойлер: Less + Gulp

Gulp
Node.js
npm gulp-less

Создаете в своем проекте файл gulpfile.js (например)

Скопировано с 3 ссылки:

Код:

var less = require('gulp-less');
var path = require('path');
 
gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

в консоле gulp less


Посмотреть вложение 23701

Спойлер: Grunt

Полезные ссылки:

• Возможности Less препроцессора
• Less для новичков (RU)
• Возможности Sass препроцессора
• Руководство по написанию разумного Sass (RU)
• Эмулятор консоли cmder (win)
• Установка Node.js
• Полезности при работе с Node.js

 

юзаю SASS мне заебись

 

Лучший

 

Тупа программирую на хтмл, мне заебись

 

ЯП для показухи, хтмл для поцанов

 

Тупа фриланшу , рублю мильоны

 

Изучишь цсс будешь еще богаче

 

а я на i7 пацаны

 

Уже умею
.class {
Color: red;
}

 

В наносекунду офк.

 

ну да.