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


Содержание

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

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

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

Использование на клиентской стороне

Использование less.js в браузере отлично подойдет для разработки, но не рекомендуется для производства (релиза).

Компиляция на стороне клиента это простой путь начать разрабатывать на Less, но в производстве, когда важны производительность и надежность, мы рекомендуем для пре-компиляции использовать node.js или другие инструменты.

Свяжите ваш документ с .less файлом через атрибут rel со значением stylesheet/less .

Затем, скачайте less.js и подключите его в тег script , который, в свою очередь, вставьте в тег head . Стилевой файл должен идти перед тегом script (как обычно).

Опции браузера

Опции, определяющие настройки глобального объекта Less , поставьте перед тегом script :

Переменные

Это довольно очевидно:

Обратите внимание: все переменные фактически являются ‛константами“, так как они могут быть определены лишь один раз.

Примеси

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

И мы хотим использовать эти свойства внутри другого правила. Для этого просто положите имя класса туда, где вы хотите определить этот набор свойств, например:

Свойства из .bordered появятся в #menu a и в .post a . (Отметьте, что в качестве примеси можно использовать и #id ).

Примеси с параметрами

Опционально после имени примеси можно ставить круглые скобки.

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

Применяем в различных правилах:

Параметры в примесях могут иметь значения по умолчанию:

Как вариант, допустимый вызов примеси:

И будет подключен 5px border-radius:

Вы также можете использовать примеси, которые не принимают параметры. Это полезно, если вы захотите спрятать примесь в CSS, при этом сама примесь будет использоваться (внутри блока объявлений).

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

Параметры разделяются запятой или точкой с запятой. Рекомендуется использовать точку с запятой. Запятая имеет двойной смысл: ее можно интерпретировать как разделитель для разделения примесей или как разделитель селекторов в CSS.

Использование запятой в качестве разделителя аргументов у примеси делает невозможным создание списка CSS как аргумента. Другими словами, если компилятор видит по крайней мере одну точку с запятой при вызове примеси, он предполагает, что разделителем является точка с запятой и все запятые относятся к спискам CSS:

  • Два аргумента и каждый содержит запятую: .name(1, 2, 3; something, else)
  • Три аргумента и каждый содержит одну цифру: .name(1, 2, 3)
  • Используется фиктивная точка с запятой, чтобы создать примесь с одним аргументом, который содержит запятые: .name(1, 2, 3;)
  • Значение по умолчанию с разделителем запятой: .name(@param1: red, blue;)

Вполне допустимо определять несколько примесей с одним и тем же именем и количеством параметров. Если вы используете примесь с одним параметром, например, .mixin(green);, затем свойства всех примесей с точно таким же обязательным параметром будут использованы:

Примеси как функции

Возвращение значений из примеси.

Все переменные, определенные в примеси, могут быть использованы в вызывающей области видимости (если в вызывающей области видимости уже не определена переменная с таким же именем).

Таким образом, переменные определенные в примеси можно использовать как возвращаемые значения. Это позволяет создать примесь, которая может быть использована почти как функция. Например:

Сдерживатели примеси

Сдерживатели ( if-else ) (Guards), в отличие от простых значений, полезны, когда вы хотите получить соответствие шаблону, . Если вы знакомы с функциональным программированием, вы наверняка сталкивались с ними.

Пытаясь не отходить от декларативной природы CSS, Less реализовал выполнение условий через сдерживание примесей, вместо использования операторов if/else , в духе использования медиа-запросов.

When это ключевое слово, которое вводит сдерживание.

До версии 1.5 вы могли использовать следующий код:

Вы можете комбинировать условие с & , например:

Операторы сравнения для сдерживании

Полный список операторов сравнения для сдерживания: > , >= , = , = , . Кроме того, ключевое значение true делает эквивалентными следующие две примеси:

Любое значение кроме ключевого слова true является ложью ( false ).

Отметьте, вы можете сравнить аргументы друг с другом или с не-аргументами.

Циклы

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

Общие пример использования рекурсивного цикла, который создает классы для CSS сетки.


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

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

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

В этом уроке мы объясним, что такое CSS-препроцессор и рассмотрим один из самых популярных: LESS.

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

CSS препроцессоры не заменяют CSS. На самом деле, препроцессоры просто дают нам дополнительные функциональные возможности, такие как переменные, операторы и функции, с которыми мы можем упростить создание и управление файлами CSS.

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

Что такое LESS?

LESS относительно новый препроцессор, ему около 4 лет. Его часто сравнивают с SASS, более старым препроцессором. Как и LESS, так и SASS, имеют свои корни в языке программирования Ruby, но в настоящее время используются гораздо шире. LESS теперь основан на Javascript.

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

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

Чтобы воспользоваться тем, что LESS может предложить, мы сначала должны сохранить наш CSS-код в файл с расширением .less. Использовать LESS очень просто. Он работает как на веб-сервере, так и на стороне клиента.

Самый простой способ начать работу на стороне клиента. Добавьте ссылку на less-файл на вашей веб-странице, так же как добавляете CSS-файл, но с атрибутом rel установленным как «stylesheet/less», а затем файл less.js, который можно загрузить с www.lesscss.org

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Начинаем работатать

Обзор Less, как скачать и использовать, примеры и др.

Начинаем работатать с Less

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

Less можно запустить внутри Node, в браузере и в Rhino. Существует множество сторонних инструментов, которые позволяют компилировать Less файлы и отслеживать изменения. Наиболее легкий способ попробовать Less — использовать наш онлайн редактор.

Например, запись на Less:

превратится после компиляции в

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

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

Установка

Самый простой спосок установить Less на сервере – использовать npm, менеджер пакетов node.js, примерно так:

Использование из командной строки (cli)

После установки вы можете вызвать компилятор из командной строки, вот так:

Результат компиляции будет выведен stdout . Чтобы сохранить результат CSS в файл, укажите имя этого файла:

Для вывода минифицированный CSS, можно использовать плагин clean-css . Когда плагин установлен, минификация вывода CSS задается опцией —clean-css :

To see all the command line options run lessc without parameters or see Usage.

Usage in Code

You can invoke the compiler from node, as such:

which will output

Configuration

You may pass some options to the compiler:

See Usage for more information.

Third Party Tools

See the Usage section for details of other tools.

Each Less release contains also rhino-compatible version. Command line rhino version requires two files: * less-rhino- .js — compiler implementation, * lessc-rhino- .js — command line support. Command to run the compiler: «« java -jar js.jar -f less-rhino- .js lessc-rhino- .js styles.less styles.css «« This will compile styles.less file and save the result to styles.css file. The output file parameter is optional. If it is missing, less will output the result to `stdout`.

Client-s >

Using less.js in the browser is great for development, but it’s not recommended for production

Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.

To start off, link your .less stylesheets with the rel attribute set to » stylesheet/less «:

Next, download less.js and include it in a tag in the element of your page:

  • Make sure you include your stylesheets before the script.
  • When you link more than one .less stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.

  • Due to the same origin policy of browsers loading external resources requires enabling CORS
Илон Маск рекомендует:  Что такое код fclose

Browser Options

Options are defined by setting them on a global less object before the :

Or for brevity they can be set as attributes on the script and link tags (requires JSON.parse browser support or polyfill).

Где взять Less

Загрузка через браузер

Загрузка исходного кода

Загрузите свежую версию исходников Less напрямую с GitHub.

Клонировать или форкнуть на GitHub

Форкните проект и отправьте нам pull request!

Установка через Bower

Установите скрипт less.js, запустив следующую команду:

Подключение Less через CDN

Вопросы по лицензии

Less is released under the Apache 2 License (though there are plans to dual license it). Copyright 2009-2020, Alexis Sellier and the Less Core Team (see about). Boiled down to smaller chunks, it can be described with the following conditions.

It allows you to:

  • Freely download and use Less, in whole or in part, for personal, company internal or commercial purposes
  • Use Less in packages or distributions that you create

It forbids you to:

  • Redistribute any piece of Less without proper attribution

It requires you to:

  • Include a copy of the license in any redistribution you may make that includes Less
  • Provide clear attribution to The Less Core Team for any distributions that include Less

It does not require you to:

  • Include the source of Less itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Submit changes that you make back to the Less project (though such feedback is encouraged)

The full Less license is located in the project repository for more information.

Less and these docs are maintained by the core Less team.

Documentation source code released under the MIT License, documentation under CC BY 3.0.

Препроцессор 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, но вместо значений подставляем переменные.

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

Миксины (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;
>

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Изучаем LESS: Использование функций

    Дата публикации: 2020-01-18

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

    План статей серии:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Использование Функций

    Разделяй и властвуй

    Применение на практике

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

    Операции

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

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

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

    Итак, чтобы задать размер, можно использовать LESS, который поможет быстро задать размер шрифта blockquote в зависимости от базового размера. Давайте рассмотрим LESS. [Примечание: В этих примерах LESS я использую те аспекты, которые мы раньше изучили, в том числе переменные, миксины и другие. Если какие-то моменты кажутся вам непонятыми, пожалуйста, прочитайте предыдущие статьи серии.]


    Немного о веб-технологиях

    Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

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

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

    Надеюсь информация будет полезна для посетителей.

    10 примеров использования LESS для вашего сайта

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

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

    Об использовании LESS

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

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

    Как этим пользоваться?

    Я предлагаю читателю скопировать весь приведенный в статье код в отдельный файл .less, возможно добавить какие-то свои «штрихи» и создать своего рода LESS шаблон, который затем использовать в своих последующих проектах.

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

    Это позволит вам содержать код вашего проекта в порядке, тем не менее используя мощные примеси (mixins) из шаблона. По завершении работы над проектом, перед выгрузкой его в сеть вы просто скомпилируете весь LESS в обычный CSS, используя такие инструменты как Less.app или CodeKit.

    Если я использую Sass

    Если до настоящего момента вы использовали Sass – нет проблем. Оба этих инструмента – замечательные и я без проблем смог перейти с использования одного на другой. К счастью, оба инструмента очень похожи между собой по синтаксису команд.

    К тому же, есть отличная страничка на GitHub , где сравнивается синтаксис LESS и Sass. С ее помощью вы сможете сделать преобразования кода из LESS в Sass и наоборот за считанные секунды.

    Итак, давайте приступим к делу.

    Закругление уголков у блоков (border-radius)

    CSS-правило border-radius одно из самых основных и часто используемых на данный момент. Овальные уголки у блоков без труда помогут сделать дизайн сайта более привлекательным.

    Илон Маск рекомендует:  Нечеткие множества

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

    1. Примеси со значением по-умолчанию

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

    Первая часть кода, представленного ниже создает примесь(mixin), а во второй мы с легкостью можем вызвать код примеси и добавить закругленные уголки любому элементу, при этом не забывая про поддержку устаревших браузеров. Все, что нам нужно, это написать .border-radius(); и мы получим овальные уголки радиусом 5px (значение по-умолчанию в первом сниппете) со всех 4 сторон блока с учетом префиксов браузера. Если вы захотите поменять радиус, просто введите новое значение внутри круглых скобок.

    После компиляции LESS в CSS мы получим примерно следующий код.

    2. Примесь с параметром — передаем значение border-radius

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

    Сейчас мы создадим такую примесь, передадим в нее 4 параметра: по одному для каждого уголка. Обратите внимание, что первый параметр — это значение радиуса левого верхнего угла, затем правого верхнего и так далее. Получается, что мы «обходим» блок по часовой стрелке.

    Скомпилированный CSS будет следующим.

    На самом деле из двух приведённых выше вариантов кода вы можете использовать второй вариант. Несмотря на то, что он делает все то же самое, что и первый, а его объем больше, он более гибкий в настройке, потому что принимает параметры закругления каждого уголка блока.

    Добавление тени к блоку (box-shadow)

    Далее рассмотрим другое часто используемое правило CSS3: box-shadow. Для корректного применения этого правила необходимо использовать три различных варианта его написания: обычный и с учетом префиксов браузеров. Опять же, гораздо проще передать LESS всю «тяжелую» работу.

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

    После компиляции получим следующий CSS.

    Переходы между двумя состояниями элемента (transition)

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

    Сейчас мы ощутим всю выгоду использования LESS: обратите внимание на длину строки кода, где вызывается примесь (mixin). Теперь не нужно набирать на клавиатуре такой длинный код каждый раз, когда вы будете использовать transition , а код в результате будет тот, который нам нужен.

    CSS-трансформации

    При трансформации объектов с помощью CSS доступны 4 варианта изменения объекта: вращение (rotate), масштабирование (scale), наклон (skew) и сдвиг (translate). Создание и размещение 6 различных вариантов кода – тяжелая работа! В этом случае нас спасет LESS.

    Градиенты

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

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

    2. Фоновый градиент

    Одним из самых неприятных моментов при использовании градиентов в CSS является определение цветов. Иногда вам нужно по-быстрому создать градиент поверх фонового цвета элемента. Это реализуется при помощи следующей примеси.

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

    Отражение (в браузерах webkit)


    Отражения пока еще не самая широко поддерживаемая часть CSS3, поэтому здесь она описывается в большей степени как «информация для общего развития».

    Некоторое время назад я создал урок на эту тему , в котором также описано как добиться интересных эффектов при добавлении градиента к блокам с отражением в браузерах webkit. До сих пор информация из него очень помогает разработчикам.

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

    Цветовые вычисления

    Одной из самых уникальных возможностей LESS и Sass является проведение различных вычислений с цветами. Вы можете взять какой-то один базовый цвет и с помощью LESS автоматически создать целую палитру. Ознакомьтесь с парой примеров.

    1. Комплементарная цветовая схема

    В этом примере мы берем один базовый цвет, а затем при помощи функций spin , lighten и darken подбираем еще 4 цвета, которые вместе образуют палитру отлично сочетающихся цветов. Чтобы сгенерировать комплементарную цветовую схему, нам нужно передать функции spin аргумент со значение 180, что «повернуть» цветовой круг на 180 градусов и добавить несколько цветов, близких к базовому цвету.

    2. Одноцветная (монохроматическая) цветовая схема

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

    Заключение

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

    Основы работы с языком LESS

    Учебник HTML CSS

    Практика

    Продвинутый курс

    Практика

    Адаптив

    Продвинутые вещи

    Практика

    LESS — это так называемый препроцессор CSS, который позволяет программировать на CSS. Да-да, вы не ослышались — программировать: можно вводить переменные, делать циклы и многие другие полезные вещи, которые упрощают работу с CSS.

    Видео про работу с LESS

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

    Полезные ссылки

    Примеры использования LESS

    Ниже я привожу примеры использования LESS, о которых рассказываю в видео, чтобы вам не приходилось каждый раз пересматривать видео в поисках нужной вам вещи (пока без описаний, попозже может быть добавлю). Итак, вот они:

    Пример . Работа с переменными

    Результат выполнения кода:

    Пример . Операции, комментарии

    Результат выполнения кода:

    Пример . Примешивания

    Результат выполнения кода:

    Пример . Функции

    Результат выполнения кода:

    Результат выполнения кода:

    Результат выполнения кода:

    Результат выполнения кода:

    Пример . Вложенные теги

    Результат выполнения кода:

    Пример . Вложенность без пробела

    Результат выполнения кода:

    Пример . Операция +:

    Результат выполнения кода:

    Пример . Операция +_:

    Результат выполнения кода:

    Пример . Вставка блоков кода

    Результат выполнения кода:

    Результат выполнения кода:


    Результат выполнения кода:

    Пример . Функция calc

    Результат выполнения кода:

    Пример . Медиа запросы

    Результат выполнения кода:

    Результат выполнения кода:

    Пример . Условия

    Результат выполнения кода:

    Пример . Циклы

    Результат выполнения кода:

    Результат выполнения кода:

    Пример . Расширение

    Результат выполнения кода:

    Пример . Переменные переменных

    Результат выполнения кода:

    Что вам делать дальше:

    Приступайте к решению задач по следующей ссылке: задачи к уроку.

    Когда все решите — переходите к изучению новой темы.

    Немного о веб-технологиях

    Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

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

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

    Надеюсь информация будет полезна для посетителей.

    10 примеров использования LESS для вашего сайта

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

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

    Об использовании LESS

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

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

    Как этим пользоваться?

    Я предлагаю читателю скопировать весь приведенный в статье код в отдельный файл .less, возможно добавить какие-то свои «штрихи» и создать своего рода LESS шаблон, который затем использовать в своих последующих проектах.

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

    Это позволит вам содержать код вашего проекта в порядке, тем не менее используя мощные примеси (mixins) из шаблона. По завершении работы над проектом, перед выгрузкой его в сеть вы просто скомпилируете весь LESS в обычный CSS, используя такие инструменты как Less.app или CodeKit.

    Если я использую Sass

    Если до настоящего момента вы использовали Sass – нет проблем. Оба этих инструмента – замечательные и я без проблем смог перейти с использования одного на другой. К счастью, оба инструмента очень похожи между собой по синтаксису команд.

    К тому же, есть отличная страничка на GitHub , где сравнивается синтаксис LESS и Sass. С ее помощью вы сможете сделать преобразования кода из LESS в Sass и наоборот за считанные секунды.

    Итак, давайте приступим к делу.

    Закругление уголков у блоков (border-radius)

    CSS-правило border-radius одно из самых основных и часто используемых на данный момент. Овальные уголки у блоков без труда помогут сделать дизайн сайта более привлекательным.

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

    1. Примеси со значением по-умолчанию

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

    Илон Маск рекомендует:  Что такое код gmstrftime

    Первая часть кода, представленного ниже создает примесь(mixin), а во второй мы с легкостью можем вызвать код примеси и добавить закругленные уголки любому элементу, при этом не забывая про поддержку устаревших браузеров. Все, что нам нужно, это написать .border-radius(); и мы получим овальные уголки радиусом 5px (значение по-умолчанию в первом сниппете) со всех 4 сторон блока с учетом префиксов браузера. Если вы захотите поменять радиус, просто введите новое значение внутри круглых скобок.

    После компиляции LESS в CSS мы получим примерно следующий код.

    2. Примесь с параметром — передаем значение border-radius

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

    Сейчас мы создадим такую примесь, передадим в нее 4 параметра: по одному для каждого уголка. Обратите внимание, что первый параметр — это значение радиуса левого верхнего угла, затем правого верхнего и так далее. Получается, что мы «обходим» блок по часовой стрелке.


    Скомпилированный CSS будет следующим.

    На самом деле из двух приведённых выше вариантов кода вы можете использовать второй вариант. Несмотря на то, что он делает все то же самое, что и первый, а его объем больше, он более гибкий в настройке, потому что принимает параметры закругления каждого уголка блока.

    Добавление тени к блоку (box-shadow)

    Далее рассмотрим другое часто используемое правило CSS3: box-shadow. Для корректного применения этого правила необходимо использовать три различных варианта его написания: обычный и с учетом префиксов браузеров. Опять же, гораздо проще передать LESS всю «тяжелую» работу.

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

    После компиляции получим следующий CSS.

    Переходы между двумя состояниями элемента (transition)

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

    Сейчас мы ощутим всю выгоду использования LESS: обратите внимание на длину строки кода, где вызывается примесь (mixin). Теперь не нужно набирать на клавиатуре такой длинный код каждый раз, когда вы будете использовать transition , а код в результате будет тот, который нам нужен.

    CSS-трансформации

    При трансформации объектов с помощью CSS доступны 4 варианта изменения объекта: вращение (rotate), масштабирование (scale), наклон (skew) и сдвиг (translate). Создание и размещение 6 различных вариантов кода – тяжелая работа! В этом случае нас спасет LESS.

    Градиенты

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

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

    2. Фоновый градиент

    Одним из самых неприятных моментов при использовании градиентов в CSS является определение цветов. Иногда вам нужно по-быстрому создать градиент поверх фонового цвета элемента. Это реализуется при помощи следующей примеси.

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

    Отражение (в браузерах webkit)

    Отражения пока еще не самая широко поддерживаемая часть CSS3, поэтому здесь она описывается в большей степени как «информация для общего развития».

    Некоторое время назад я создал урок на эту тему , в котором также описано как добиться интересных эффектов при добавлении градиента к блокам с отражением в браузерах webkit. До сих пор информация из него очень помогает разработчикам.

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

    Цветовые вычисления

    Одной из самых уникальных возможностей LESS и Sass является проведение различных вычислений с цветами. Вы можете взять какой-то один базовый цвет и с помощью LESS автоматически создать целую палитру. Ознакомьтесь с парой примеров.

    1. Комплементарная цветовая схема

    В этом примере мы берем один базовый цвет, а затем при помощи функций spin , lighten и darken подбираем еще 4 цвета, которые вместе образуют палитру отлично сочетающихся цветов. Чтобы сгенерировать комплементарную цветовую схему, нам нужно передать функции spin аргумент со значение 180, что «повернуть» цветовой круг на 180 градусов и добавить несколько цветов, близких к базовому цвету.

    2. Одноцветная (монохроматическая) цветовая схема

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

    Заключение

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

    Почему стоит
    использовать LESS при верстке сайта?

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

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

    Результаты меня очень порадовали! LESS это великолепно! Задача решилась слишком даже легко: ранее, чтобы добавить возможность смены цвета для всего шаблона, писался отдельный многострочный .css файл где шли соответствующие замены и т.д. А с использованием LESS, задача решилась в 5 строк) Я задавал основные цвета на которые хочу менять цвет, и просто запускал цикл в ходе которого, весь этот мусорный код генерируется сам, без участия пальцев.

    Что нужно знать о LESS?
    Во первых, LESS это Великолепно!

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

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

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

    И далее по всему коду, к этим переменным можно обращаться постоянно. Захочется изменить какой-то цвет? Не нужно будет лазить по всему .css файлу, а достаточно заменить одну строчку.

    Стоит отметить так же и наследование классов. Каждый раз когда стили элементов повторяются на странице, например в CSS делается что? Правильно тупое копирование одинаковых участков кода. А что позволяет LESS? Здесь основные стили можно вынести в классы, а далее присваивать их к нужным элементам.

    Это восхитительно!) Прямо так и хочется произнести хвалебные речи, во имя LESS кода или, даже угостить чем-нибудь крепким, с блек-джеком и самками распутного поведения.

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

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

    Ладно,
    итак что нужно чтобы начать пользоваться LESS?

    1. создать файл с именем типа template.less
    2. подключить его в хедере страницы:
    3. подключить в хедере js файл:

    Для начала, вполне сойдет.

    А вот несколько сервисов, которые за полторы секунды превратят старый и грязный CSS в более приятное и покорное LESS.

    Естественно, что на рабочих проектах использовать LESS не стоит, для лучшей производительности нужно использовать компиляторы в чистый CSS, например:

    Ну а на modx revolution, стоит воспользоваться замечательным компонентом MinifyX.

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

    Комментарии

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

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

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

    Базовый синтаксис

    Препроцессор Less поддерживает несколько синтаксисов написания комментариев. Самый очевидный — это стандартный для CSS синтаксис. Если отключена минификация (компрессия, сжатие) кода, то такие комментарии, содержащиеся между /* */ , будут сохраняться в CSS-файле после компиляции. Поэтому используйте такой вид комментариев с умом.

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

    Особые комментарии

    Иногда требуется сохранить какие-то комментарии после компиляции и даже минификации кода. Такой подход чаще всего используется для включения в файл информации о лицензии, авторских правах, версии библиотеки и прочих важных сообщений. Как и в CSS для этого используются комментарии, заключённые в /*! */ .

    Также допустима запись /*! !*/ , но она считается избыточной и применяется крайне редко, если вообще применяется.

    Вложенные комментарии

    К сожалению, вкладывать комментарии в комментарии, как и CSS, Less не умеет. Однако, допустимо смешивать комментарии, заключённые в /* */ и однострочные комментарии, начинающиеся с // .

    Можно попытаться вложить комментарии и наоборот:

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

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL