🗊Презентация CSS-препроцессоры

Категория: Технология
Нажмите для полного просмотра!
CSS-препроцессоры, слайд №1CSS-препроцессоры, слайд №2CSS-препроцессоры, слайд №3CSS-препроцессоры, слайд №4CSS-препроцессоры, слайд №5CSS-препроцессоры, слайд №6CSS-препроцессоры, слайд №7CSS-препроцессоры, слайд №8CSS-препроцессоры, слайд №9CSS-препроцессоры, слайд №10CSS-препроцессоры, слайд №11CSS-препроцессоры, слайд №12CSS-препроцессоры, слайд №13CSS-препроцессоры, слайд №14CSS-препроцессоры, слайд №15CSS-препроцессоры, слайд №16CSS-препроцессоры, слайд №17CSS-препроцессоры, слайд №18CSS-препроцессоры, слайд №19CSS-препроцессоры, слайд №20CSS-препроцессоры, слайд №21CSS-препроцессоры, слайд №22CSS-препроцессоры, слайд №23CSS-препроцессоры, слайд №24CSS-препроцессоры, слайд №25CSS-препроцессоры, слайд №26CSS-препроцессоры, слайд №27CSS-препроцессоры, слайд №28CSS-препроцессоры, слайд №29CSS-препроцессоры, слайд №30CSS-препроцессоры, слайд №31CSS-препроцессоры, слайд №32CSS-препроцессоры, слайд №33
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему CSS-препроцессоры. Доклад-сообщение содержит 33 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


CSS-препроцессоры
Описание слайда:
CSS-препроцессоры

Слайд 2


Переменные Философия этого препроцессора - повторное использование CSS синтаксиса там, где это возможно синтаксис @название_переменной: значение_переменной;
Описание слайда:
Переменные Философия этого препроцессора - повторное использование CSS синтаксиса там, где это возможно синтаксис @название_переменной: значение_переменной;

Слайд 3


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

Слайд 4


в компиляции
Описание слайда:
в компиляции

Слайд 5


Операции с переменными (операторы)
Описание слайда:
Операции с переменными (операторы)

Слайд 6


пример
Описание слайда:
пример

Слайд 7


компиляция
Описание слайда:
компиляция

Слайд 8


Арифметические операции (строгий режим)
Описание слайда:
Арифметические операции (строгий режим)

Слайд 9


CSS-препроцессоры, слайд №9
Описание слайда:

Слайд 10


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

Слайд 11


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

Слайд 12


или
Описание слайда:
или

Слайд 13


CSS-препроцессоры, слайд №13
Описание слайда:

Слайд 14


пример
Описание слайда:
пример

Слайд 15


CSS-препроцессоры, слайд №15
Описание слайда:

Слайд 16


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

Слайд 17


css
Описание слайда:
css

Слайд 18


CSS-препроцессоры, слайд №18
Описание слайда:

Слайд 19


CSS-препроцессоры, слайд №19
Описание слайда:

Слайд 20


CSS-препроцессоры, слайд №20
Описание слайда:

Слайд 21


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

Слайд 22


Функции С помощью LESS-функции spin можно повернуть цветовое колесо на определённый угол относительно заданного цвета и получить новый цвет. spin(цвет, угол_поворота) color: spin(red, 90); // цвет повернётся от красного на 90° по часовой border-color: spin(#f0f, -45); // цвет на 45° от #f0f против часовой
Описание слайда:
Функции С помощью 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 — полностью чёрный. То есть эти функции «смешивают» заданный цвет с белым или чёрным.
Описание слайда:
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%
Описание слайда:
LESS-функции для работы с цветом: saturate и desaturate color: saturate(green, 20%); // green насыщеннее на 20% color: desaturate(blue, 50%); // blue бледнее на 50%

Слайд 26


CSS-препроцессоры, слайд №26
Описание слайда:

Слайд 27


CSS-препроцессоры, слайд №27
Описание слайда:

Слайд 28


Общие функции color image-size, image-width, image-height Convert default unit get-unit svg-gradient
Описание слайда:
Общие функции 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 { ... } }
Описание слайда:
Пространства имен и аксессоры Объединение нескольких миксинов и переменных под #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; } переменные, объявленные внутри пространства имен будут в области видимости только этого пространства имен и не будут доступны из вне пространства
Описание слайда:
Пространства имен и аксессоры применение миксин к .button классу в нашем #header #header a { color: orange; #bundle > .button; } переменные, объявленные внутри пространства имен будут в области видимости только этого пространства имен и не будут доступны из вне пространства

Слайд 31


Область видимости(Scope) Область видимости в Less очень похожа, на подобную область видимости в языках программирования. Переменные и миксины, вначале ищутся локально, и если они не найдены, компилятор будет осуществлять поиск в родительском пространстве, и так далее по иерархии
Описание слайда:
Область видимости(Scope) Область видимости в Less очень похожа, на подобную область видимости в языках программирования. Переменные и миксины, вначале ищутся локально, и если они не найдены, компилятор будет осуществлять поиск в родительском пространстве, и так далее по иерархии

Слайд 32


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

Слайд 33


Группа в вк https://vk.com/simple_tech_university
Описание слайда:
Группа в вк https://vk.com/simple_tech_university

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию