1
00:00:00,000 --> 00:00:04,466
[MUSIC]

2
00:00:04,466 --> 00:00:08,813
Этот урок посвящен препроцессорам CSS,

3
00:00:08,813 --> 00:00:11,880
в частности Less и Sass.

4
00:00:11,880 --> 00:00:17,420
Теперь, очевидно, эти темы больше связаны с CSS и

5
00:00:17,420 --> 00:00:22,680
определением классов CSS, но

6
00:00:22,680 --> 00:00:26,940
мне было бы нецелесообразно завершить курс Bootstrap, не

7
00:00:26,940 --> 00:00:31,010
вникая в препроцессоры CSS.

8
00:00:31,010 --> 00:00:37,265
Просто потому, что Bootstrap построен с использованием Sass для своего источника.

9
00:00:37,265 --> 00:00:41,970
Итак, мы кратко рассмотрим препроцессоры CSS,

10
00:00:41,970 --> 00:00:47,682
что они такое, как они полезны при определении классов CSS

11
00:00:47,682 --> 00:00:51,166
и почему Bootstrap использует их.

12
00:00:52,972 --> 00:00:58,263
Как вы, вероятно, понимаете из вашего предыдущего опыта работы с CSS,

13
00:00:58,263 --> 00:01:00,997
CSS отлично подходит для определения стилей и

14
00:01:00,997 --> 00:01:06,325
многократного применения этих стилей к различным элементам HTML.

15
00:01:06,325 --> 00:01:11,940
И именно так мы используем CSS, когда мы определяем наши веб-страницы.

16
00:01:11,940 --> 00:01:15,080
Но когда вы смотрите на сам код CSS,

17
00:01:15,080 --> 00:01:19,620
вы начинаете быстро понимать ограничения CSS.

18
00:01:19,620 --> 00:01:23,660
Особенно, если вы исходите из фона программирования, вы понимаете, что

19
00:01:23,660 --> 00:01:29,342
CSS не имеет того, что вы обычно ожидаете на языке программирования, как переменные,

20
00:01:29,342 --> 00:01:34,610
вложенность селекторов, переменных, выражений и функций.

21
00:01:36,310 --> 00:01:44,370
Это означает, что

22
00:01:44,370 --> 00:01:49,550
написание кода CSS становится громоздким, а поддержание кода CSS становится громоздким из-за отсутствия традиционного языка программирования.

23
00:01:49,550 --> 00:01:54,770
Теперь, здесь препроцессоры CSS приходят нам на помощь.

24
00:01:55,800 --> 00:02:01,090
Существует несколько популярных препроцессоров CSS, которые пытаются устранить некоторые

25
00:02:01,090 --> 00:02:07,290
недостатки CSS, поддерживая многие из этих функций.

26
00:02:07,290 --> 00:02:13,000
Два, в частности, которые представляют интерес для нас - меньше и Сасс.

27
00:02:14,840 --> 00:02:19,940
Мы рассмотрим эти два более подробно в этом уроке.

28
00:02:19,940 --> 00:02:24,744
Теперь, когда вы определяете свои классы CSS, используя один

29
00:02:24,744 --> 00:02:29,760
из этих языков препроцессора, таких как Less или

30
00:02:29,760 --> 00:02:34,990
Sass, тогда они в конечном итоге должны быть преобразованы в CSS,

31
00:02:34,990 --> 00:02:39,696
но это может быть сделано автоматически, прежде чем CSS будет использоваться на вашей веб-странице.

32
00:02:39,696 --> 00:02:44,840
То, что эти языки предварительной обработки приносят нам

33
00:02:44,840 --> 00:02:51,580
больше языка программирования как синтаксис, как мы увидим в следующих нескольких слайдах.

34
00:02:51,580 --> 00:02:53,620
Мы кратко рассмотрим Лес и Сасс.

35
00:02:54,990 --> 00:03:00,890
В частности, причина для нас взглянуть на это заключается в том, что Bootstrap сам

36
00:03:00,890 --> 00:03:08,540
использует Sass для определения своего источника для своих классов CSS.

37
00:03:08,540 --> 00:03:12,980
И поэтому, если вы перейдете к настройке Bootstrap,

38
00:03:12,980 --> 00:03:16,230
вам придется работать с кодом Sass.

39
00:03:16,230 --> 00:03:21,402
Bootstrap 3, который был предыдущей версией Bootstrap, использовал Less,

40
00:03:21,402 --> 00:03:26,260
и, следовательно, я подумал, что было бы уместно охватить как Less, так и

41
00:03:26,260 --> 00:03:32,330
Sass, потому что они

42
00:03:32,330 --> 00:03:39,960
в значительной степени похожи друг на друга с точки зрения их возможностей и способа определения синтаксиса.

43
00:03:39,960 --> 00:03:45,630
Типичные функции, которые CSS препроцессоры приносят, это поддержка

44
00:03:45,630 --> 00:03:53,340
переменных, селекторов вложенности, выражений, функций и микшинов.

45
00:03:53,340 --> 00:03:59,580
Итак, мы рассмотрим некоторые из них с некоторыми примерами в следующих нескольких слайдах.

46
00:03:59,580 --> 00:04:02,270
Первое, что мы рассмотрим, это переменные.

47
00:04:02,270 --> 00:04:05,310
Теперь во многих классах CSS, которые вы

48
00:04:05,310 --> 00:04:11,540
определяете, вы можете иметь некоторое повторное использование определенных количеств.

49
00:04:11,540 --> 00:04:16,600
Возможно, было бы более полезно, если вы определите некоторые переменные, которые

50
00:04:16,600 --> 00:04:21,590
содержат эти количества, и используете эти переменные при определении классов CSS.

51
00:04:21,590 --> 00:04:24,240
Вот где переменные приходят вам на помощь.

52
00:04:24,240 --> 00:04:29,720
Здесь мы рассмотрим как Less, так и Scss код.

53
00:04:29,720 --> 00:04:34,090
Scss - это версия Sass,

54
00:04:34,090 --> 00:04:40,670
более популярная версия синтаксиса Sass, поэтому я концентрируюсь на Scss здесь.

55
00:04:40,670 --> 00:04:43,420
Таким образом, если вы определяете переменные в Less,

56
00:04:43,420 --> 00:04:47,610
вы продолжите имя переменной со знаком @.

57
00:04:47,610 --> 00:04:55,720
В случае Scss вы будете использовать знак доллара перед именем переменной.

58
00:04:55,720 --> 00:04:57,340
И как только вы определяете эти переменные,

59
00:04:57,340 --> 00:05:01,750
вы можете использовать эти переменные, когда вы определяете классы.

60
00:05:01,750 --> 00:05:06,700
Как вы видите в примере, где мы определяем navbar-обратную в качестве фона,

61
00:05:06,700 --> 00:05:11,410
или высоту элемента каруселя в качестве переменных.

62
00:05:11,410 --> 00:05:16,350
Теперь преимущество определения переменных в начале вашего класса CSS

63
00:05:16,350 --> 00:05:21,400
заключается в том, что есть одна точка, где вы можете обновить значение, и

64
00:05:21,400 --> 00:05:27,390
он автоматически обновит все классы CSS, которые используют эту переменную.

65
00:05:27,390 --> 00:05:31,080
Как правило, мы используем переменные в языках программирования.

66
00:05:32,110 --> 00:05:38,340
Переменные в языках препроцессора CSS также могут иметь свою собственную область действия.

67
00:05:39,650 --> 00:05:44,510
Очень часто, когда вы определяете классы CSS, особенно когда вам

68
00:05:44,510 --> 00:05:49,760
нужно определить классы, которые вложены внутри других классов

69
00:05:49,760 --> 00:05:53,330
, то довольно скоро ваш код CSS становится очень громоздким.

70
00:05:53,330 --> 00:05:58,370
Таким образом, именно здесь вложенность поддерживается вашими препроцессорами CSS.

71
00:05:58,370 --> 00:06:02,380
Как вы можете видеть, вы можете определить, например, класс карусели,

72
00:06:02,380 --> 00:06:05,876
а внутри класса карусели вы можете определить класс элемента карусели.

73
00:06:05,876 --> 00:06:11,900
И аналогичным образом, подкласс изображения внутри класса элемента карусели.

74
00:06:11,900 --> 00:06:18,161
Таким образом, здесь вы можете видеть, что каждый из них вложен внутри предыдущего класса.

75
00:06:19,440 --> 00:06:25,410
С переменными вы можете удерживать одно значение за раз в переменной.

76
00:06:25,410 --> 00:06:30,730
Предположим, у вас есть группа переменных, которые суммируются вместе

77
00:06:30,730 --> 00:06:37,275
объявить набор объявлений CSS, то есть где мы используем mixins.

78
00:06:37,275 --> 00:06:42,910
В Less вы определяете mixin, давая ему имя,

79
00:06:42,910 --> 00:06:47,650
и в Sass вы просто предшествуете этому с @mixin

80
00:06:47,650 --> 00:06:52,530
перед именем объявления mixin.

81
00:06:52,530 --> 00:06:58,560
И внутри mixin вы можете определить кучу объявлений CSS

82
00:06:58,560 --> 00:07:03,620
, которые затем могут быть повторно использованы для различных классов CSS.

83
00:07:03,620 --> 00:07:08,110
Как вы видите в этом примере, мы определяем нулевое поле

84
00:07:08,110 --> 00:07:12,480
как mixin, как в Less, так и в Sass.

85
00:07:12,480 --> 00:07:18,120
Обратите внимание на незначительные изменения в синтаксисе в каждом из этих случаев.

86
00:07:18,120 --> 00:07:25,250
И затем вы можете использовать этот mixin при определении дополнительных классов CSS.

87
00:07:25,250 --> 00:07:30,620
Таким образом, здесь вы можете видеть, что для заголовка строки мы определяем нулевое поле как

88
00:07:30,620 --> 00:07:35,480
mixin в заголовке строки, что означает, что все

89
00:07:35,480 --> 00:07:40,780
эти свойства от нулевого поля будут унаследованы этим классом заголовка строки.

90
00:07:40,780 --> 00:07:47,320
Mixins сами могут принимать дополнительные параметры, если вы хотите их определить.

91
00:07:47,320 --> 00:07:49,970
Поэтому в этом случае я определяю

92
00:07:49,970 --> 00:07:54,680
вариацию миксина нулевого поля, который мы видели на предыдущем слайде.

93
00:07:54,680 --> 00:07:59,935
Здесь, это нулевое поле mixin принимает два параметра,

94
00:07:59,935 --> 00:08:03,011
pad вверх и pad влево вправо.

95
00:08:03,011 --> 00:08:08,840
И с Less вы даже можете указать значение по умолчанию для него,

96
00:08:08,840 --> 00:08:15,276
но с Scss вам нужно явно указать значения.

97
00:08:15,276 --> 00:08:20,871
Итак, здесь мы определяем два разных свойства CSS, маржа и

98
00:08:20,871 --> 00:08:27,880
заполнение, а затем само заполнение использует параметры для нашего mixin там.

99
00:08:27,880 --> 00:08:32,300
Таким образом, в этом случае вы можете использовать эти mixins, как вы видите в

100
00:08:32,300 --> 00:08:36,997
двух классах CSS, определенных под заголовком строки и

101
00:08:36,997 --> 00:08:41,810
содержимым строки, указав их значения параметров,

102
00:08:41,810 --> 00:08:46,270
когда вы включаете этот mixin в свой кластер CSS.

103
00:08:47,470 --> 00:08:52,570
Мало того, вы даже можете выполнять математические операции с предопределенными

104
00:08:52,570 --> 00:08:58,120
переменными, когда вы используете их внутри своих классов CSS.

105
00:08:58,120 --> 00:09:03,470
Итак, здесь вы можете видеть, что я определил два разных элемента карусели

106
00:09:03,470 --> 00:09:05,740
с двумя разными размерами, и поэтому

107
00:09:05,740 --> 00:09:10,060
вы можете видеть, что высота каждого из них определяется по-разному.

108
00:09:10,060 --> 00:09:15,105
В одном случае я использую предопределенную высоту, в другом случае я

109
00:09:15,105 --> 00:09:20,244
умножаю эту высоту, а затем использую ее для определения

110
00:09:20,244 --> 00:09:25,230
свойства высоты внутри моего элемента карусели для класса item-large.

111
00:09:25,230 --> 00:09:28,778
Таким образом, такой вид математических операций над

112
00:09:28,778 --> 00:09:33,710
переменными также допускается в языках препроцессора CSS.

113
00:09:35,060 --> 00:09:40,160
Другие функции, которые CSS препроцессоры

114
00:09:40,160 --> 00:09:47,365
включают функции, которые позволяют определить математические функции, Меньше строк.

115
00:09:47,365 --> 00:09:53,015
Вы также можете выполнять цветовые операции и операции смешивания цветов с помощью этих функций

116
00:09:53,015 --> 00:09:57,915
и использовать их при определении классов CSS.

117
00:09:57,915 --> 00:10:01,345
Это немного продвинуто, поэтому я не буду вдаваться в слишком много деталей.

118
00:10:03,470 --> 00:10:11,552
Кроме того, вы можете ввести предопределенные классы препроцессора CSS в другие классы.

119
00:10:11,552 --> 00:10:16,680
Например, если у вас есть класс Less, как определено, и

120
00:10:16,680 --> 00:10:20,100
вы можете ввести этот файл в другой файл Less.

121
00:10:20,100 --> 00:10:23,347
Аналогично, если вы определили файлы Scss,

122
00:10:23,347 --> 00:10:29,210
вы можете импортировать их в другие файлы Scss с помощью операции импорта.

123
00:10:29,210 --> 00:10:32,670
Синтаксис одинаков как для Less, так и для Sass.

124
00:10:33,890 --> 00:10:40,180
Теперь, когда мы увидели некоторые особенности языков препроцессора CSS, давайте

125
00:10:40,180 --> 00:10:45,520
теперь рассмотрим, как мы можем использовать их, выполнив пару упражнений.

126
00:10:45,520 --> 00:10:49,900
Во-первых, мы сделаем упражнение, основанное на Less.

127
00:10:49,900 --> 00:10:53,677
Тогда мы проследим за этим упражнением, основанным на Сассе.

128
00:10:53,677 --> 00:10:57,099
[ МУЗЫКА]