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

Август 2, 2022

Главная
Информатика
Препроцессоры CSS

Содержание

2. Препроцессоры CSS-препроцессоры — это языки, созданные с единственной целью: добавление возможностей в CSS без нарушения совместимости
5. Документация https://sass-scss.ru/documentation/ http://less-lang.info/ http://stylus-lang.com/docs/selectors.html
6. Книги
7. Приложения prepros. Сейчас это наиболее популярная программа для компиляции sass или less файлов. Подходит больше для
8. Sass & Less Sass и Less используют обычный синтаксис CSS. Благодаря этому, конвертирование обычной таблицы стилей
9. Переменные Less Scss Stylus $ @ $ или ничего Результат
10. Каскадирование Если необходимо написать несколько селекторов, относящихся к одному и тому же родителю, то в чистом
11. Примеси (Миксины) Миксины — это функции, позволяющие многократно использовать набор CSS-свойств во всей таблице стилей. Вместо
13. Наследование Scss, Stylus CSS Наследование — это способность селекторов использовать свойства из другого селектора.
14. Less и наследование less css
15. Шаблонные селекторы Sass поддерживает специальный тип селекторов под названием шаблонные селекторы. Они похожи на селекторы классов
16. Импорт Если вы импортируете файл стилей препроцессора, то он будет импортирован во время компиляции, и на
17. Функции для работы с цветом SASS LESS Stylus
18. Сравнение less и sass
20. Скачать презентацию

Слайд 2

Препроцессоры
CSS-препроцессоры — это языки, созданные с единственной целью: добавление возможностей в

CSS без нарушения совместимости с браузерами.
Препроцессоры компилируют код в чистый CSS, который может быть использован в любом браузере.

Слайд 3

Слайд 4

Слайд 5

Документация
https://sass-scss.ru/documentation/
http://less-lang.info/
http://stylus-lang.com/docs/selectors.html

Слайд 6

Книги

Слайд 7

Приложения
prepros. Сейчас это наиболее популярная программа для компиляции sass или less

файлов. Подходит больше для новичков.
koala. По сути тоже самое, что и первая программа, но более старая.
codekit Работает только под MacOS
ruby. Использовать ruby советует официальная документация. Файлы таким образом компилироваться будут достаточно долго. Данный способ не совсем удобный.
node.js. Для того, чтобы использовать его как препроцессор, можно установить как дополнительный модуль, так и использовать инструменты для сборки js проектов, такие как grunt или gulp. Я советую использовать gulp для компиляции sass файлов.

Слайд 8

Sass & Less Sass и Less используют обычный синтаксис CSS. Благодаря этому,

конвертирование обычной таблицы стилей в стили для препроцессора является простейшей задачей. Sass использует расширение файла .scss, а Less — .less.
Stylus Варианты синтаксис Stylus’е разнообразнее. Stylus использует одно расширение файла — .styl, при этом он позволяет в одном файле использовать сразу несколько вариантов синтаксиса, таких как стандартный CSS-синтаксис и синтаксис, в котором фигурные скобки, двоеточия и точки с запятой необязательны

Слайд 9

Переменные
Less
Scss
Stylus
$
@
$ или ничего
Результат

Слайд 10

Каскадирование
Если необходимо написать несколько селекторов, относящихся к одному и тому же

родителю, то в чистом CSS это будет слишком утомительно

CSS

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

Слайд 11

Примеси (Миксины)
Миксины — это функции, позволяющие многократно использовать набор CSS-свойств во

всей таблице стилей.
Вместо того, чтобы писать один и тот же код несколько раз, можно написать его один раз в миксине и затем использовать.
Это может быть полезно для стилизации определенных элементов и для автоматической расстановки вендорных префиксов.
Когда миксин включен в какой-либо селектор, препроцессор считывает аргументы (если они есть) и подставляет код, который написан в исходном миксине.

Слайд 12

Слайд 13

Наследование
Scss, Stylus
CSS
Наследование — это способность селекторов использовать свойства из другого селектора.

Слайд 14

Less и наследование
less
css

Слайд 15

Шаблонные селекторы
Sass поддерживает специальный тип селекторов под названием шаблонные селекторы. Они похожи

на селекторы классов и идентификаторов, только вместо # или . указывается %. Они предназначены для использования с директивой @extend.

Слайд 16

Импорт
Если вы импортируете файл стилей препроцессора, то он будет импортирован во

время компиляции, и на выходе вы получите все стили в одном CSS-файле.
Если вы импортируете обычный CSS-файл, то при компиляции в таблицу стилей будет вставлена CSS-директива @import "file.css";.

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

Результат

Слайд 17

Функции для работы с цветом
SASS
LESS
Stylus

Слайд 18

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

Содержание

ПрепроцессорыCSS-препроцессоры — это языки, созданные с единственной целью: добавление возможностей в

Документация https://sass-scss.ru/documentation/ http://less-lang.info/ http://stylus-lang.com/docs/selectors.html

Книги

Приложенияprepros. Сейчас это наиболее популярная программа для компиляции sass или less

Sass & Less Sass и Less используют обычный синтаксис CSS. Благодаря этому,

ПеременныеLessScssStylus$@$ или ничегоРезультат

КаскадированиеЕсли необходимо написать несколько селекторов, относящихся к одному и тому же

Примеси (Миксины)Миксины — это функции, позволяющие многократно использовать набор CSS-свойств во

НаследованиеScss, StylusCSSНаследование — это способность селекторов использовать свойства из другого селектора.

Less и наследованиеlesscss

Шаблонные селекторыSass поддерживает специальный тип селекторов под названием шаблонные селекторы. Они похожи

ИмпортЕсли вы импортируете файл стилей препроцессора, то он будет импортирован во

Функции для работы с цветомSASSLESSStylus

Сравнение less и sass

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