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


Содержание

Less\Sass → LESS краткий учебник

Less — это CSS препроцессор, который расширяет язык CSS поддержкой:

  • переменных
  • примесей (миксинов, mixins)
  • вложенных правил
  • функций и операторов
  • возможностью импортирования
  • возможностью использовать JavaScript в CSS

Переменные LESS

Переменные позволяют определить значение (например цвета) в одном месте и повторно использовать его в дальнейшем. Переменные в LESS начинаются с символа @. Пример переменных:

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

Примеси LESS

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

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

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

Переменная @arguments имеет специальное значение внутри примесей, она содержит все передаваемые при вызове аргументы. Это полезно, когда нужно использовать переданы параметры все вместе.

Можно использовать троеточие . если примесь будет иметь переменное количество аргументов. Если указать троеточие после переменной, то все аргументы будут внесены в эту переменную. Переменная @rest , применение:

Примеси можно перегружать (изменять поведение в зависимости от переданных аргументов):

А также изменять поведение примеси, основываясь на входящих параметрах.

Примеси с условиями в LESS

Примеси с условиями декларируются в стиле спецификации @media query:

В LESS есть вcтроенные функции для проверки типа значения. Их можно применять в условиях примесей для проверки типа переданного параметра: iscolor , isnumber , isstring , iskeyword , isurl .

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

Они позволяют избавиться от дублирования одинаковых названий в коде и делают его более структурированным. В результате кода становится меньше и он повторяет структуру дерева DOM.

Группировка и расширение правил

Специальный псевдокласс :extend() позволяет производить группировку селекторов за счет перечисления нескольких классов в одном месте (объединение через запятую , ), при условии, что все эти селекторы имеют общие свойства.

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

Логичнее их записать так:

Less предлагает такое решение, он говорит нам, что нужно объявить лишь одни селектор, а других заставить расширить его, для этого используется псевдокласс :extend() .

На выходе мы получим всё тот же CSS, который и получили при ручной оптимизации + расширенный класс .main:

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

В завершение, пример прибавления свойства через запятую:

Прибавление свойства через пробел:

Операции в LESS

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

Пространство имен в LESS

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

Импорт в LESS

После импорта все переменные и примеси станут доступными в файле, в который они импортируются.

Существуют следующие опции директивы @input:

  • reference : использовать less-файлы, но не выводить содержимое до тех пор, пока оно не будет явно вызвано. Используется в случае, если нужно использовать определённый селектор, а остальное содержимое файла не нужно.
  • inline : подключить внешний файл, но без обработки компилятором. Пригодится если в подключаемом файле присутствуют не экранированные инструкции которые нужно просто включить а не пытаться обработать (что вызовет ошибку)
  • less : рассматривать подключаемый файл как less-файл, не зависимо от расширения
  • css : рассматривать подключаемый файл как css-файл, не зависимо от расширения
  • once : запрещает многократное подключение файла (поведение по умолчанию)
  • multiple : разрешает многократное подключение файла
  • optional : продолжать компиляцию, даже если файл не найден (без вывода ошибок компилятором)

CSS-файлы импортируются, но компилятором не обрабатываются.

Избежать повторного импортирования одного и того самого файла можно также с помощью инструкции @import-once .

@import (once) — является поведением по умолчанию для @import с версии Less 1.4.0

Циклы в LESS

В Less примеси могут вызывать сами себя. Пример простого цикла в Less:

Пример использования цикла в Less для генерации сетки:

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

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

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

Суффикс less в английском языке и его значение

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

Например, вам необходимо применить в речи слово «беззаботный». Вы не знаете английский эквивалент, но помните слово «забота» — «care». Оно является существительным, то есть можно смело добавлять к care суффикс с отрицательным значением и получится то, что нужно – «careless» (в переводе «беззаботный»). Научитесь применять суффикс less в английском языке, и вам не придётся лишний раз заглядывать в словарь.

Английские слова с суффиксом less. Примеры

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

Overview

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.

Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.

  • For detailed documentation on Less language features, see Features
  • For a list of Less Built-in functions, see Functions
  • For detailed usage instructions, see Using Less.js
  • For third-party tools for Less, see Tools


What does Less add to CSS? Here’s a quick overview of features.

Variables

These are pretty self-explanatory:

Mixins

Mixins are a way of including («mixing in») a bunch of properties from one rule-set into another rule-set. So say we have the following class:

And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:

The properties of the .bordered class will now appear in both #menu a and .post a . (Note that you can also use #ids as mixins.)

Nesting

Less gives you the ability to use nesting instead of, or in combination with cascading. Let’s say we have the following CSS:

In Less, we can also write it this way:

The resulting code is more concise, and mimics the structure of your HTML.

You can also bundle pseudo-selectors with your mixins using this method. Here’s the classic clearfix hack, rewritten as a mixin ( & represents the current selector parent):

Nested At-Rules and Bubbling

At-rules such as @media or @supports can be nested in the same way as selectors. The at-rule is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.

Operations

Arithmetical operations + , — , * , / can operate on any number, color or variable. If it is possible, mathematical operations take units into account and convert numbers before adding, subtracting or comparing them. The result has leftmost explicitly stated unit type. If the conversion is impossible or not meaningful, units are ignored. Example of impossible conversion: px to cm or rad to %.

Multiplication and division do not convert numbers. It would not be meaningful in most cases — a length multiplied by a length gives an area and css does not support specifying areas. Less will operate on numbers as they are and assign explicitly stated unit type to the result.

You can also do arithmetic on colors:

However, you may find Less’s Color Functions more useful.

calc() exception

For CSS compatibility, calc() does not evaluate math expressions, but will evaluate variables and math in nested functions.

Escaping

Escaping allows you to use any arbitrary string as property or variable value. Anything inside

‘anything’ is used as is with no changes except interpolation.

Цукерберг рекомендует:  Верстка - Ищу Frontend разработчика на Laravel

Note, as of Less 3.5, you can simply write:

In 3.5+, many cases previously requiring «quote-escaping» are not needed.

Functions

Less provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.

Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:

Namespaces and Accessors

Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less. Say you want to bundle some mixins and variables under #bundle , for later reuse or distributing:

Now if we want to mixin the .button class in our #header a , we can do:

Note: append () to your namespace (e.g. #bundle() ) if you don’t want it to appear in your CSS output i.e. #bundle .tab .

As of Less 3.5, you can also use mixins and rulesets as maps of values.

This outputs, as expected:

Scope

Scope in Less is very similar to that of CSS. Variables and mixins are first looked for locally, and if they aren’t found, it’s inherited from the «parent» scope.

Like CSS custom properties, mixin and variable definitions do not have to be placed before a line where they are referenced. So the following Less code is identical to the previous example:

Comments

Both block-style and inline comments may be used:

Importing

Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for .less files.

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.

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

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы 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 — Использование 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 сетки.

В чем разница между fewer и less?

Слова fewer и less переводятся как «меньше». Оба этих слова мы используем, когда говорим о сравнении чего-то/кого-то. Однако разница в их употреблении есть.

В статье я расскажу, как не запутаться в этих словах.

Fewer

Произношение и перевод:
Fewer [ ˈfjuːə ] / [фйюэ] – меньше

Значение слова:
Более маленькое количество

Употребление:
Мы используем слово fewer, когда говорим о меньшем количестве чего-то, что можем посчитать (книги, машины, люди). Например: Сегодня утром меньше машин на дороге, чем вчера.

She has fewer friends than Kate.
У нее меньше друзей, чем у Кейт.

Fewer people come here every year.
Каждый год сюда приезжает меньше людей.

Произношение и перевод:
Less [ les ] / [лэс] – меньше

Значение слова:
В меньше степени

Употребление:
Мы используем слово less, когда говорим о меньшем количестве чего-то, что не можем посчитать (работа, вода, время). Например: Он потратил меньше денег в этот раз.

Примечание: Почему слово «деньги» являются чем-то, что мы не можем посчитать? Ведь мы можем легко посчитать деньги, которые у нас есть. Но разве мы говорим «одни деньги, вторые деньги, третьи деньги»? Нет, мы считаем рубли/доллары/евро: один рубль, два рубля и т.д.

Поэтому само слово «деньги» является неисчисляемым. Такой логики вы должны придерживаться каждый раз, когда определяете можем ли мы посчитать что-то или нет.


The doctor advised him to work less.
Врач советует ему меньше работать.

He is less patient than his sister.
Он менее терпеливый, чем его сестра.

В чем разница?

Слово fewer мы используем, когда говорим о меньшем количестве чего-то, что можем посчитать. Например: Он купил меньше книг, чем я.

Слово less мы используем, когда говорим о меньшем количестве чего-то, что не можем посчитать. Например: Ему нужно меньше ездить на машине и больше ходить пешком.

Упражнение на закрепление

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

1. Она съела ___ еды, чем он.
2. На собрание пришло ___ людей, чем на прошлой неделе.
3. У нее ___ ошибок, чем у меня.
4. Он зарабатывает ___ денег, чем его жена.
5. Они сделали ___ работы, чем я.
6. Она купили ___ игрушек, чем ее сестре.

Препроцессор 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

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

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

Цукерберг рекомендует:  Как создать управляемую клавиатурой систему навигации по сайту с помощью jQuery

.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, least

    This year we had less rain than last year. — В этом году было меньше дождей, чем в прошлом.

    Less books are published in that language nowadays — Теперь на этом языке публикуется меньше книг.

    John always does the least work about the house. — Джон всегда меньше всех делает по хозяйству.

    The least distance between two walls was 2 metres — Наименьшее расстояние между двумя стенами равнялось 2 метрам.


    Mary is the least of my worries. — Мэри заботит меня в последнюю очередь.

    I told her I had not given him the least occasion to think I wanted it. — Я сказал ей, что не подал ему ни малейшего повода думать, что я этого хочу.

    «Where’s your brother?» — «I haven’t got the least idea». — «Где твой брат?» — «Понятия не имею».

    Do you think that she has the least chance of success? — Ты думаешь, у нее есть хоть малейший шанс на успех?

    — О различиях в употреблении little и few см. little / few

    English-Russian grammar dictionary . 2014 .

    Смотреть что такое «less, least» в других словарях:

    least — [ list ] function word *** Least is the superlative form of little and can be used in the following ways: as a determiner (followed by an uncountable noun): He generally takes the path of least resistance. (after the ): These farming methods… … Usage of the words and phrases in modern English

    Least Developed Countries — (LDCs or Fourth World countries) are countries which according to the United Nations exhibit the lowest indicators of socioeconomic development, with the lowest Human Development Index ratings of all countries in the world. A country is… … Wikipedia

    least, less, lest — Least is the superlative degree of little; less is the comparative: Toby has less money that I have; in fact, she has the least money of any girl in our group. Both least and less always refer to amount, size, or importance: less value, least… … Dictionary of problem words and expressions

    Least — (l[=e]st), a. [OE. last, lest, AS. l[=ae]sast, l[=ae]sest, superl. of l[=ae]ssa less. See , a.] [Used as the superlative of little.] Smallest, either in size or degree; shortest; lowest; most unimportant; as, the least insect; the least… … The Collaborative International Dictionary of English

    Least squares — Least Least (l[=e]st), a. [OE. last, lest, AS. l[=ae]sast, l[=ae]sest, superl. of l[=ae]ssa less. See , a.] [Used as the superlative of little.] Smallest, either in size or degree; shortest; lowest; most unimportant; as, the least insect;… … The Collaborative International Dictionary of English

    Least weasel — Temporal range: Late Pleistocene–Recent M >Wikipedia

    Least-squares spectral analysis — (LSSA) is a method of estimating a frequency spectrum, based on a least squares fit of sinuso >Wikipedia

    least — ► DETERMINER & PRONOUN (usu. the least) ▪ smallest in amount, extent, or significance. ► ADJECTIVE ▪ used in names of very small animals and plants: least shrew. ► ADVERB ▪ to the smallest extent or degree. ● at least Cf. ↑ … English terms dictionary

    Less-lethal weapon — Less lethal weapons, less than lethal weapons, non lethal weapons, non deadly weapons, or, more recently, compliance weapons are weapons intended to be unlikely to kill or to cause great bodily injury to a living target. In the past, police (or… … Wikipedia

    least — 1. Least of all means ‘especially not’ and should only be used in negative contexts: • I am not going to try to play the role of prophet, least of all Jeremiah Listener, 1973. 2. Use less, not least, when contrasting two things: • The latter… … Modern English usage

    least — [lēst] adj. [ME lest < OE læsest, læst, superl. of læssa, LESS] 1. alt. superl. of LITTLE 2. smallest or slightest in size, degree, importance, etc. [the least movement] 3. Biol. very small: used in names of species or varieties [least… … English World dictionary

    Разница в использовании fewer и less в английском языке

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

    The more you say, the less people remember. The fewer the words, the greater the profit..

    Случаи употребления fewer и less

    Итак, fewer это сравнительная степень прилагательного few. Используется с исчисляемыми существительными, то есть, которые можно посчитать (e.g. one cat — two cats) и переводится как «мало».

    Less это сравнительная степень прилагательного little. Используется, главным образом, с неисчисляемыми существительными (e.g. water, sand, money) и переводится также – «мало».

    • A secretary makes less money than CEO.
    • There were fewer tomatoes in the basket than we had hoped.
    • We went to the countryside at every weekend, but now we have less time for this.
    • Billy has fewer toys than his older brother.

    Less также может использоваться перед существительными во множественном числе (неформальная речь), хотя это не типично.

    • Now I’ve got fewer tasks than I used to have.
    • Now I’ve got less tasks than I used to have.

    Less и fewer используются с предлогом of перед детерминативами (the, my, this, etc.) и местоимениями (her, us, it).

    • Each year there are fewer of good students at the drama classes.
    • Did he drink half the milk? – No, he drank less of it.
    • I wish my brother spent less of his time playing computer games.

    Предлог of не используется перед существительными без детерминатива.

    • If you want to be healthy, you should eat less sweets and pasta and do some yoga.
    • Mark won fewer prizes than his opponent.

    Less и fewer могут существовать сами по себе, то есть без существительного, если смысл понятен или стоит в роли неопределенных местоимений.

    • If you practice less, you will improve less.
    • Have you bought 5 dresses? — No, I have bought fewer/less.
    • He often eats less than enough.

    Я очень надеюсь, что помогла вам разобраться когда правильно использовать fewer и less в английском.

    20 читателей блога сейчас выбирают себе тьютора, чтобы общаться уверенно

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

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

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

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

    Препроцессоры. Быстрый старт

    Изучите азы работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

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

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

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

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

    Операции

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

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

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

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

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