Теперь мы перейдем к следующему упражнению,
где мы будем использовать синтаксис SCSS, чтобы определить
наши классы SCSS и автоматически преобразовать их в соответствующие классы CSS.
Мы будем делать точно тот же набор шагов,
что и для последнего упражнения, которое мы выполнили только сейчас,
но с использованием синтаксиса SCSS.
Чтобы начать работу, в вашем проекте в папке CSS,
давайте создадим новый файл и назовем его как стиль start SCSS.
Теперь в этом файле мы определим наши классы SCSS, а затем автоматически
преобразовать это в наши классы CSS.
Итак, давайте начнем сначала с определения переменных,
поэтому я начну с светло-серого,
я теперь добавил еще несколько переменных здесь с
теми же именами, что и мы использовали в последнем упражнении ранее,
но с синтаксисом SCSS, поэтому
все переменные предшествуют знак доллара, чтобы определить их как переменные.
Далее определим mixin.
Поэтому для mixin я бы сказал, что mixin нулевой маржи, pad-up-down,
pad-lev-raw,
и мы определяем значения, как и прежде.
Теперь, когда мы завершили определение mixin,
мы можем использовать его в наших классах SCSS, которые мы определяем позже.
Давайте теперь определим некоторые классы SCSS,
поэтому я определяю заголовок строки, который я буду использовать
нулевой маржи mixin
со значениями нулевого пикселя здесь.
Мы продолжим определять еще несколько классов, которые они добавят здесь,
так что вы можете видеть, что я определил вместе с
заголовком строки и содержимым строки, где я использовал
mixins и нижний колонтитул и адрес Jumbotron и так далее,
и вы можете увидеть использование
переменных, которые у нас есть определенные ранее в этом примере.
Код, очевидно, доступен в инструкциях по упражнению, которые следуют этому видео.
Далее мы добавим, если вы вложенные классы.
Так же, как мы делали в последнем упражнении,
мы добавим в класс карусели с фоном, установленным в темный фон, а затем
внутри, где мы вложим
класс элемента карусели с высотой, установленной на высоту элемента карусели,
а затем еще одно изображение цвета внутреннего класса с некоторыми свойствами там,
а затем класс кнопки карусели, как мы определили ранее.
Таким образом, мы внесли изменения в наши классы SCSS,
поэтому давайте сохраним изменения.
Теперь нам нужно преобразовать это в соответствующий CSS-файл.
Чтобы преобразовать наш исходный код SCSS в соответствующий код CSS,
мы собираемся принять помощь еще один модуль узла под названием node-sass.
Позволяет установить модуль узла, набрав npm
install save dev—save dev, а затем node-sass.
Таким образом, мы сохраним этот пакет node-sass
как зависимость разработки в нашем файле package.json.
Как только установка будет завершена,
мы собираемся добавить скрипт в наш файл package.json.
Переходя к нашему файлу package.json,
если вы прокрутите вверх, вы увидите, что в зависимостях dev
теперь узел sass также добавляется в зависимости dev.
Теперь мы добавим скрипт в наш package.jsm файл,
так что правая половина этого слайда,
я собираюсь добавить в скрипт с именем SCSS, а затем
этот скрипт будет node-sass -o CSS/,
что означает, что вывод этого преобразованные файлы будут в папке CSS,
а источник здесь также будет в папка CSS.
Таким образом, все файлы с расширением.scs будут
преобразованы и файлы corresponding.CSS будут сгенерированы этим узлом sass.module.
Давайте сохраним изменения, а затем мы перейдем
в командную строку, а затем введите npm запустить SCSS, и это позаботится о нашем преобразовании.
Переходя в командную строку,
мы напечатаем npm запустить SCSS, и это должно
автоматически конвертировать все наши SCSS файлы в соответствующие файлы CSS.
Перейдя в наш редактор,
вы теперь видите, что есть файлы styles.css, которые были сгенерированы.
Глядя на содержимое этого файла,
вы увидите, что этот код CSS, который был сгенерирован из нашего SCSS-кода, почти такой
же, как исходный код CSS, который мы написали сами.
С этим мы завершаем это упражнение.
В этом упражнении мы увидели, как мы можем написать
SCSS-код, а затем автоматически преобразовать его в их соответствующий код CSS.
Причина, по которой мы рассматриваем это подробно, заключается в том, что
Bootstrap предоставляет свои исходные файлы в формате SCSS.
Если вы посетите страницу Bootstrap,
вы заметите, что она говорит, что Bootstrap разработан с использованием препроцессора Sass.
Итак, если вы посмотрите, как это преобразуется из Sass
и как вы можете сделать свою собственную настройку
с помощью кода Bootstrap Sass, вы можете войти в документацию,
а затем вы увидите в разделе
«Параметры», у вас будут некоторые параметры настройки, определяемые здесь.
Различные параметры настройки вы можете видеть, что
все эти переменные определены с помощью синтаксиса Sass здесь,
а также в разделе «Инструменты сборки»,
он объяснит вам, как вы можете сделать свою собственную настройку Bootstrap.
Теперь я настоятельно рекомендую вам не попробовать это, пока у вас не будет
достаточного опыта использования Bootstrap в вашей повседневной жизни.
Это завершает наше упражнение.
Это может быть хорошее время для вас, чтобы сделать хорошую фиксацию с сообщением упражнения SCSS.