CSS — один из самых полезных инструментов при проектировании и разработке веб-приложений. Хотя CSS является ключевым фактором в современном Интернете, он был создан в 1996 году, а его последняя версия: CSS3 была выпущена более десяти лет назад. Хотя в нем есть много полезных инструментов, синтаксис часто может быть излишне повторяющимся, обыденным и подавляющим. Этим проблемам можно помочь, если не решить их, с помощью CSS препроцессора. CSS препроцессор просто берет код, который вы пишете с другим синтаксисом, и переводит его в ванильный CSS, сводя к минимуму объем кода, который необходимо писать для выполнения простых задач, таких как изменение глобального шрифта или назначение нового цвета. Несмотря на то, что изучение препроцессора звучит великолепно, начать его может быть сложно. Итак, сегодня я собираюсь научить вас основам препроцессора Less CSS.

Установка/настройка

Установить Less несложно; на самом деле установка Less требует всего 2 строки кода. Во-первых, включите следующий элемент ‹script› в свой ‹body› внизу после всего содержимого вашего веб-сайта:

Обязательно поместите элемент ‹script› внизу, так как это крайне важно для правильной работы вашего веб-сайта.

Затем вы должны создать таблицу стилей в корневой папке. Он должен иметь формат .less и может называться как угодно; принято называть основную таблицу стилей «стили», «стиль», «основной» или «таблица стилей».

После создания файла вернитесь к файлу index.html и поместите следующий код в ‹head›:

Если все шаги были выполнены правильно, вы сможете приступить к написанию CSS с помощью препроцессора.

Переменные

Часто при написании CSS вам нужно многократно копировать и вставлять одни и те же значения (шестнадцатеричные коды, имена шрифтов, размеры). Однако выполнение такой задачи не только отнимает много времени, но и очень вероятно, что вы забудете изменить атрибут, что сделает ваш сайт несогласованным. В то время как ванильный CSS имеет встроенные переменные, синтаксис сложен и намного упрощается с помощью Less. Чтобы добавить переменную, вы просто ставите перед значением «@», за которым следует имя переменной. Ниже приведен пример этого:

Миксины

Миксины — одна из самых полезных функций Less. Предположим, у вас есть длинный и сложный набор правил CSS; вы хотели бы применить этот набор правил к нескольким селекторам, но задача была бы слишком неэффективной, и было бы проще управлять всеми в одном пространстве. Миксины можно использовать аналогично переменным, только для больших наборов правил. Синтаксис примеси — это селектор одного из существующих правил с квадратными скобками для параметров и точкой с запятой (точно так же, как функция в JavaScript). Ниже приведен пример миксина:

Вложение

Вложение — это полезный инструмент, который позволяет лучше организовать ваш CSS в правилах для подклассов. Он занимает меньше места и его легче понять, если вы привыкли к синтаксису. Ниже приведен пример вложения в Less:

Комментарии

Многих раздражает CSS синтаксис комментариев, так как он сложный и медленный. Меньше предлагает альтернативу, как показано ниже:

Заключение

Less – это простое для понимания расширение для CSS. Он предоставляет множество функций, наиболее часто используемые из которых были отмечены здесь. Теперь, когда вы понимаете, что такое Less, я настоятельно рекомендую вам прочитать официальную документацию, так как в ней есть исчерпывающий список других функций, которые должен использовать Less. предложение. Также стоит отметить, что Меньше не будет работать при обычном запуске файла в браузере. Для тех, кто хочет протестировать свой код локально, вы должны разместить файлы на своем локальном хосте.

Less также совместим со многими другими фреймворками, такими как Node.js и Vue.js. Я также настоятельно рекомендую использовать их.

Надеюсь, вы узнали что-то полезное о том, как использовать Less; это отличный инструмент, который может помочь вам писать код более эффективно.