1 00:00:03,250 --> 00:00:06,680 Теперь мы перейдем к следующему упражнению, 2 00:00:06,680 --> 00:00:11,535 где мы будем использовать синтаксис SCSS, чтобы определить 3 00:00:11,535 --> 00:00:18,325 наши классы SCSS и автоматически преобразовать их в соответствующие классы CSS. 4 00:00:18,325 --> 00:00:22,220 Мы будем делать точно тот же набор шагов, 5 00:00:22,220 --> 00:00:26,890 что и для последнего упражнения, которое мы выполнили только сейчас, 6 00:00:26,890 --> 00:00:31,470 но с использованием синтаксиса SCSS. 7 00:00:31,470 --> 00:00:38,885 Чтобы начать работу, в вашем проекте в папке CSS, 8 00:00:38,885 --> 00:00:47,180 давайте создадим новый файл и назовем его как стиль start SCSS. 9 00:00:47,180 --> 00:00:51,660 Теперь в этом файле мы определим наши классы SCSS, а затем автоматически 10 00:00:51,660 --> 00:00:56,795 преобразовать это в наши классы CSS. 11 00:00:56,795 --> 00:01:01,350 Итак, давайте начнем сначала с определения переменных, 12 00:01:01,350 --> 00:01:05,110 поэтому я начну с светло-серого, 13 00:01:06,810 --> 00:01:11,820 я теперь добавил еще несколько переменных здесь с 14 00:01:11,820 --> 00:01:16,940 теми же именами, что и мы использовали в последнем упражнении ранее, 15 00:01:16,940 --> 00:01:20,760 но с синтаксисом SCSS, поэтому 16 00:01:20,760 --> 00:01:25,630 все переменные предшествуют знак доллара, чтобы определить их как переменные. 17 00:01:25,630 --> 00:01:27,750 Далее определим mixin. 18 00:01:27,750 --> 00:01:43,888 Поэтому для mixin я бы сказал, что mixin нулевой маржи, pad-up-down, 19 00:01:43,888 --> 00:01:48,920 pad-lev-raw, 20 00:01:48,920 --> 00:01:54,920 и мы определяем значения, как и прежде. 21 00:02:17,930 --> 00:02:21,130 Теперь, когда мы завершили определение mixin, 22 00:02:21,130 --> 00:02:26,690 мы можем использовать его в наших классах SCSS, которые мы определяем позже. 23 00:02:27,480 --> 00:02:31,280 Давайте теперь определим некоторые классы SCSS, 24 00:02:31,280 --> 00:02:40,025 поэтому я определяю заголовок строки, который я буду использовать 25 00:02:40,025 --> 00:02:44,740 нулевой маржи mixin 26 00:02:44,740 --> 00:02:52,900 со значениями нулевого пикселя здесь. 27 00:02:53,620 --> 00:02:59,055 Мы продолжим определять еще несколько классов, которые они добавят здесь, 28 00:02:59,055 --> 00:03:01,910 так что вы можете видеть, что я определил вместе с 29 00:03:01,910 --> 00:03:05,290 заголовком строки и содержимым строки, где я использовал 30 00:03:05,290 --> 00:03:12,730 mixins и нижний колонтитул и адрес Jumbotron и так далее, 31 00:03:12,730 --> 00:03:15,230 и вы можете увидеть использование 32 00:03:15,230 --> 00:03:21,190 переменных, которые у нас есть определенные ранее в этом примере. 33 00:03:21,190 --> 00:03:27,875 Код, очевидно, доступен в инструкциях по упражнению, которые следуют этому видео. 34 00:03:27,875 --> 00:03:32,295 Далее мы добавим, если вы вложенные классы. 35 00:03:32,295 --> 00:03:35,395 Так же, как мы делали в последнем упражнении, 36 00:03:35,395 --> 00:03:40,780 мы добавим в класс карусели с фоном, установленным в темный фон, а затем 37 00:03:40,780 --> 00:03:42,345 внутри, где мы вложим 38 00:03:42,345 --> 00:03:47,065 класс элемента карусели с высотой, установленной на высоту элемента карусели, 39 00:03:47,065 --> 00:03:51,945 а затем еще одно изображение цвета внутреннего класса с некоторыми свойствами там, 40 00:03:51,945 --> 00:03:56,945 а затем класс кнопки карусели, как мы определили ранее. 41 00:03:56,945 --> 00:04:02,070 Таким образом, мы внесли изменения в наши классы SCSS, 42 00:04:02,070 --> 00:04:03,925 поэтому давайте сохраним изменения. 43 00:04:03,925 --> 00:04:09,200 Теперь нам нужно преобразовать это в соответствующий CSS-файл. 44 00:04:09,200 --> 00:04:13,835 Чтобы преобразовать наш исходный код SCSS в соответствующий код CSS, 45 00:04:13,835 --> 00:04:19,395 мы собираемся принять помощь еще один модуль узла под названием node-sass. 46 00:04:19,395 --> 00:04:24,485 Позволяет установить модуль узла, набрав npm 47 00:04:24,485 --> 00:04:33,845 install save dev—save dev, а затем node-sass. 48 00:04:33,845 --> 00:04:37,690 Таким образом, мы сохраним этот пакет node-sass 49 00:04:37,690 --> 00:04:42,020 как зависимость разработки в нашем файле package.json. 50 00:04:42,020 --> 00:04:44,160 Как только установка будет завершена, 51 00:04:44,160 --> 00:04:49,090 мы собираемся добавить скрипт в наш файл package.json. 52 00:04:49,090 --> 00:04:52,020 Переходя к нашему файлу package.json, 53 00:04:52,020 --> 00:04:56,430 если вы прокрутите вверх, вы увидите, что в зависимостях dev 54 00:04:56,430 --> 00:05:00,380 теперь узел sass также добавляется в зависимости dev. 55 00:05:00,380 --> 00:05:04,520 Теперь мы добавим скрипт в наш package.jsm файл, 56 00:05:04,520 --> 00:05:07,015 так что правая половина этого слайда, 57 00:05:07,015 --> 00:05:11,225 я собираюсь добавить в скрипт с именем SCSS, а затем 58 00:05:11,225 --> 00:05:20,185 этот скрипт будет node-sass -o CSS/, 59 00:05:20,185 --> 00:05:26,500 что означает, что вывод этого преобразованные файлы будут в папке CSS, 60 00:05:26,500 --> 00:05:29,715 а источник здесь также будет в папка CSS. 61 00:05:29,715 --> 00:05:34,950 Таким образом, все файлы с расширением.scs будут 62 00:05:34,950 --> 00:05:41,960 преобразованы и файлы corresponding.CSS будут сгенерированы этим узлом sass.module. 63 00:05:42,270 --> 00:05:47,450 Давайте сохраним изменения, а затем мы перейдем 64 00:05:47,450 --> 00:05:54,310 в командную строку, а затем введите npm запустить SCSS, и это позаботится о нашем преобразовании. 65 00:05:54,310 --> 00:05:56,500 Переходя в командную строку, 66 00:05:56,500 --> 00:06:02,005 мы напечатаем npm запустить SCSS, и это должно 67 00:06:02,005 --> 00:06:09,795 автоматически конвертировать все наши SCSS файлы в соответствующие файлы CSS. 68 00:06:09,795 --> 00:06:11,905 Перейдя в наш редактор, 69 00:06:11,905 --> 00:06:16,525 вы теперь видите, что есть файлы styles.css, которые были сгенерированы. 70 00:06:16,525 --> 00:06:18,530 Глядя на содержимое этого файла, 71 00:06:18,530 --> 00:06:25,000 вы увидите, что этот код CSS, который был сгенерирован из нашего SCSS-кода, почти такой 72 00:06:25,000 --> 00:06:32,050 же, как исходный код CSS, который мы написали сами. 73 00:06:32,050 --> 00:06:35,875 С этим мы завершаем это упражнение. 74 00:06:35,875 --> 00:06:40,220 В этом упражнении мы увидели, как мы можем написать 75 00:06:40,220 --> 00:06:48,195 SCSS-код, а затем автоматически преобразовать его в их соответствующий код CSS. 76 00:06:48,195 --> 00:06:53,115 Причина, по которой мы рассматриваем это подробно, заключается в том, что 77 00:06:53,115 --> 00:06:59,190 Bootstrap предоставляет свои исходные файлы в формате SCSS. 78 00:06:59,190 --> 00:07:02,370 Если вы посетите страницу Bootstrap, 79 00:07:02,370 --> 00:07:11,795 вы заметите, что она говорит, что Bootstrap разработан с использованием препроцессора Sass. 80 00:07:11,795 --> 00:07:19,745 Итак, если вы посмотрите, как это преобразуется из Sass 81 00:07:19,745 --> 00:07:23,475 и как вы можете сделать свою собственную настройку 82 00:07:23,475 --> 00:07:28,115 с помощью кода Bootstrap Sass, вы можете войти в документацию, 83 00:07:28,115 --> 00:07:32,025 а затем вы увидите в разделе 84 00:07:32,025 --> 00:07:37,610 «Параметры», у вас будут некоторые параметры настройки, определяемые здесь. 85 00:07:39,630 --> 00:07:43,800 Различные параметры настройки вы можете видеть, что 86 00:07:43,800 --> 00:07:49,780 все эти переменные определены с помощью синтаксиса Sass здесь, 87 00:07:49,780 --> 00:07:53,460 а также в разделе «Инструменты сборки», 88 00:07:53,460 --> 00:08:00,455 он объяснит вам, как вы можете сделать свою собственную настройку Bootstrap. 89 00:08:00,455 --> 00:08:05,330 Теперь я настоятельно рекомендую вам не попробовать это, пока у вас не будет 90 00:08:05,330 --> 00:08:10,515 достаточного опыта использования Bootstrap в вашей повседневной жизни. 91 00:08:10,515 --> 00:08:12,784 Это завершает наше упражнение. 92 00:08:12,784 --> 00:08:21,250 Это может быть хорошее время для вас, чтобы сделать хорошую фиксацию с сообщением упражнения SCSS.