1
00:00:03,290 --> 00:00:09,780
Пришло время перейти к следующему упражнению, называемому Упражнение: Меньше.

2
00:00:09,780 --> 00:00:12,860
То, что вы хотите, чтобы ваш врач

3
00:00:12,860 --> 00:00:16,380
скажет вам, когда вы посетите его или ее в следующий раз.

4
00:00:16,380 --> 00:00:25,515
Тем не менее, давайте рассмотрим менее подробно теперь, чтобы понять, как мы можем определить

5
00:00:25,515 --> 00:00:31,830
классы CSS, используя меньший синтаксис препроцессора, а затем

6
00:00:31,830 --> 00:00:38,725
автоматически генерировать соответствующие классы CSS из наших меньших классов.

7
00:00:38,725 --> 00:00:42,630
Чтобы начать работу, давайте перейдем к

8
00:00:42,630 --> 00:00:51,865
нашему проекту в текстовом редакторе, а затем внутри папки CSS,

9
00:00:51,865 --> 00:00:58,750
я собираюсь переименовать этот файл styles.css как styles-old.css.

10
00:00:58,750 --> 00:01:03,870
Я собираюсь сохранить свою текущую версию

11
00:01:03,870 --> 00:01:08,685
файла styles.css, потому что теперь они будут писать меньше кода

12
00:01:08,685 --> 00:01:13,200
и кода SCSS, а затем автоматически генерировать

13
00:01:13,200 --> 00:01:19,165
файл styles.css, компилируя эти языки препроцессора CSS.

14
00:01:19,165 --> 00:01:23,300
После этого, затем в моей папке CSS

15
00:01:23,300 --> 00:01:31,280
мы создадим новый файл с именем styles.less.

16
00:01:32,070 --> 00:01:37,290
И внутри здесь я определяю свой меньший код.

17
00:01:37,290 --> 00:01:41,800
Давайте сначала определим несколько меньших переменных.

18
00:01:41,800 --> 00:01:52,420
Скажу, lt-gray: ddd и так далее.

19
00:01:52,420 --> 00:01:57,980
Вы можете видеть, что я добавил еще несколько меньших переменных здесь.

20
00:01:57,980 --> 00:02:02,310
Итак, я определил фон темный, чтобы быть первым значением,

21
00:02:02,310 --> 00:02:05,850
фоновым светом и бледным фоном, а также

22
00:02:05,850 --> 00:02:11,235
еще одной переменной, называемой карусельной высотой элемента как 300 пикселей.

23
00:02:11,235 --> 00:02:17,305
Я собираюсь использовать эти переменные, когда я определяю свои классы CSS позже.

24
00:02:17,305 --> 00:02:22,995
Позвольте мне теперь добавить Mixin для

25
00:02:22,995 --> 00:02:31,130
моего меньшего файла, называемого нулевым полем, и я определяю pad-up-dn

26
00:02:41,320 --> 00:02:48,760
и pad-left-right,

27
00:02:48,760 --> 00:02:55,725
0px является значением по умолчанию, а затем здесь

28
00:02:55,725 --> 00:03:01,620
я устанавливаю margin: 0px auto,

29
00:03:01,620 --> 00:03:11,520
padding: pat-up-dn

30
00:03:11,520 --> 00:03:14,460
и pad-left-right.

31
00:03:14,460 --> 00:03:20,180
Таким образом, я определил Mixin, который я собираюсь

32
00:03:20,180 --> 00:03:25,785
использовать в своих классах CSS, которые мы определим позже.

33
00:03:25,785 --> 00:03:31,265
И это несет в себе два параметра pad-up-dn и pad-leво-right.

34
00:03:31,265 --> 00:03:39,740
Затем я добавлю еще несколько классов CSS, поэтому я начинаю с

35
00:03:39,740 --> 00:03:50,435
заголовка строки и определяю это как нулевое поле.

36
00:03:50,435 --> 00:03:57,560
Позвольте мне добавить еще несколько классов CSS, а затем вернуться, чтобы взглянуть на них.

37
00:03:57,560 --> 00:04:01,170
Здесь я определил еще один класс CSS,

38
00:04:01,170 --> 00:04:06,480
используя нулевой маржи Mixin с параметрами 50 пикселей и 0 пикселей,

39
00:04:06,480 --> 00:04:10,790
нижний колонтитул, где я определяю цвет фона, используя

40
00:04:10,790 --> 00:04:15,660
переменную, которая ранее определяла как

41
00:04:15,660 --> 00:04:19,940
background-бледный, а затем jumbotron с

42
00:04:19,940 --> 00:04:25,885
нулевым полем Mixin и цвет фона, определенный как фоновый свет,

43
00:04:25,885 --> 00:04:30,200
и некоторые из этих других, которые являются стандартными классами CSS,

44
00:04:30,200 --> 00:04:34,610
которые я включил туда, потому что я собираюсь использовать их на

45
00:04:34,610 --> 00:04:38,010
своей веб-странице, а затем у вас есть

46
00:04:38,010 --> 00:04:42,850
navbar-dark, для которого цвет фона я определил нас background-dark.

47
00:04:42,850 --> 00:04:46,980
И tab-content, для которого снова вы видите меня

48
00:04:46,980 --> 00:04:51,820
, используя переменную светло-серый для цвета границы здесь.

49
00:04:51,820 --> 00:04:58,700
Затем я добавляю здесь класс карусели, для которого я определяю

50
00:04:58,700 --> 00:05:06,010
фон как фон темный здесь, а затем,

51
00:05:06,010 --> 00:05:10,540
я определяю этот карусель-элемент.

52
00:05:10,540 --> 00:05:18,225
Обратите внимание, как я определяю, что как вложенный элемент внутри моей карусели и для карусельного элемента,

53
00:05:18,225 --> 00:05:24,225
я определяю высоту как карусель-элемент высоты здесь,

54
00:05:24,225 --> 00:05:28,965
которая является переменной, которую я определил ранее и внутри,

55
00:05:28,965 --> 00:05:31,005
я определяю изображение,

56
00:05:31,005 --> 00:05:36,635
которое снова является еще одним вложенным элементом внутри карусельного элемента и то для изображения

57
00:05:36,635 --> 00:05:40,010
я определяю некоторые свойства CSS.

58
00:05:40,010 --> 00:05:42,650
Как вы можете видеть,

59
00:05:42,650 --> 00:05:46,200
я определил некоторые свойства для изображения.

60
00:05:46,200 --> 00:05:50,950
Здесь вы видите использование вложенных классов здесь,

61
00:05:50,950 --> 00:05:55,305
поэтому у вас есть карусель и внутри, что у меня есть элемент карусели и внутри этого,

62
00:05:55,305 --> 00:05:57,145
изображение, определенное здесь.

63
00:05:57,145 --> 00:05:58,945
Наконец, внизу

64
00:05:58,945 --> 00:06:02,075
я добавляю в класс CarouselButton,

65
00:06:02,075 --> 00:06:07,605
который используется для указания CarouselButton.

66
00:06:07,605 --> 00:06:14,935
С этими изменениями в моем файле styles.less, добавляемом во все меньшие классы здесь,

67
00:06:14,935 --> 00:06:16,465
позвольте мне сохранить изменения.

68
00:06:16,465 --> 00:06:23,230
Теперь я хочу иметь возможность автоматически конвертировать это в соответствующий CSS-файл.

69
00:06:23,230 --> 00:06:28,875
Чтобы автоматически преобразовать мой меньший файл в соответствующий файл CSS,

70
00:06:28,875 --> 00:06:32,660
я собираюсь использовать модуль узла, называемый как меньше.

71
00:06:32,660 --> 00:06:35,015
Чтобы установить это в командной строке,

72
00:06:35,015 --> 00:06:41,085
я набираю sudo npm install минус g меньше.

73
00:06:41,085 --> 00:06:47,150
Я устанавливаю это как глобальный модуль узла.

74
00:06:47,150 --> 00:06:54,555
И как только это будет установлено,

75
00:06:54,555 --> 00:07:01,985
он сделает доступным менее компилятор, называемый как lessc в командной строке.

76
00:07:01,985 --> 00:07:04,570
Если вы запускаете это на компьютере с Windows,

77
00:07:04,570 --> 00:07:06,130
вам не нужно делать sudo,

78
00:07:06,130 --> 00:07:09,900
как вы, вероятно, уже помните.

79
00:07:09,900 --> 00:07:14,565
Теперь, когда мы установили компилятор lessc,

80
00:07:14,565 --> 00:07:21,010
я собираюсь скомпилировать мой меньший код в соответствующий код CSS.

81
00:07:21,010 --> 00:07:26,290
Для этого позвольте мне перейти в папку CSS, а затем здесь

82
00:07:26,290 --> 00:07:29,650
вы увидите, что у вас есть файл styles.less.

83
00:07:29,650 --> 00:07:38,909
В командной строке введите lessc styles.less styles.css,

84
00:07:38,909 --> 00:07:43,010
и как только это завершит компиляцию,

85
00:07:43,010 --> 00:07:45,580
у вас будет соответствующий файл CSS.

86
00:07:45,580 --> 00:07:47,580
Таким образом, как вы видите сейчас,

87
00:07:47,580 --> 00:07:53,565
у вас меньше кода преобразуется в соответствующий код CSS.

88
00:07:53,565 --> 00:07:59,310
Взглянув на сгенерированный код CSS из меньшего кода,

89
00:07:59,310 --> 00:08:02,910
вы увидите, что этот код выглядит почти так

90
00:08:02,910 --> 00:08:08,075
же, как и то, что мы определили в нашем исходном файле CSS.

91
00:08:08,075 --> 00:08:11,270
С этим мы завершаем это упражнение.

92
00:08:11,270 --> 00:08:15,515
В этом упражнении мы научились писать

93
00:08:15,515 --> 00:08:21,525
меньше кода, а затем автоматически преобразовать его в соответствующий код CSS.

94
00:08:21,525 --> 00:08:26,155
На этом этапе вы можете сохранить изменения в

95
00:08:26,155 --> 00:08:32,410
вашем репозитории Git с сообщением Упражнение: Less.