Язык программирования SASS

Содержание

Слайд 2

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

Препроцессоры в терминах веба - это программа которая транслирует входящий в нее

Препроцессоры Препроцессоры в терминах веба - это программа которая транслирует входящий в
код (как правило расширяющий возможности и упрощающий написание на стандартных языках) в код другого языка читаемый браузерами.

Слайд 3

вложенности селекторов
составные селекторы
арифметические операции
переменные
функции
и много прочих вкусностей...

Ускорение процесса разработки

вложенности селекторов составные селекторы арифметические операции переменные функции и много прочих вкусностей... Ускорение процесса разработки

Слайд 4

SASS или SCSS ?

SASS (Syntactically Awesome Style Sheets) - это язык который

SASS или SCSS ? SASS (Syntactically Awesome Style Sheets) - это язык
при помощи компилятора написанного на Ruby, транислируется в CSS.
SCSS - css-подобный диалект SASS (любой CSS код - это валидный код SCSS)

Слайд 5

Вложенности селекторов

Если написать дополнительный селектор внутри основных фигурных скобок, то это селектор

Вложенности селекторов Если написать дополнительный селектор внутри основных фигурных скобок, то это селектор становится зависимым!
становится зависимым!

Слайд 6

Составные селекторы

Оператор - & - конкатенирует строку написанную после него с первоначальным

Составные селекторы Оператор - & - конкатенирует строку написанную после него с первоначальным селектором.
селектором.

Слайд 7

Арифметические операции

SASS умеет производить операции над числами, но если будут складываться разные

Арифметические операции SASS умеет производить операции над числами, но если будут складываться
единицы измерения то будет ошибка.

Слайд 8

Переменные

Переменные в SASS могут хранить что угодно - строки, числа, цвета, списки

Переменные Переменные в SASS могут хранить что угодно - строки, числа, цвета,
(массивы) и т.д. Имя переменной может начинаться либо с латиницы либо с подчеркивания.

Слайд 9

Используем функции

SASS содержит в себе огромное количество встроенных функций (работы с цветами,

Используем функции SASS содержит в себе огромное количество встроенных функций (работы с
с массивами, со строками и пр.)

Слайд 10

Так же функции можно создавать

Для создания функций есть специальные конструкции @function и

Так же функции можно создавать Для создания функций есть специальные конструкции @function
@return для возращения результата.

Слайд 11

примеси
циклы
наследование
“плейсхолдеры”
условия

Повторное использование кода

примеси циклы наследование “плейсхолдеры” условия Повторное использование кода

Слайд 12

Примеси (mixins)

Примеси созданы для генерации свойств в зависимости от входных параметров

Примеси (mixins) Примеси созданы для генерации свойств в зависимости от входных параметров

Слайд 13

Бесконечное число параметров

Иногда в свойство CSS можно передавать несколько параметров что бы

Бесконечное число параметров Иногда в свойство CSS можно передавать несколько параметров что
в примесях это не вызывало ошибок, нужно применить оператор (...)

Слайд 14

Циклы

Перебирать массивы можно при помощи конструкции @each in

Циклы Перебирать массивы можно при помощи конструкции @each in

Слайд 15

Условия

Конечно же есть @if, @else и @else if

Условия Конечно же есть @if, @else и @else if

Слайд 16

Наследование

Если нам нужно расширить или унаследовать свойства класса, мы можем применить директиву

Наследование Если нам нужно расширить или унаследовать свойства класса, мы можем применить директиву @extend
@extend

Слайд 17

Плейсхолдеры

Что бы не дублировать функциональные классы, можно использовать специальную конструкцию

Плейсхолдеры Что бы не дублировать функциональные классы, можно использовать специальную конструкцию

Слайд 18

Импортирование стилей

Импортирование стилей

Слайд 19

Импорт стилей

Одним из факторов влияющих на скорость загрузки страницы - это количество

Импорт стилей Одним из факторов влияющих на скорость загрузки страницы - это
файлов подключеных в неё. Поэтому в документе должен быть подключен только один файл со стилями. Такие файлы называют входной точкой (entry file).

Но, что бы файл стилей не разрастался до огомных размеров, и весь код не сливался в одну “кучу” принято разбивать CSS на логические части. Это помогает реализовать конструкция @import.

Имя файла: Язык-программирования-SASS.pptx
Количество просмотров: 49
Количество скачиваний: 0