[MUSIC]
Этот урок посвящен препроцессорам CSS,
в частности Less и Sass.
Теперь, очевидно, эти темы больше связаны с CSS и
определением классов CSS, но
мне было бы нецелесообразно завершить курс Bootstrap, не
вникая в препроцессоры CSS.
Просто потому, что Bootstrap построен с использованием Sass для своего источника.
Итак, мы кратко рассмотрим препроцессоры CSS,
что они такое, как они полезны при определении классов CSS
и почему Bootstrap использует их.
Как вы, вероятно, понимаете из вашего предыдущего опыта работы с CSS,
CSS отлично подходит для определения стилей и
многократного применения этих стилей к различным элементам HTML.
И именно так мы используем CSS, когда мы определяем наши веб-страницы.
Но когда вы смотрите на сам код CSS,
вы начинаете быстро понимать ограничения CSS.
Особенно, если вы исходите из фона программирования, вы понимаете, что
CSS не имеет того, что вы обычно ожидаете на языке программирования, как переменные,
вложенность селекторов, переменных, выражений и функций.
Это означает, что
написание кода CSS становится громоздким, а поддержание кода CSS становится громоздким из-за отсутствия традиционного языка программирования.
Теперь, здесь препроцессоры CSS приходят нам на помощь.
Существует несколько популярных препроцессоров CSS, которые пытаются устранить некоторые
недостатки CSS, поддерживая многие из этих функций.
Два, в частности, которые представляют интерес для нас - меньше и Сасс.
Мы рассмотрим эти два более подробно в этом уроке.
Теперь, когда вы определяете свои классы CSS, используя один
из этих языков препроцессора, таких как Less или
Sass, тогда они в конечном итоге должны быть преобразованы в CSS,
но это может быть сделано автоматически, прежде чем CSS будет использоваться на вашей веб-странице.
То, что эти языки предварительной обработки приносят нам
больше языка программирования как синтаксис, как мы увидим в следующих нескольких слайдах.
Мы кратко рассмотрим Лес и Сасс.
В частности, причина для нас взглянуть на это заключается в том, что Bootstrap сам
использует Sass для определения своего источника для своих классов CSS.
И поэтому, если вы перейдете к настройке Bootstrap,
вам придется работать с кодом Sass.
Bootstrap 3, который был предыдущей версией Bootstrap, использовал Less,
и, следовательно, я подумал, что было бы уместно охватить как Less, так и
Sass, потому что они
в значительной степени похожи друг на друга с точки зрения их возможностей и способа определения синтаксиса.
Типичные функции, которые CSS препроцессоры приносят, это поддержка
переменных, селекторов вложенности, выражений, функций и микшинов.
Итак, мы рассмотрим некоторые из них с некоторыми примерами в следующих нескольких слайдах.
Первое, что мы рассмотрим, это переменные.
Теперь во многих классах CSS, которые вы
определяете, вы можете иметь некоторое повторное использование определенных количеств.
Возможно, было бы более полезно, если вы определите некоторые переменные, которые
содержат эти количества, и используете эти переменные при определении классов CSS.
Вот где переменные приходят вам на помощь.
Здесь мы рассмотрим как Less, так и Scss код.
Scss - это версия Sass,
более популярная версия синтаксиса Sass, поэтому я концентрируюсь на Scss здесь.
Таким образом, если вы определяете переменные в Less,
вы продолжите имя переменной со знаком @.
В случае Scss вы будете использовать знак доллара перед именем переменной.
И как только вы определяете эти переменные,
вы можете использовать эти переменные, когда вы определяете классы.
Как вы видите в примере, где мы определяем navbar-обратную в качестве фона,
или высоту элемента каруселя в качестве переменных.
Теперь преимущество определения переменных в начале вашего класса CSS
заключается в том, что есть одна точка, где вы можете обновить значение, и
он автоматически обновит все классы CSS, которые используют эту переменную.
Как правило, мы используем переменные в языках программирования.
Переменные в языках препроцессора CSS также могут иметь свою собственную область действия.
Очень часто, когда вы определяете классы CSS, особенно когда вам
нужно определить классы, которые вложены внутри других классов
, то довольно скоро ваш код CSS становится очень громоздким.
Таким образом, именно здесь вложенность поддерживается вашими препроцессорами CSS.
Как вы можете видеть, вы можете определить, например, класс карусели,
а внутри класса карусели вы можете определить класс элемента карусели.
И аналогичным образом, подкласс изображения внутри класса элемента карусели.
Таким образом, здесь вы можете видеть, что каждый из них вложен внутри предыдущего класса.
С переменными вы можете удерживать одно значение за раз в переменной.
Предположим, у вас есть группа переменных, которые суммируются вместе
объявить набор объявлений CSS, то есть где мы используем mixins.
В Less вы определяете mixin, давая ему имя,
и в Sass вы просто предшествуете этому с @mixin
перед именем объявления mixin.
И внутри mixin вы можете определить кучу объявлений CSS
, которые затем могут быть повторно использованы для различных классов CSS.
Как вы видите в этом примере, мы определяем нулевое поле
как mixin, как в Less, так и в Sass.
Обратите внимание на незначительные изменения в синтаксисе в каждом из этих случаев.
И затем вы можете использовать этот mixin при определении дополнительных классов CSS.
Таким образом, здесь вы можете видеть, что для заголовка строки мы определяем нулевое поле как
mixin в заголовке строки, что означает, что все
эти свойства от нулевого поля будут унаследованы этим классом заголовка строки.
Mixins сами могут принимать дополнительные параметры, если вы хотите их определить.
Поэтому в этом случае я определяю
вариацию миксина нулевого поля, который мы видели на предыдущем слайде.
Здесь, это нулевое поле mixin принимает два параметра,
pad вверх и pad влево вправо.
И с Less вы даже можете указать значение по умолчанию для него,
но с Scss вам нужно явно указать значения.
Итак, здесь мы определяем два разных свойства CSS, маржа и
заполнение, а затем само заполнение использует параметры для нашего mixin там.
Таким образом, в этом случае вы можете использовать эти mixins, как вы видите в
двух классах CSS, определенных под заголовком строки и
содержимым строки, указав их значения параметров,
когда вы включаете этот mixin в свой кластер CSS.
Мало того, вы даже можете выполнять математические операции с предопределенными
переменными, когда вы используете их внутри своих классов CSS.
Итак, здесь вы можете видеть, что я определил два разных элемента карусели
с двумя разными размерами, и поэтому
вы можете видеть, что высота каждого из них определяется по-разному.
В одном случае я использую предопределенную высоту, в другом случае я
умножаю эту высоту, а затем использую ее для определения
свойства высоты внутри моего элемента карусели для класса item-large.
Таким образом, такой вид математических операций над
переменными также допускается в языках препроцессора CSS.
Другие функции, которые CSS препроцессоры
включают функции, которые позволяют определить математические функции, Меньше строк.
Вы также можете выполнять цветовые операции и операции смешивания цветов с помощью этих функций
и использовать их при определении классов CSS.
Это немного продвинуто, поэтому я не буду вдаваться в слишком много деталей.
Кроме того, вы можете ввести предопределенные классы препроцессора CSS в другие классы.
Например, если у вас есть класс Less, как определено, и
вы можете ввести этот файл в другой файл Less.
Аналогично, если вы определили файлы Scss,
вы можете импортировать их в другие файлы Scss с помощью операции импорта.
Синтаксис одинаков как для Less, так и для Sass.
Теперь, когда мы увидели некоторые особенности языков препроцессора CSS, давайте
теперь рассмотрим, как мы можем использовать их, выполнив пару упражнений.
Во-первых, мы сделаем упражнение, основанное на Less.
Тогда мы проследим за этим упражнением, основанным на Сассе.
[ МУЗЫКА]