CSS-препроцессоры

Сентябрь 14, 2022

Главная
Алгебра
CSS-препроцессоры

Содержание

2. Переменные Философия этого препроцессора - повторное использование CSS синтаксиса там, где это возможно синтаксис @название_переменной: значение_переменной;
3. Объявляем, используя атрибут @
4. в компиляции
5. Операции с переменными (операторы) Допускается производить операции с выражениями, значения которых соответствуют строкам. «*» — игнорируется
6. пример
7. компиляция
8. Арифметические операции (строгий режим) Для включения строгого режима арифметических операций нужно взять выражения в круглые скобки
10. Перечисленные в таблицах операции можно производить с числами, строками, цветами и числами с указанной размерностью
11. примеси Примеси являются одним из способов подключить набор свойств из одного правила в другое правило. Свойства
12. или
14. пример
16. вложенность Символ "&" используется перед псевдо-классами в нашей вложенной структуре.
17. css less
21. Функции У less есть много функций, которые трансформируют цвета, работают со строками и числами.
22. Функции С помощью LESS-функции spin можно повернуть цветовое колесо на определённый угол относительно заданного цвета и
23. LESS-функции lighten и darken color: lighten(red, 50%); // светлее red на 50% color: darken(blue, 25%); //
24. Работа с цветом
25. LESS-функции для работы с цветом: saturate и desaturate color: saturate(green, 20%); // green насыщеннее на 20%
28. Общие функции color image-size, image-width, image-height Convert default unit get-unit svg-gradient
29. Пространства имен и аксессоры Объединение нескольких миксинов и переменных под #bundle, для последующего повторного использования или
30. Пространства имен и аксессоры применение миксин к .button классу в нашем #header #header a { color:
31. Область видимости(Scope) Область видимости в Less очень похожа, на подобную область видимости в языках программирования. Переменные
32. порядок определения переменных имеет значение @var: red; #page { @var: white; #header { color: @var; //
34. Скачать презентацию

Слайд 2

Переменные
Философия этого препроцессора - повторное использование CSS синтаксиса там, где это

возможно
синтаксис
@название_переменной: значение_переменной;

Слайд 3

Объявляем, используя атрибут @

Слайд 4

в компиляции

Слайд 5

Операции с переменными (операторы)
Допускается производить операции с выражениями, значения которых соответствуют

строкам. «*» — игнорируется при условии, что производится операция с явно указанной строкой в выражении не через переменную, а напрямую. Иначе ошибка.

Слайд 6

пример

Слайд 7

компиляция

Слайд 8

Арифметические операции (строгий режим)
Для включения строгого режима арифметических операций нужно взять

выражения в круглые скобки (выражение).
В таком режиме запрещается производить операции со строками.

Слайд 9

Слайд 10

Перечисленные в таблицах операции можно производить с числами, строками, цветами и

числами с указанной размерностью

Слайд 11

примеси
Примеси являются одним из способов подключить набор свойств из одного правила

в другое правило.

Свойства из .bordered появятся в #menu a и в .post a. (Отметьте, что в качестве примеси можно использовать и #id

Слайд 12

или

Слайд 13

Слайд 14

пример

Слайд 15

Слайд 16

вложенность
Символ "&" используется перед псевдо-классами в нашей вложенной структуре.

Слайд 17

css
less

Слайд 18

Слайд 19

Слайд 20

Слайд 21

Функции
У less есть много функций, которые трансформируют цвета, работают со строками и числами.

Слайд 22

Функции
С помощью LESS-функции spin можно повернуть цветовое колесо на определённый угол относительно заданного

цвета и получить новый цвет.
spin(цвет, угол_поворота)
color: spin(red, 90); // цвет повернётся от красного на 90° по часовой
border-color: spin(#f0f, -45); // цвет на 45° от #f0f против часовой

Слайд 23

LESS-функции lighten и darken
color: lighten(red, 50%); // светлее red на 50%

color: darken(blue, 25%); // темнее blue на 25%
Второе значение задаётся в процентах от 0% до 100%.
При задании 100% в lighten функция возвращает полностью белый цвет,
а 100% для darken — полностью чёрный. То есть эти функции «смешивают» заданный цвет с белым или чёрным.

Слайд 24

Работа с цветом

Слайд 25

LESS-функции для работы с цветом: saturate и desaturate
color: saturate(green, 20%); // green

насыщеннее на 20%
color: desaturate(blue, 50%); // blue бледнее на 50%

Слайд 26

Слайд 27

Слайд 28

Общие функции
color
image-size, image-width, image-height
Convert
default
unit
get-unit
svg-gradient

Слайд 29

Пространства имен и аксессоры
Объединение нескольких миксинов и переменных под #bundle, для

последующего повторного использования или распределения
#bundle {
.button
{ display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { ... }
.citation { ... }
}

Слайд 30

Пространства имен и аксессоры
применение миксин к .button классу в нашем #header
#header

a {
color: orange;
#bundle > .button;
}
переменные, объявленные внутри пространства имен будут в области видимости только этого пространства имен и не будут доступны из вне пространства

Слайд 31

Область видимости(Scope)
Область видимости в Less очень похожа, на подобную область видимости

в языках программирования.
Переменные и миксины, вначале ищутся локально, и если они не найдены, компилятор будет осуществлять поиск в родительском пространстве, и так далее по иерархии

Слайд 32

порядок определения переменных имеет значение
@var: red;
#page {
@var: white;

#header {
color: @var; // white
}
}
В данном примере, если мы удалим определение переменной @var внутри #page, то свойство color у #header будет: red, поскольку переменная @var не будет найдена ни внутри #header, ни внутри #page, а только в корне всех правил, где она и содержит значение: red

CSS-препроцессоры

Содержание

ПеременныеФилософия этого препроцессора - повторное использование CSS синтаксиса там, где это

Объявляем, используя атрибут @

в компиляции

Операции с переменными (операторы)Допускается производить операции с выражениями, значения которых соответствуют

пример

компиляция

Арифметические операции (строгий режим)Для включения строгого режима арифметических операций нужно взять

Перечисленные в таблицах операции можно производить с числами, строками, цветами и

примесиПримеси являются одним из способов подключить набор свойств из одного правила

или

пример

вложенностьСимвол "&" используется перед псевдо-классами в нашей вложенной структуре.

cssless

ФункцииУ less есть много функций, которые трансформируют цвета, работают со строками и числами.

ФункцииС помощью LESS-функции spin можно повернуть цветовое колесо на определённый угол относительно заданного

LESS-функции lighten и darkencolor: lighten(red, 50%); // светлее red на 50%

Работа с цветом

LESS-функции для работы с цветом: saturate и desaturatecolor: saturate(green, 20%); // green

Общие функцииcolorimage-size, image-width, image-heightConvertdefaultunitget-unitsvg-gradient

Пространства имен и аксессорыОбъединение нескольких миксинов и переменных под #bundle, для

Пространства имен и аксессорыприменение миксин к .button классу в нашем #header#header

Область видимости(Scope)Область видимости в Less очень похожа, на подобную область видимости

порядок определения переменных имеет значение@var: red; #page { @var: white;

Похожие презентации

Переменные
Философия этого препроцессора - повторное использование CSS синтаксиса там, где это

Операции с переменными (операторы)
Допускается производить операции с выражениями, значения которых соответствуют

Арифметические операции (строгий режим)
Для включения строгого режима арифметических операций нужно взять

примеси
Примеси являются одним из способов подключить набор свойств из одного правила

вложенность
Символ "&" используется перед псевдо-классами в нашей вложенной структуре.

css
less

Функции
У less есть много функций, которые трансформируют цвета, работают со строками и числами.

Функции
С помощью LESS-функции spin можно повернуть цветовое колесо на определённый угол относительно заданного

LESS-функции lighten и darken
color: lighten(red, 50%); // светлее red на 50%

LESS-функции для работы с цветом: saturate и desaturate
color: saturate(green, 20%); // green

Общие функции
color
image-size, image-width, image-height
Convert
default
unit
get-unit
svg-gradient

Пространства имен и аксессоры
Объединение нескольких миксинов и переменных под #bundle, для

Пространства имен и аксессоры
применение миксин к .button классу в нашем #header
#header

Область видимости(Scope)
Область видимости в Less очень похожа, на подобную область видимости

порядок определения переменных имеет значение
@var: red;
#page {
@var: white;