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

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

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

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

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

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

• Less
• Sass (SCSS/Sass)

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

Spoiler: Less

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

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

Песочница

Spoiler: Sass

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

Песочница

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

Синтаксис

• Sass
• SCSS

Переменные

Spoiler: Less

Code:

@fancy-color: tomato;

body {
      color: @fancy-color;
}

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

Spoiler: Sass (SCSS)

Code:

$fancy-color: tomato;

body {
      color: @fancy-color;
}

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

Spoiler: CSS

Code:

html {
     --fancy-color: tomato;
}

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

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

Spoiler: Less

Code:

@body-size: 16px;

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

Spoiler: Sass (SCSS)

Code:

$body-size: 16px;

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

Spoiler: CSS

Code:

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

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

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

Spoiler: Less

Code:

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

Spoiler: Sass (SCSS)

Code:

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

Spoiler: CSS

Code:

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

Вложенности

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

Code:

// Less/Sass(SCSS)

.link {
       color: tomato;

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

Spoiler: CSS

Code:

// CSS

.link {
       color: tomato;
}

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

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

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

Примеси

Spoiler: Less

Code:

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

.title {
     .heading();
}

Spoiler: Sass (SCSS)

Code:

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

.title {
    @includе heading
}

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

Spoiler: CSS

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

Сборка

Spoiler: Sass + Gulp

Node.js
Gulp
npm gulp-sass

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

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

Code:

'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


Пример проекта:
View attachment 23700

Spoiler: Less + Gulp

Gulp
Node.js
npm gulp-less

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

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

Code:

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


View attachment 23701

Spoiler: Grunt

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

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

 

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

 

Лучший

 

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

 

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

 

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

 

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

 

а я на i7 пацаны

 

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

 

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

 

ну да.