Препроцессоры CSS SASS, LESS

1.

ЗАНЯТИЕ №10-11
Препроцессоры
CSS
SASS, LESS

2.

Что такое препроцессор CSS
CSS препроцессор (от англ. CSS preprocessor) —
это надстройка над CSS, которая добавляет ранее
недоступные возможности для CSS, с помощью новых
синтаксических конструкций.

3.

Самые популярные препроцессоры

4.

SASS
Syntactically Awesome Stylesheets.
Имеет две вариации написания:
• SCSS - с фигурными скобками
• SASS - с отступами

5.

Возможности
• вложенности
• переменные
• миксины
• функции

6.

Установка и запуск
npm install -g sass
Запуск
sass filename.sass filename.css
Запуск с наблюдением
sass --watch filename.sass filename.css
filename.sass - исходный файл sass
filename.css - конечный файл css

7.

SASS и gulp
Установить модуль gulp-sass
Создать задачу
const sass = require('gulp-sass');
function sassTask(){
return src("./src/*.sass").pipe(sass()).pipe(dest("./public"))
}

8.

Синтаксис
SASS использует стиль с отступами, SCSS использует стиль с
фигурными скобками. В дальнейшем мы будем рассматривать
только SASS.
На одном уровне отступов с селектором находятся те стили,
которые применятся к этому селектору. Точку с запятой в
конце строки ставить не обязательно.

9.

SCSS vs SASS
SCSS
SASS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
$font-stack: Helvetica, sans-serif
$primary-color: #333
body {
font: 100% $font-stack;
color: $primary-color;
}
body
font: 100% $font-stack
color: $primary-color

10.

Вложение
Мы можем вкладывать одни селекторы в другие. В итоговом
CSS это будет выглядеть как селектор внутри селектора.
Пример на следующем слайде.

11.

Вложение
.block
.block {
width: 1200px
width: 1200px;
margin: 0 auto
margin: 0 auto; }
.block .left {
.left
float: left
float: left; }
.block .right {
float: right; }
.right
float: right

12.

Переменные
Мы можем использовать переменные для того, чтобы
сохранить какие-то значения или стили, и потом их
переиспользовать.
Внимание! В чистом CSS тоже появились переменные, однако в
SASS их использование куда удобнее.
Переменные должны начинаться со знака $

13.

Пример с переменными
$maincolor: red
body {
$fontsize: 20px
background-color: red;
font-size: 20px;
body
background-color: $maincolor
font-size: $fontsize
}

14.

Переменные
Переменные в SASS имеют область видимости, ограничивающуюся
селектором.
Глобальные переменные записываются вне селекторов.
.block
$block-color: orange
width: 1200px
margin: 0 auto
$block-color будет доступна только в селекторе .block

15.

Типы данных переменных
Числа (с единицами измерения)
Строки (с кавычками и без)
Цвета
Списки
Map
true и false
null

16.

Операции с числами
Со численными значениями можно использовать арифметические
операции.
$fontsize: 20px
body
font-size: $fontsize
header
font-size: $fontsize*2
font-size тега header будет равен 40px
/ не всегда означает деление

17.

Строки
Строки можно вставлять не только в значения свойств, но и в
селекторы и названия свойств.
$sel: family
body
font-#{$sel}: Arial
#{имя переменной} - способ подставить строку в нужное место

18.

Списки
Содержат перечисление значений через запятую в круглых
скобках.
Частое использование с оператором @each
$mylist: (40, 30, 20)
@each $var in $mylist
li.size-#{$var}
font-size: #{$var}px
Другие операторы разберем позже.

19.

Миксины
Миксины (примеси) - куски кода css, которые можно вставить
в любое место.
Миксины создаются с помощью команды @mixin
@mixin oncenter()
margin: 0 auto
.container
@include oncenter

20.

Миксины и параметры
Миксины могут принимать параметры как функции.
@mixin oncenter($width)
width: $width
margin: 0 auto
.container
@include oncenter(1400px)

21.

Модули в SASS
Вы можете разбить свой SASS файл на некоторые модули, которые
затем сможете подключать с использованием команды @use
Файлы модулей обычно называют, начиная символа подчеркивания _
SASS игнорирует такие файлы, не превращая их в css файлы.
_part.sass
style.sass
$bgcolor: orange
@use "_part"
body
background-color: $bgcolor

22.

Переменные в модулях
Если в модулях есть переменные, то можно их использовать,
если дать модулю псевдоним.
@use "_part" as p
.block
color: p.$bgcolor

23.

Операторы
@if и @else
@each
@for
@while

24.

@if и @else
@if <выражение>
<стили>
@else
<стили>
@else не обязателен
$fs: 20px
body
@if $fs > 30px
font-size: $fs
@else
font-size: 30px

25.

@for
@for <переменная> from <выражение> to <выражение>
<действия>
@for <переменная> from <выражение> through <выражение>
<действия>
Отличия to и through - to не включительно, through – включительно.

26.

Пример
@for $var from 1 through 10
li:nth-child(#{$var})
font-size: 10px + 5px * $var

27.

Функции
Обычные функции как в программировании, должны возвращать
значения.
@function pow($base, $exponent)
$result: 1
@for $_ from 1 through $exponent
$result: $result * $base
@return $result

28.

Дополнительно:
• Встроенные модули
• Map
• Списки
• Команды @
• placeholder селектор

29.

Задание
По макету с использованием SASS.

30.

ЗАНЯТИЕ №10-11
LESS
Препроцессор CSS

31.

LESS
Leaner Style Sheets, компактная таблица стилей.
Относительно новый препроцессор (новее SASS).
LESS - надстройка над CSS, в результате чего обычный CSS
код можно использовать внутри LESS.

32.

LESS
Установка
npm install -g less
Запуск
lessc style.less style.css
style.less - исходный файл LESS
style.css - исходный файл CSS

33.

Дополнительно
Существует возможность компилировать less на лету в
браузере, но эта возможность существует только в новых
браузерах и не рекомендуется на production версиях сайта изза снижения скорости.
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdn.jsdelivr.net/npm/[email protected]" ></script>

34.

Возможности LESS
• Переменные
• Миксины
• Вложенности
• Функции
• Операции
• и т.д.

35.

Переменные в LESS
@backcolor: orange;
body {
background-color: @backcolor;
}

36.

Переменные в LESS
Можно объявлять до использования и изменять значения.
.@{comp} {
@comp: yellow;
background-color: @comp;
}
@comp: content;
Области видимости переменных ограничиваются селекторами.

37.

Интерполяция переменных
@comp: content;
.@{comp} {
background-color: orange;
}
Таким образом подставить переменную можно в селекторы, свойства,
url() и @import()

38.

Свойства как переменные
В LESS вы можете использовать значения свойств как переменные с
помощью записи $свойство.
.content {
padding-left: 20px;
padding-right: $padding-left;
}

39.

Операции
Стандартные арифметические операции доступны в LESS.
Автоматическое преобразование единиц измерения тоже
присутствует.

40.

Вложение
Вложенный селектор должен находиться внутри фигурных скобок
родительского селектора.
.content {
color: orange;
a {
text-decoration: none;
}
}

41.

Родительский селектор
Если вам нужен родительский селектор, вы можете использовать
спецсимвол &
.content {
color: orange;
&:hover {
color: black;
}
}

42.

или
.content {
color: orange;
&-bottom {
padding-bottom: 10px;
}
}

43.

&
Можно использовать несколько раз в одном селекторе.
.content {
color: orange;
&-bottom + &-left {
padding-bottom: 10px;
}
}

44.

Просто посмотрите на результат
li, a, input {
border-bottom: solid;
&+& {
border-radius: 5px;
}
}

45.

Миксины
Можно делать из существующих селекторов.
.content {
margin: 0 auto;
}
.footer {
.content()
}

46.

Миксины со скобками
Не будут включены в css
.content() {
margin: 0 auto;
}
.footer {
.content()
}
в CSS будет только .footer

47.

Селекторы и части в миксинах
Селектор & работает и в миксинах.
Части миксинов можно вытаскивать по имени селектора.
.content() {
margin: 0 auto;
.base {
font-style: italic;
}
}
.footer {
.content.base();
}

48.

Параметры в миксинах
.content(@topbot) {
margin: @topbot auto;
}
.footer {
.content(20px);
}

49.

extend
extend - псевдокласс, который можно использовать для копирования
поведения других стилей.
.content {
background-color: antiquewhite;
}
.main:extend(.content){
color: yellow
}

50.

extend all
Выберет все вариации селектора.
.content {
background-color: antiquewhite;
}
.content footer {
background-color: aqua;
}
.main:extend(.content all){
color: yellow
}

51.

Функции
LESS предлагает различные функции для тонкой работы со стилями.
Их можно разбить на несколько групп:
Логические
Математические
Строковые
Списковые
Цветовые
Есть ещё группы функций, но мы их рассматривать не будем.

52.

if
if (условие, значение1, значение2)
Значение1 возвращается, если условие истинно, значение2
возвращается, если условие ложно.
@a: 2px;
body {
font-size: if(@a > 5px, @a, 5px);
}

53.

%
Функция % используется для вывода форматированных строк.
%(string, ...parameters)
string - строка с заглушками.
Заглушки подставляются в виде знака % и следующим за ним
буквами s, S, d, D, a, или A.

54.

Пример
@b: 5;
body {
padding: %("%dpx %dpx %dpx %dpx", @b, @b+5, @b+10,
@b+15);
}

55.

Остальные функции
https://lesscss.org/functions/#functions-overview