wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Less препроцессор: CSS-препроцессоры · Less. Путеводитель для новичков

alexxlab
No Comments

Содержание

CSS-препроцессоры · Less. Путеводитель для новичков

  • Less. Путеводитель для новичков

  • Введение

  • Предисловие

  • Благодарности

  • Целевая аудитория

  • Глава 1. Основы

    • Препроцессоры

    • CSS-препроцессоры

    • Грань между Less и CSS

    • Компиляция и отладка

    • Использование плагинов

  • Глава 2. Работа с селекторами, медиа-запросами и файлами

    • Комментарии

    • Вложенные правила

    • Ссылка на родителя селектора

    • Группировка селекторов

    • Использование медиавыражений

    • Импорт стилей

    • Домашнее задание

  • Глава 3. Переменные и примеси

    • Использование переменных

    • Интерполяция переменных

    • Наименование переменных

    • Использование примесей

    • Специальные параметры и сопоставление шаблонов

    • Дополнительные возможности примесей

    • Работа с набором правил

    • Домашнее задание

  • Глава 4. Операции со свойствами и встроенные функции

    • Слияние свойств

    • Строки и списки

Препроцессор LESS, начиная с простого

Вы здесь:
Главная — CSS — CSS Основы — Препроцессор LESS, начиная с простого


И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS, а мне говорят: «Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?» Что же делать?


Во-первых, разработчики никогда не перестанут придумывать новые технологии. А профессиональные верстальщики – премного им за это благодарны. Язык таблиц стилей CSS, придумали в то время, когда сайты были примитивными. Но шли годы, сайты становились сложнее и массивнее, но способы верстки оставались прежними. Верстальщики запарились писать похожие участки кода. Невозможно было быстро поменять цвет на сайте. Назрела необходимость в большей автоматизации верстки, так и появились препроцессоры CSS кода. И сегодня мы поговорим об одном из них, препроцессоре LESS.


Компиляция LESS и VS Code


Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less. Как это работает?


  1. Создаем файл стилей c расширением .less

  2. После сохранения, автоматически сгенерируется .css файл в ту же папку.

Каждый раз при сохранении изменений, LESS файлы компилируются в CSS файлы. Браузеры ещё не научились понимать LESS, им нужен CSS код.


Переменные LESS


Наиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: «В чем прикол? Все равно мне нужно что-то прописывать, какая разница?»


Главная фишка — это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS.
Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.




@primary: #194eb4;

@secondary: #f2b834;

@success: #4cb514;

@black: #000;

@white: #fff;

Теперь пишем обычный код, как мы это делали в CSS, но вместо значений подставляем переменные.


LESS




div {

    padding: 0;

    font-family: Roboto, sans-serif;

    color: @black;

}

После сохранения, компилируется CSS код. Мы не трогаем вообще CSS файл, вся работа ведется в LESS файле. Вы можете заносить любые часто повторяющиеся свойства в переменные.


CSS




div {

    padding: 0;

    font-family: Roboto, sans-serif;

    color: #000;

}

Миксины (mixin) в LESS


Миксины полезны для повторного использования набора свойств – рамок, кнопок, заголовков. Сгруппированный набор свойств, может применяться к разным селекторам.


На сайте несколько однотипных кнопок разного цвета, но с одинаковыми шрифтовыми свойствами. Создаем миксин, который помогает автоматизировать процесс создания кнопок.




.button_font {

    font-family: "DIN Pro Bold";

    text-transform: uppercase;

    font-size: 18px;

}

Примешиваем миксин в свойства селектора кнопки.




.portfolio__button {

    padding: 15px 80px;

    color: #344258;

    .button_font;

}

На выходе получаем:




.portfolio__button {

    padding: 15px 80px;

    color: #344258;

    font-family: "DIN Pro Bold";

    text-transform: uppercase;

    font-size: 18px;

}

Символ амперсанд


Вместо дублирования названия селектора, используем символ амперсанд.




.portfolio__item {

    position: relative;

    background-color: #3c3c3c;

}

    &:hover {

        background-color: #ccc;

    }

}

CSS




.portfolio__item {

    position: relative;

    background-color: #3c3c3c;

}

.portfolio__item:hover {

    background-color: #ccc;

}

Медиа-запросы в LESS


Можно записывать медиа-запросы прямо внутри селектора.


LESS




.header__title {

    color: #344258;

    font-size: 40px;

    font-family: "DIN Pro", sans-serif;

    padding: 0 20px;

    @media only screen and (max-width : 320px){

    font-size: 22px;

    }

}

CSS




.header__title {

    color: #344258;

    font-size: 40px;

    font-family: "DIN Pro", sans-serif;

    padding: 0 20px;

}

@media only screen and (max-width : 320px) {

    .header__title {

        font-size: 22px;

    }

}

Заключение


Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS. Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.


  • Создано 30.08.2019 10:35:01



  • Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):


  1. Кнопка:

    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:


  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Что такое препроцессоры css Sass и Less

В данной статье мы рассмотрим решение для ускорения сборки front-end вашего сайта и дальнейшей быстрой его переделки.

CSS препроцессор — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.

Препроцессоры преобразуют код, написанный на препроцессорном языке, в чистый и валидный CSS-код. И на выходе мы получаем чистый, валидный, кроссбраузерный код.

Препроцессоры позволяют существенно ускорить написание css-кода, минимизировать его и облегчают его поддержку. Препроцессоры превносят в css такие вещи как переменные, вложенность конструкций, наследование, миксины, циклы, ветвления и многое другое.

 
 

Представьте что вы ведете разработку крупного проекта и в какой-то момент меняется концепция фирменного стиля сайта (хотя это справедливо и не только для крупных проектов). По новой концепции вам требуется заменить все цвета и оттенки старого сайта на совершенно другие. Тогда ваша работа сводится к долгому и муторному поиску всех вхождений старых цветов в файлы стилей и переопределение их новыми. Если Вы являетесь специалистом, то Вам будет попросту жаль потерянного времени и в следующий раз Вы будете искать решения чтобы ситуация не повторилась. А решение есть и в этой статье мы его рассмотрим.

Препроцессоры css

Препроцессоры css — это технологии, созданные с целью расширить функционал привычных нам файлов стилей (css)

Существует несколько популярных css препроцессоров таких как Sass и Less. Разумеется их гораздо больше.

у этих препроцессоров похожий принцип — создаётся файл с уникальным расширением и после его компиляции на его основе строится привычный нам файл css. Для его изменения мы также открываем файл препроцессора, изменяем его и после компиляции у нас изменяется и файл css.

Препроцессоры мы используем на стороне разработки и разворачивать их на стороне сервера не стоит.

Схема работы препроцессора css

Преимущества препроцессоров css

  • Использование переменных изменение значение одной переменной влечёт изменение значений сразу нескольких правил css где это значение встречалось.

  • Сокращение кода благодаря правилам вложенности удаётся существенно сократить и оптимизировать код, что ускоряет его загрузку.

  • Удобство редактирования кода дорабатывать код стало гораздо проще.

Препроцессоры · Less. Путеводитель для новичков

  • Less. Путеводитель для новичков

  • Введение

  • Предисловие

  • Благодарности

  • Целевая аудитория

  • Глава 1. Основы

    • Препроцессоры

    • CSS-препроцессоры

    • Грань между Less и CSS

    • Компиляция и отладка

    • Использование плагинов

  • Глава 2. Работа с селекторами, медиа-запросами и файлами

    • Комментарии

    • Вложенные правила

    • Ссылка на родителя селектора

    • Группировка селекторов

    • Использование медиавыражений

    • Импорт стилей

    • Домашнее задание

  • Глава 3. Переменные и примеси

    • Использование переменных

    • Интерполяция переменных

    • Наименование переменных

    • Использование примесей

    • Специальные параметры и сопоставление шаблонов

    • Дополнительные возможности

выбор между LESS и SCSS, возможные проблемы разработки

От автора: прежде всего, что такое препроцессор? Вкратце препроцессор – это программа, модифицирующая данные под входные требования другой программы. Препроцессоры CSS – это скриптовый язык, расширяющий возможности обычного CSS переменными, правилами вложенности, функциями и логическими блоками.

Зачем мне его использовать?

Часто вы будете попадать в ситуацию, когда придется использовать одинаковое значение для определенного свойства в разных местах. Например, сначала вы указали красный первичным цветом сайта. Потом вам необходимо сменить его на зеленый.

С переменными вам не нужно искать и заменять все упоминания красного в стилях. Вы один раз определяете значение переменной, например, «primary color», а затем используете эту переменную как значение.

Значение primary color меняется в одном месте. Можно также импортировать CSS файлы из других источников, не думая о количестве сетевых запросов, так как перед компиляцией их все можно объединить в один файл.

Благодаря вложенной природе CSS препроцессоров, вы получите компактный код с таким же результатом. В основе LESS и SCSS лежит принцип DRY, который расшифровывается как «Don’t repeat yourself» или «не повторяйтесь».

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Что не так с LESS?

В сети уже полно обсуждений о том, что лучше: LESS или SCSS. Поэтому я не буду подробно раскрывать обе темы. Вместо этого я расскажу про маленькие проблемы, которые у меня возникли с LESS.

SCSS использует символ $ для определения переменных, а LESS – @. Поскольку CSS тоже использует символ @ для медиа запросов, импортов и keyframe анимации, это может ввести разработчиков в заблуждение.

Символ $ не используется в CSS. Символ @ есть в SCSS, но он используется для директив @if , @else , @each, @for и @while.

Хотя этот сценарий реален не для всех, лучше использовать разные идентификаторы для разделения элементов.

SCSS поддерживает традиционные логические выражения типа if/else, блоки и циклы. Guarded миксины в LESS легче для глаза, но их сложнее понять.

Можно сделать с помощью LESS…

… или просто с помощью SCSS.

LESS определяет лишь один guarded миксин. Поэтому нельзя просто передать второй аргумент и обработать его в том же миксине, продублировав код для всех возможных сценариев. На самом деле, LESS (меньше) значит больше (игра слов).

Я знаю, что можно сократить код, используя аугментированные значения в качестве имен свойств для этого случая, но проблема в том, что я не могу условно сопоставлять две разные части одного и того же миксина с LESS.

С таким кодом головной боли больше…

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

… чем с таким.

Чтобы достичь такого же результата с помощью LESS, мне пришлось предопределять все, писать миксин, получать позицию индекса, итерировать его с моей логикой до тех пор, пока значение индекса не станет равным нулю, и вызывать миксин вручную.

Хотя это лично мое мнение, мне кажется, что SCSS в целом лучше обрабатывает значения вычислений и математические значения.

Почему?

Что с этим не так?

LESS, с другой стороны, гораздо сложнее. Например, когда я использую его, я не пытаюсь проводить вычисления. Но даже если бы я это делал, с каких пор 100% минус 50px равно 50%?

LESS, почему ты игнорируешь значения с единицами изменений?

Зачем ты заставляешь меня учить твои костыли, когда я уже знаю CSS?

И последнее. Благодаря проекту LibSass, у SCSS есть много оберток для других языков, например, C, Go, PHP, Python, Dart и т.д.

Почему мы решили отказаться от LESS в угоду SCSS?

Пока мы разрабатывали JotForm Cards, нам нужно было предварительно обрабатывать значения переменных – предварительная компиляция и кеширование на стороне сервера одновременно; и все это нужно было сделать идеально.

Мы хотели, чтобы пользователи могли настраивать внешний вид форм. Чтобы любые изменения мгновенно и одновременно отображались и кэшировались на сервере. Ради наших пользователей мы не хотели запускать клиентскую LESS-оболочку, потому что это потребует вычислительной мощности клиента — и много чего может пойти не так.

Мы не начали цикл разработки с целью перехода от LESS к SCSS. Но на полпути, занимаясь этими незначительными проблемами, отсутствие достойной обертки для LESS стало последней каплей.

При этом различия между LESS и SCSS менее важны, чем то, что их объединяет. В конце концов, не имеет значения, какой препроцессор вы используете, если вы его используете.

Пытаться управлять огромным проектом с одним CSS-файлом и традиционной структурой CSS намного сложнее, чем использовать препроцессор с парой проблем.

Автор: Kaan Kavuştuk

Источник: https://www.jotform.com/

Редакция: Команда webformyself.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Учебник LESS. Статья «Введение в LESS»

Что такое LESS?

LESS — это динамический метаязык на основе каскадных таблиц стилей (англ. Cascading Style Sheets — CSS), предназначенный для упрощения, масштабирования и поддержки большого объёма CSS кода.

LESS был создан Alexis Sellier под влиянием более раннего метаязыка стилей SASS (Syntactically Awesome Stylesheets).
Одной из особенностью LESS является то, что он может работать как на клиентской стороне, так и на стороне сервера. Язык стилей LESS это продукт с открытым исходным кодом, который строится на языке программирования JavaScript.

LESS, как, например, и язык стилей SASS — это CSS препроцессор, он позволяет расширить язык CSS, добавляя в него переменные, функции, миксины (примеси), которые позволяют повторно использовать код в таблицах стилей и прочие методы, которые сделают ваш CSS код более настраиваемым, расширяемым и масштабируемым. Возможно Вас удивит тот факт, что вы можете начать использовать LESS уже прямо сейчас, так как валидный CSS будет валидным и в LESS.

Подключение LESS

В этой статье мы с Вами рассмотрим два варианта работы с LESS, если быть точнее, то с файлами *.less. Первый вариант предусматривает использование файлов *.less напрямую в браузере пользователя с подключением необходимого скрипта JavaScript для компиляции на «лету».

Второй вариант предусматривает использование специального препроцессора, который будет компилировать файлы *.less в файлы каскадных таблиц стилей — *.css.

Начнем с первого варианта:

По аналогии с каскадными таблицами стилей вам необходимо подключить файл *.less к Вашему HTML документу с использованием тега <link>:

<link rel = "stylesheet/less" href = "styles.less"> // подключаем less файл к документу

После этого вам необходимо скачать файл со скриптом, или, как вариант, получить ссылку на сеть доставки контента (CDN) на официальном сайте метаязыка LESS. Давайте остановимся на первом варианте и подключим скачанный файл:

<link rel = "stylesheet/less" href = "styles.less"> // подключаем less файл к документу
<script src = "less.js"></script> // подключаем скрипт JavaScript для преобразования метаязыка LESS в CSS

Обратите внимание, что необходимо подключать файл со скриптом уже после того как вы подключили файл *.less. Этого достаточно, чтобы начать описывать стили с помощью метаязыка LESS, при этом как вы понимаете компиляция из LESS в CSS будет происходить на стороне браузера (на «лету»).

Давайте перейдем к рассмотрению примера в котором начнем использовать LESS:

<!DOCTYPE html>
<html>
<head>
    <title>Знакомство с LESS</title>
    <link rel = "stylesheet/less" href = "2.less"> <!-- подключаем less файл к документу -->
    <script src = "less.min.js"></script> <!-- подключаем скрипт JavaScript для преобразования метаязыка LESS в CSS -->
</head>
    <body>
        <h2>Заголовок первого уровня.</h2>
        <p>И один абзац для примера.</p>
    </body>
</html>

В этом примере мы создали отдельный файл 2.less в котором указали следующие стили:

h2 { 
    color: rgb(29,55,93); // устанавливаем цвет текста
}
p {
    background: rgb(29,55,93); // устанавливаем цвет заднего фона
    color: #fff; // устанавливаем цвет текста белый
}

Кроме того, мы подключили к документу скрипт JavaScript, который выступает в роли компилятора и преобразует метаязык LESS в каскадные таблицы стилей CSS.

Результат преобразования будет следующий:

h2 { 
    color: #1d375d; // значение в HEX
}
p {
    background: #1d375d; // значение в HEX
    color: #fff;
}

Как вы можете заметить результат компиляции (преобразования) практически идентичен первоначальным стилям, за исключением того, что RGB значение цвета было конвертировано в шестнадцатеричную систему HEX, что не влияет на внешний вид, но незначительно сокращает количество символов для описания этого стиля.

Результат нашего примера*:

Рис.2 Пример подключения less файла к документу.

* — Если вы решили повторить этот пример локально на своем компьютере и не увидели результат примера, показанный на изображении выше, то скорее всего вы сможете найти в консоли браузера подобную ошибку: «Failed to load file:///***/2.less: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Мы с Вами не будем вникать в локальные политики разных браузеров, отключать их и запускать браузеры с определенными ключами, просто попробуйте воспользоваться браузером Firefox для этого примера, или переходите к дальнейшему чтению.

Хочу сразу обратить ваше внимание на то, что этот пример не отражает возможностей метаязыка LESS, которые будут рассмотрены в следующих статьях этого учебника, а служит для понимания того как происходит компиляция, что нам необходимо для дальнейшего изучения.

Рассмотренный выше метод работы с файлами less имеет право на существование, но не является рекомендованым к использованию, по той причине, что производительность и скорость отображения стилей документа при этом подходе снижается. В настоящее время существует большое количество инструментов для компилиции LESS в CSS, начиная от компиляции на стороне сервера, заканчивая отдельными программными продуктами, один из которых мы сейчас с Вами рассмотрим.

Препроцессор Koala

Задача этого учебника заключается в быстром освоении метаязыка LESS, именно по этой причине, на начальном этапе, я предлагаю Вам для компиляции использовать программный продукт Koala.

Этот программный продукт позволит нам не тратить время на настройку среды, которая будет отслеживать изменение *.less файлов и компиляцию их в *.css файлы, что идеально для первичного знакомства с метаязыком LESS не отвлекаясь на технические особенности по настройке той, или иной среды.

Для начала нам необходимо перейти на официальный сайт продукта и скачать его последнюю версию и установить на свой компьютер.

После этого необходимо создать файл *.less и подключить в программе Koala папку в которой находится этот файл (нажмите на +), например, в моем случае папка less:

Рис.3 Пример подключения папки с файлом less.

Вы должны увидеть в окне программы файл, который вы создали заранее. Кликните под название файла, как показано на изображение ниже, это позволит Вам выбрать путь куда будут компилироваться CSS файлы.

Рис.4 Выбор пути для компиляции CSS файлов.

Я выбрал ту же папку в которой находится less файл, в результате у вас должно получиться следующее:

Рис.5 Установка каталога для компиляции CSS.

Теперь программа Koala будет отслеживать все изменения в less файле и при их изменении сразу будет проводить их компиляцию в css. После первой компиляции вы увидите в главном окне файл css, кликнув под который, при необходимости вы сможете по аналогии настроить путь в который будут сохраняться файлы css, но уже минифицированные (стили без пробелов в одну строку). Как правило, такие стили используются на «боевых» (готовых) проектах.
Рис.6 Настройка компиляции минифицированной версии CSS файла.

Не забудьте поставить галочку возле Auto Compile в случае необходимости компиляции минифицированной версии css файлов «на лету».

Комментарии в LESS

По аналогии с CSS допускается использовать внутри *.less файла как однострочные, так и многострочные комментарии со следующим синтаксисом:

// это однострочный комментарий

/* это 
многострочный
комментарий */

/* это многострочный комментарий в одной строке */

Будьте готовы к тому, что в зависимости от настроек компилятора, комментарии могут не сохраняться при компиляции из файлов *.less в *.css. Например, вышерассмотренный компилятор Koala удаляет однострочные комментарии при компиляции, это поведение по умолчанию доступно изменить в его настройках.

Что такое LESS? Обзор CSS препроцессора LESS

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов. Постепенно в рубрику верстка сайтов будут переноситься статьи из других разделов так или иначе связанных с версткой и, конечно, эти статьи будут корректироваться и редактироваться в процессе переноса, так как информации на моем сайте достаточно много на тему верстки, но подана информация не самым лучшим образом, как минимум, не систематизирована. И еще данная статья начинает раздел Препроцессор LESS, в котором мы подробно изучим все возможности препроцессора LESS, а возможно, попробуем сделать HTML шаблон с LESS.

Что такое LESS? Обзор CSS препроцессора LESS

Данная запись про препроцессор LESS вводная, из нее вы узнаете: о том, что такое препроцессор LESS, почему LESS в разы ускоряет верстки HTML шаблонов и в разы облегчает их дальнейшее обслуживание, познакомитесь с функциями, реализованными в CSS препроцессоре LESS и в конце мы поговорим о преимуществах и недостатках LESS. Хочу заметить, что данные записи не будут вам интересны, если вы не знаете принципов работы CSS.

Что такое CSS препроцессор LESS?

Содержание статьи:

LESS – это препроцессор CSS, который очень сильно ускоряет оформление HTML страниц сайта при помощи таблицы стилей CSS. Препроцессор LESS – представляет собой язык (отчасти напоминающий язык программирования, но намного проще), который значительно расширит ваши возможности при написании CSS кода.

Мы определились, что препроцессор LESS – это язык, если говорить просто, то код, написанный на языке LESS компилируется в CSS код при помощи специальных компиляторов LESS, которые мы, конечно же, рассмотрим. Стоит заметить, что компиляторы LESS генерируют кросс-браузерный код.

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

CSS препроцессор LESS разработан на языке JavaScript, поэтому файлы LESS можно использовать на сайте, компилятор будет отдавать браузеру переваренные в CSS файлы, а на самом деле на вашем сервере будет лежать файл с расширением .less.

Надеюсь, вы разобрались с тем, что такое препроцессор LESS и, думаю, что осознали его преимущества, если нет, то пойдем далее.

Как расширяет препроцессор LESS возможности CSS кодирования

Когда я пишу про CSS, трудно подобрать термин, который бы характеризовал написание CSS кода, поэтому я буду использовать, либо CSS кодирование, либо верстка CSS.  А теперь поговорим о том, как препроцессор LESS расширяет возможности CSS. Обратите внимание: если вы сейчас не совсем улавливаете, о том, что написано в тексте, то по завершению изучения LESS, вы сможете создавать собственные HTML шаблоны с LESS в разы быстрее, а вносимые корректировки во время использования шаблона будут в разы проще.

Первое, что есть у препроцессора LESS и нет у CSS, точнее у CSS есть, но реализовано не так эффективно: вложенные правила. Вложенные правила LESS делают код более понятным и читабельным.

Вложенные директивы препроцессора LESS позволяют сократить написание CSS кода на треть, а иногда и больше, согласитесь, лучше написать 10 строчек, чем 15.

Математические операторы поддерживаются препроцессором LESS, что бывает очень удобно при верстки адаптивных макетов сайта.

В LESS есть такая штука, как Escaping, называть ее побегом или спасением язык не поворачивается, поэтому пишу, как есть. Конструкция Escaping в LESS позволяет задавать CSS правила динамически. Ну, например, какой-нибудь жуткий кросс-браузерный градиент можно реализовать в LESS как Escaping и затем использовать его несколько раз в вашем CSS коде.

В препроцессоре LESS реализованы функции, которые могут изменять значения ваших CSS правил, как и в языке программирования, функциям в LESS передаются параметры.

В LESS есть пространства имен, которые используются для группировки правил, сгруппировав правила, вы можете их легко добавлять к другим элементам ваших страниц.

Препроцессор LESS реализует область видимости, как и в языках программирования, если вы еще не знаете, что такое область видимости, то мы поговорим об этом в дальнейшем.

LESS поддерживает еще и комментарии.

В LESS есть расширения, вернее будет сказать наследование, это когда один элемент может наследовать стили другого элемента.

В препроцессоре LESS есть переменные, которые дают кучу возможностей по сокращению CSS кода.

В LESS есть миксины или примеси: мы просто стили одного элемента можем добавить (примешать, смешать) со стилями другого элемента, чтобы не дублировать код. Это похоже на наследование классов в ООП.

Если простых миксин в LESS мало, то LESS позволяет использовать параметрические миксины. Принцип их действия схож, но параметрические миксины могут, как и функции принимать один или несколько параметров, а сами параметры могут быть переменными.

Чего нет, того нет, в LESS нет операторов условия, но есть охранники. Guards в LESS чем-то похожи на языковую конструкцию if.

Циклы в LESS есть и их даже используют и, стоит сказать, что циклы в LESS могут значительно вам помочь при написании CSS кода.

В LESS есть слияние, которое используется для объединения двух разных правил CSS в одно.

В LESS очень много встроенных функций, о которых мы будем говорить и которые мы будем рассматривать подробно далее.

В CSS часто можно встретить селекторы, имена которых состоят из 5-6 слов, а есть селекторы с эквивалентными именами, но состоящие не из 5, а из трех или четырех слов, обычно такие селекторы пишутся для вложенных элементов, чтобы не писать имя класса из 5-6 слов препроцессор LESS реализует дочерние селекторы.

Это был лишь краткий, но довольно полный обзор функционала  препроцессора LESS. Надеюсь, вы теперь понимаете, зачем вам LESS и почему стоит его изучить, если вы всё еще считаете, что вам LESS не нужен, подумайте о том, что функции языка LESS можно комбинировать. Или подумайте хотя бы о том, что сайт, какой бы он ни был, оформляется однотипно, например, цвет ссылок на сайте обычно везде одинаков или многие элементы сайта имеют одинаковые цвета, так, наверное, проще один раз записать цвет в переменную и потом писать эту переменную, а не набор цифр и букв?

Преимущества и недостатки LESS

Давайте сперва поговорим о преимуществах, которые есть у LESS:

  1. LESS файлы быстро компилируются в CSS, который понятен браузеру, при этом компиляция LESS происходит значительно быстрее, чем у других CSS препроцессоров.
  2. За счет того, что у LESS есть вложенные правила, ваш код будет более читабельным и удобным для редактирования.
  3. Изменения в шаблоны сайтов с LESS происходят быстрее, так как повторяющиеся значения можно присваивать переменным.
  4. В LESS поддерживается наследование и повторное использование стилей одного класса в другом, что сокращает ваш код в разы.
  5. Изучив LESS, вы сможете намного быстрее верстать HTML шаблоны, за счет того, что код будет в разы короче.
  6. У LESS много других преимуществ и вы их поймете, когда его изучите.

А теперь давайте перечислим недостатки препроцессора LESS:

  1. Изучать LESS стоит начинать только в том случае, когда вы довольно сносно знаете CSS, хотя изучение можно проводить параллельно.
  2. Код LESS все-таки приходится тестировать после написания, даже у опытного разработчика LESS могут возникать кое-какие трудности.
  3. Фрейморков, использующих LESS, меньше, чем фреймворков, использующих SASS.

Мне кажется, мы разобрались в этой записи с вопросами: что такое LESS, зачем нужно использовать LESS и чем хорош препроцессор LESS. Можем приступать к его изучению.

Prepros :: Less

Less (что означает Leaner Style Sheets) — это расширение CSS, которое позволяет использовать такие вещи, как переменные, вложенные правила, встроенный импорт и многое другое.

Опции

  • Выходной файл

    Щелкните путь к выходному файлу, чтобы изменить его вручную, или используйте параметры вывода для всего проекта, чтобы настроить путь вывода для всех файлов Less.

  • SourceMap

    Включите эту опцию, чтобы создать файл исходной карты ( .map ) вместе с выходным файлом CSS.Файл SourceMap позволяет вам находить исходное положение наборов правил и свойств в файле Less при проверке страниц с помощью инструментов разработчика.

  • Номер строки

    Включите этот параметр, чтобы выводить комментарии в файле CSS, содержащем имя файла и номер строки правила, установленного во входном файле Less.

  • Строгие единицы

    Включите этот параметр, чтобы Less не выполнял недопустимые математические операции.
    Например

     .class {width: 1px * 2px; }

    В этом случае все явно не так — длина, умноженная на длину, дает площадь, но CSS не поддерживает указание областей.
    Итак, Less предполагает, что вы имели в виду px, и выводит 2px. Когда включены строгие единицы измерения, Less предполагает, что это ошибка в расчетах, и выдает ошибку.

  • Включить Javascript

    Включите этот параметр, чтобы оценить встроенный JavaScript JavaScript.

  • Строгий импорт

    Включите этот параметр, чтобы запретить импорт внутри набора правил.

  • Разрешить небезопасный импорт

    Включите этот параметр, чтобы разрешить импорт с небезопасных хостов HTTP.

  • Математика

    Проверьте математическую документацию на наличие доступных математических операций.

  • Префикс CSS

    Включите эту опцию, чтобы добавить префиксы поставщиков в выходной файл CSS с помощью Autoprefixer.

  • Минимизировать CSS

    Включите этот параметр, чтобы уменьшить выходной файл CSS.

Импортированные файлы

Prepros компилирует родительский файл всякий раз, когда вы редактируете импортированный файл.Prepros также повторно сканирует импортированные файлы всякий раз, когда вы редактируете файл.
Обновите проект с помощью CTRL + R или CMD + R , чтобы вручную повторно сканировать импортированные файлы.

  @import 'b';
@import 'c.less';

// Этот файл будет автоматически компилироваться всякий раз, когда вы редактируете b.less или c.less

Используйте частичное имя файла с префиксом подчеркивания (например: _imported.less), если вы не хотите, чтобы Prepro автоматически компилировали файл при его редактировании.

Узнайте больше о веб-сайте «Меньше за меньшее».

.Плагины

— меньше препроцессора для импорта

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

6 Текущие параметры для препроцессоров CSS

Препроцессор CSS помогает вам писать поддерживаемый, ориентированный на будущее код и серьезно сокращает объем CSS, который вам нужно писать. Эти инструменты лучше всего проявляют себя в крупномасштабных пользовательских интерфейсах, требующих огромных таблиц стилей и множества правил стиля.

Это обзор шести лучших препроцессоров CSS, существующих на данный момент.

Мы начнем эту статью с самого известного варианта. Sass, для которого требуется Ruby, вероятно, является наиболее знакомым вам препроцессором CSS.Это хорошо зарекомендовавший себя проект с открытым исходным кодом, которому уже восемь лет, и именно он определил жанр современных препроцессоров CSS. Я мало что могу сказать о Sass из того, что еще не было сказано в SitePoint, но я сделаю здесь краткий обзор для тех, кто плохо знаком с этой темой.

Для этого препроцессора CSS можно использовать два синтаксиса:

В синтаксисе Sass переменные определяются и используются следующим образом:

  $ serif-font-stack: "Джорджия", "Times New Roman", засечки
$ monospace-font-stack: «Кузен», «Курьер»

тело
    шрифт: нормальный 18px / 22px $ serif-font-stack

предварительно, код
    шрифт: 600 полужирный 18px / 22px $ monospace-font-stack

Это эквивалент SCSS синтаксиса:

  $ serif-font-stack: "Джорджия", "Times New Roman", serif;
$ monospace-font-stack: «Кузен», «Курьер»;

body {
    шрифт: обычный 18px / 22px $ serif-font-stack;
}

pre, code {
    шрифт: 600 полужирный 18px / 22px $ monospace-font-stack;
}

Вы увидите, что новый синтаксис (который стал наиболее рекомендуемым вариантом для многих опытных разработчиков Sass) намного больше похож на естественный CSS.О синтаксисе можно сказать больше, но многое уже было сказано ранее, и я рекомендую вам ознакомиться с документацией для получения более подробной информации.

Less.js (обычно именуемый просто «Меньше») — один из самых популярных препроцессоров CSS и, вероятно, в настоящее время самый сильный конкурент Sass. Less тщательно расширяет синтаксис CSS с помощью миксинов, переменных, правил вложенных стилей и даже циклов набора правил (который ведет себя аналогично для циклов в языке программирования).

Одна общая особенность препроцессоров CSS — это примеси или возможность смешивать свойства из одного набора правил в другой. В синтаксисе Less вы можете включить смесь свойств, найденных в классе с именем .button , в другой класс с именем .button-checkout-process :

  .button {
    дисплей: встроенный блок;
    ширина: 80%;
    максимальная ширина: 200 пикселей;
    радиус границы: 5 пикселей;
    цвет фона: черный;
    цвет белый;
    размер шрифта: 14 пикселей;
    маржа: 5 пикселей;
    отступ: 8 пикселей;
}

.button-checkout- process {
    .button ();
    цвет фона: серебро;
}

Less легко настроить. Если вы просто хотите поиграться с ним, не затрачивая усилий на его установку и настройку для производства, просто скачайте файл JavaScript Less.js и укажите его в своем HTML-документе (или отправьте его из своего любимого общедоступного CDN, создайте .less , а затем ссылаться на него после скрипта Less.js, и все готово:

  <заголовок>

Метод реализации Less, который я только что описал, отлично подходит для разработки в браузере. Это быстро и без проблем. Но — и это очень важный момент — как только вы будете готовы к развертыванию на рабочем веб-сервере, вам следует предварительно скомпилировать файлы .less в обычные файлы .css , чтобы повысить производительность в Интернете. Это можно сделать через интерфейс командной строки Node.Например, чтобы скомпилировать styles.less в файл с именем styles.css , а также минимизировать вывод CSS, введите следующую команду:

  lessc styles.less -x styles.css

Stylus — еще один, который был сильным конкурентом Sass, и представляет собой многофункциональное расширение CSS. Он имеет более 60 пользовательских функций, включая saturation () , который позволяет математически регулировать насыщенность цвета CSS.

Синтаксис Stylus также позволяет опускать фигурные скобки ( {} ), двоеточия (: ) и точки с запятой (; ) или использовать простой CSS.

Вот пример синтаксиса стилуса:

 . Кнопка
    отображать встроенный блок
    насыщенность цвета границы (# 000, 50%)
    Граница-радиус 5px

Приведенный выше пример будет компилироваться в это:

  .button {
    дисплей: встроенный блок;
    цвет границы: # 959595;
    -webkit-border-radius: 5 пикселей;
    -moz-border-radius: 5 пикселей;
    радиус границы: 5 пикселей;
}

CSS-Crush имеет все функции, которые вы ожидаете от современного препроцессора CSS: автоматическое добавление префиксов поставщика, переменные, математические операции, наследование свойств через вложенные наборы правил и многое другое.

Что делает CSS-Crush особенно уникальным и что может заставить вас выбрать его в качестве препроцессора, так это то, что он реализован на PHP. Как вы знаете, PHP — это популярный язык сценариев, который уже настроен практически на всех веб-хостах и ​​является родным языком, используемым на популярных платформах веб-сайтов, таких как WordPress, Magento и Drupal. В отличие от других препроцессоров, вам не нужно настраивать Node.js или Rails для работы CSS-Crush, что делает его удобным выбором для многих разработчиков, поскольку его легко интегрировать в существующий стек разработки.

Чтобы использовать CSS-Crush, вам необходимо включить его в соответствующий файл PHP (или систему шаблонов), например:

Затем, при желании, вы можете настроить CSS-Crush так, чтобы он работал так, как вы хотите. Например, предположим, что вы не хотите минимизировать свой CSS (по умолчанию минимизация включена). После обращения к файлу CSSCrush.php вы можете вызвать следующую функцию с соответствующими параметрами, чтобы задать свои предпочтения:

Для определения переменных используется директива @set .Допустим, вы хотите определить ширину устройства. Вот как это сделать с помощью синтаксиса CSS-Crush:

  @set {
    ширина смартфона: 320 пикселей;
    ширина планшета: 768 пикселей;
    ширина ноутбука: 1680 пикселей;
    Ширина монитора 4k: 3840 пикселей;
}

После объявления переменных вы можете ссылаться на них в своем CSS. Ниже приведен пример медиа-запроса, в котором используется переменная для ширины смартфона , показанная в предыдущем примере кода:

  @media only screen and (min-device-width: smartphone-width) {
    h2 {
        размер шрифта: 24 пикселя;
    }
}

Когда вам нужно что-то изменить — например, вы можете решить, что теперь вы хотите, чтобы ширина для смартфона составляла 380 пикселей вместо 320 пикселей — вам нужно изменить значение ширины только один раз в директиве @set , а не во всем ваши файлы CSS.

Myth, для которого требуется Node.js, позволяет использовать будущий синтаксис CSS уже сегодня, не дожидаясь, пока веб-браузеры реализуют новую предложенную функцию CSS или W3C завершит ее спецификации. Это означает, что когда эта функция наконец-то будет поддерживаться в современных браузерах, вам не придется переписывать код.

Например, текущий статус выражения свойства calc () неясен. Есть отчет, в котором говорится, что он поддерживается в 78% браузеров, используемых сегодня, но спецификация W3C, которая находится в статусе рекомендации кандидата (CR), говорит, что она «находится под угрозой и может быть отклонена».«Так можем ли мы / должны использовать это или нет? Ответ сомнительный.

Но с Myth мы можем использовать calc () , не беспокоясь о статусе спецификации и поддержке браузером. Myth позаботится обо всем необходимом коде, чтобы выражение свойства работало в браузере. Например, вот допустимый W3C способ использования calc () :

  .container {
    маржа: calc (7px * 2);
}

Myth скомпилирует приведенный выше пример в:

 .container {
    маржа: 14 пикселей;
}

Что замечательно в Myth, так это то, что вам не нужно изучать новый синтаксис. Он использует существующие и предлагаемые функции CSS стандарта W3C.

Rework предназначен для самых требовательных и требовательных фронтенд-инженеров. Это то, что вы бы использовали, если бы захотели развернуть собственный препроцессор CSS. Миф (обсужденный ранее) был разработан на основе проекта с открытым исходным кодом Rework.

Может быть, вам не нравится синтаксис Stylus, или, может быть, вам не нравится указывать аргумент модуля CSS для пользовательской функции math () CSS-Crush, или, возможно, вам не нравится, как Sass заставляет вас определять переменные с помощью Знак $ , и вы бы предпочли использовать # .Может быть, вам просто нужно несколько функций, и вы не хотите страдать из-за раздуваемых функций существующих препроцессоров.

Rework — это фреймворк препроцессора CSS, построенный на Node.js. В нем есть отличный набор вспомогательных плагинов для вещей, которые вы, возможно, захотите предварительно обработать. Поэтому, прежде чем писать собственные функции синтаксического анализа, вы можете сначала взглянуть на них, чтобы не изобретать колесо.

Другие параметры препроцессора CSS

Вот некоторые другие, более непонятные варианты препроцессоров CSS.Я не исследовал их всесторонне, поэтому вам придется изучить их самостоятельно, чтобы увидеть, подходят ли они вашим потребностям.

  • Clay: препроцессор CSS, созданный с использованием Haskell
  • DtCSS: сценарий PHP, который анализирует синтаксис DtCSS в CSS.
  • Препроцессор CSS: препроцессор, реализованный в PHP5. Этот старый и выглядит неактивным.
  • Switch CSS: препроцессор CSS, работающий на Apache (необходимо установить и включить mod_python)

Какой препроцессор CSS вы используете?

Использовали ли вы один из этих вариантов, описанных выше? Есть ли у вас предложения по их использованию? Или, может быть, вы знаете о другом, не указанном здесь.Мы будем рады поделиться вашими мыслями в комментариях.

.

No related posts.

Share :

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *