Пришло время перейти к следующему упражнению, называемому Упражнение: Меньше.
То, что вы хотите, чтобы ваш врач
скажет вам, когда вы посетите его или ее в следующий раз.
Тем не менее, давайте рассмотрим менее подробно теперь, чтобы понять, как мы можем определить
классы CSS, используя меньший синтаксис препроцессора, а затем
автоматически генерировать соответствующие классы CSS из наших меньших классов.
Чтобы начать работу, давайте перейдем к
нашему проекту в текстовом редакторе, а затем внутри папки CSS,
я собираюсь переименовать этот файл styles.css как styles-old.css.
Я собираюсь сохранить свою текущую версию
файла styles.css, потому что теперь они будут писать меньше кода
и кода SCSS, а затем автоматически генерировать
файл styles.css, компилируя эти языки препроцессора CSS.
После этого, затем в моей папке CSS
мы создадим новый файл с именем styles.less.
И внутри здесь я определяю свой меньший код.
Давайте сначала определим несколько меньших переменных.
Скажу, lt-gray: ddd и так далее.
Вы можете видеть, что я добавил еще несколько меньших переменных здесь.
Итак, я определил фон темный, чтобы быть первым значением,
фоновым светом и бледным фоном, а также
еще одной переменной, называемой карусельной высотой элемента как 300 пикселей.
Я собираюсь использовать эти переменные, когда я определяю свои классы CSS позже.
Позвольте мне теперь добавить Mixin для
моего меньшего файла, называемого нулевым полем, и я определяю pad-up-dn
и pad-left-right,
0px является значением по умолчанию, а затем здесь
я устанавливаю margin: 0px auto,
padding: pat-up-dn
и pad-left-right.
Таким образом, я определил Mixin, который я собираюсь
использовать в своих классах CSS, которые мы определим позже.
И это несет в себе два параметра pad-up-dn и pad-leво-right.
Затем я добавлю еще несколько классов CSS, поэтому я начинаю с
заголовка строки и определяю это как нулевое поле.
Позвольте мне добавить еще несколько классов CSS, а затем вернуться, чтобы взглянуть на них.
Здесь я определил еще один класс CSS,
используя нулевой маржи Mixin с параметрами 50 пикселей и 0 пикселей,
нижний колонтитул, где я определяю цвет фона, используя
переменную, которая ранее определяла как
background-бледный, а затем jumbotron с
нулевым полем Mixin и цвет фона, определенный как фоновый свет,
и некоторые из этих других, которые являются стандартными классами CSS,
которые я включил туда, потому что я собираюсь использовать их на
своей веб-странице, а затем у вас есть
navbar-dark, для которого цвет фона я определил нас background-dark.
И tab-content, для которого снова вы видите меня
, используя переменную светло-серый для цвета границы здесь.
Затем я добавляю здесь класс карусели, для которого я определяю
фон как фон темный здесь, а затем,
я определяю этот карусель-элемент.
Обратите внимание, как я определяю, что как вложенный элемент внутри моей карусели и для карусельного элемента,
я определяю высоту как карусель-элемент высоты здесь,
которая является переменной, которую я определил ранее и внутри,
я определяю изображение,
которое снова является еще одним вложенным элементом внутри карусельного элемента и то для изображения
я определяю некоторые свойства CSS.
Как вы можете видеть,
я определил некоторые свойства для изображения.
Здесь вы видите использование вложенных классов здесь,
поэтому у вас есть карусель и внутри, что у меня есть элемент карусели и внутри этого,
изображение, определенное здесь.
Наконец, внизу
я добавляю в класс CarouselButton,
который используется для указания CarouselButton.
С этими изменениями в моем файле styles.less, добавляемом во все меньшие классы здесь,
позвольте мне сохранить изменения.
Теперь я хочу иметь возможность автоматически конвертировать это в соответствующий CSS-файл.
Чтобы автоматически преобразовать мой меньший файл в соответствующий файл CSS,
я собираюсь использовать модуль узла, называемый как меньше.
Чтобы установить это в командной строке,
я набираю sudo npm install минус g меньше.
Я устанавливаю это как глобальный модуль узла.
И как только это будет установлено,
он сделает доступным менее компилятор, называемый как lessc в командной строке.
Если вы запускаете это на компьютере с Windows,
вам не нужно делать sudo,
как вы, вероятно, уже помните.
Теперь, когда мы установили компилятор lessc,
я собираюсь скомпилировать мой меньший код в соответствующий код CSS.
Для этого позвольте мне перейти в папку CSS, а затем здесь
вы увидите, что у вас есть файл styles.less.
В командной строке введите lessc styles.less styles.css,
и как только это завершит компиляцию,
у вас будет соответствующий файл CSS.
Таким образом, как вы видите сейчас,
у вас меньше кода преобразуется в соответствующий код CSS.
Взглянув на сгенерированный код CSS из меньшего кода,
вы увидите, что этот код выглядит почти так
же, как и то, что мы определили в нашем исходном файле CSS.
С этим мы завершаем это упражнение.
В этом упражнении мы научились писать
меньше кода, а затем автоматически преобразовать его в соответствующий код CSS.
На этом этапе вы можете сохранить изменения в
вашем репозитории Git с сообщением Упражнение: Less.