Less — Less миксины для email


Содержание

Эффективное использование mixin в LESS

Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS.

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

Для меня использование CSS3 уже не является каким-то ноу-хау. За пару лет практически во всех (пламенный привет IE) браузерах внедрили поддержку, если не всех, то очень многих свойств, присутствующих в CSS3.

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

Градиент

Задаем линейный градиент для элемента:

Box-shadow

Добавляем тень к элементу. Добавлять тень можно внешнюю и внутреннюю. Если @insert задать значение true , то элементу задается внутреняя тень.

Text-shadow

Добавляем тень к тексту:

Border-radius

Задаем радиус скругления элемента:

Column

@count — определяет количество колонок в многоколоночном тексте, а @gap задаёт расстояние между колонками.

Transition

Устанавливаем эффект перехода между двумя состояниями элемента (например обычным состоянием и :hover ):

Transform

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

Opacity

Задаем прозрачность элементу:

Box sizing

Свойство применяется для изменения алгоритма расчета ширины и высоты элемента.

Добавление префиксов поставщиков с помощью LESS mixin

Я получаю синтаксическую ошибку для этого микса:

Любой способ сделать это, или переменные mixin должны находиться в правой части : ?

mixins less less-mixins

3 ответа

Так как Less v2 вы можете использовать плагин autoprefix для префикса своих свойств, что, по-видимому, является лучшей альтернативой. Плагин autoprefix добавляет префиксы браузера, используя постпроцессор autoprefixer. Для компиляции на стороне клиента (в браузере) вы можете использовать — prefixfree.

Как уже упоминалось в @ScottS здесь, вы можете использовать переменную интерполяцию в селекторах с Less v1.6, которая позволяет вам делать:

Это хромой ответ, но я не думаю, что это возможно.

Нет способа сделать это, но есть обходные пути. Если это сработает, я думаю, что это будет примерно так:

Примечание: это не работает.

Возможно, вы сможете использовать эту библиотеку: less-properties

Less — Less миксины для email

We recommend upgrading to the latest Google Chrome or Firefox.

Join GitHub today

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

less-docs / content / features / mixins-parametric.md

How to pass arguments to mixins

Mixins can also take arguments, which are variables passed to the block of selectors when it is mixed in.

And here’s how we can mix it into various rulesets:

Parametric mixins can also have default values for their parameters:

We can invoke it like this now:

And it will include a 5px border-radius.

You can also use parametric mixins which don’t take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets:

Which would output:

Mixins with Multiple Parameters

Parameters are either semicolon or comma separated. It is recommended to use semicolon. The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or css list separator.

Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists:

  • two arguments and each contains comma separated list: .name(1, 2, 3; something, else) ,
  • three arguments and each contains one number: .name(1, 2, 3) ,
  • use dummy semicolon to create mixin call with one argument containing comma separated css list: .name(1, 2, 3;) ,
  • comma separated default value: .name(@param1: red, blue;) .

It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. If you used the mixin with one parameter e.g. .mixin(green); , then properties of all mixins with exactly one mandatory parameter will be used:

A mixin reference can supply parameters values by their names instead of just positions. Any parameter can be referenced by its name and they do not have to be in any special order:

The @arguments Variable

@arguments has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful if you don’t want to deal with individual parameters:

Which results in:

Advanced Arguments and the @rest Variable

You can use . if you want your mixin to take a variable number of arguments. Using this after a variable name will assign those arguments to the variable.

Sometimes, you may want to change the behavior of a mixin, based on the parameters you pass to it. Let’s start with something basic:

Now let’s say we want .mixin to behave differently, based on the value of @switch , we could define .mixin as such:

We will get the following CSS:

Where the color passed to .mixin was lightened. If the value of @switch was dark , the result would be a darker color.

Here’s what happened:

  • The first mixin definition didn’t match because it expected dark as the first argument.
  • The second mixin definition matched, because it expected light .
  • The third mixin definition matched because it expected any value.

Only mixin definitions which matched were used. Variables match and bind to any value. Anything other than a variable matches only with a value equal to itself.

We can also match on arity, here’s an example:


Now if we call .mixin with a single argument, we will get the output of the first definition, but if we call it with two arguments, we will get the second definition, namely @a faded to @b .

Mixin using LESS

I’m reading the LESS official documentation (version 1.5) but I cannot understand how to import a reference to another CSS in order to use its content in my own file. For example:

It shows this error: NameError: .label-success is undefined

Perhaps I misunderstand the documentation?

1 Answer 1

You can only use reference with other LESS files. You cannot mix and match LESS and CSS files with that method.

If you need to use the mixins from Bootstrap, grab the Bootstrap LESS files.

Update: You can also specify the reference type, which should work for what you need:

Полезные свойства Less на практике

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

1. Родительские селекторы (Parents Selectors “&”)
Оператор (&) представляет родительские селекторы вложенного правила и наиболее часто используется при применении класса модификации или псевдо-класса к существующим селекторам.

2. Более интересный пример. В данном примере, мы создаем посредством оператора — & новые классы, не повторяя себя и не усложняя код.

3. Множественно использование родительских селекторов. В данном примере с помощью вариативного использования селектора и оператора & мы получаем в компилированном коде — 4 разных селектора.

4. Множественно использование родительских селекторов в каскаде. Здесь стоит обратить внимание на последовательность и степень вложенности родительских селекторов при использовании оператора &.

5. В данном примере меняем очередность вызова оператора & в каскаде.

6. Комбинированное использование оператора родительских элементов. Если мы используем оператор & в каскаде со знаком +, тогда в компилированном коде получим все возможные комбинации родительских селекторов (в данном случае 2 селектора умножаются друг на друга и получаем максимальную комбинацию — 4).

7. Данный пример аналогичен предыдущему, но вместо двух селекторов, для более детального изучения используем 5 селекторов, и в компилированном коде получим 25 всевозможных комбинаций данных селекторов.

2. Охранники (Mixin Guards)

В Less нет условий, но есть охранники (guards). Они используются для того, чтобы выполнить разные объявления одного миксина в зависимости от разных условий.

1. Данный пример хорошо иллюстрирует возможности и надобности использования гардов. Мы используем миксин и в аргументах указываем переменную, далее гарды определяют какой именно миксин, будет отрабатывать на нашей переменной. Наглядно ниже пример с “color”.

2. В данном примере мы используем 2 миксина с гардами. Первый используется для совместного использования transition + transform, второй миксин используется когда мы объявляем только один transition без каких либо параметров transform. Более наглядно в примере.

3. Стоит отметить что гарды работают не только с ключом when. Также гарды понимают операторы сравнения (Guard comparison operators):

Mixin в LESS бывают разные

Миксы достаточно универсальны. В простом варианте — это готовый набор css-правил. В более сложном случае — это параметизированные примеси, по сути — функции. Для новичков не сразу понятна разница, хотя они имеют принципиальные отличия: первый вариант по сути copy-paste. Второй — функция, принимающая аргументы и имеющая более сложный алогритм вывода.

Рассмотрим основные отличия этих видов.

Copy-Paste

Простые миксы выводятся так, как они заданы.

То есть для H1 пропишется всё, что указано в .border_radius. С практической точки зрения микс предназначен только для быстрой вставки различных «заготовок» css-классов.

Недостатки простых миксов

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

Предыдущий пример приведёт вот к такому результату:

То есть вначале вывелся сам микс (компилятор посчитал его обычным css-правилом), а после еще раз, но уже как функция-микс.

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

Микс как функция

Чтобы микс стал функцией при его написании нужно указать скобки. Сравним два примера.

То есть мы получили и .border_radius и h1. Добавим в микс скобки.

Остался только h1, а класс .border_radius исчез из конечного результата.

Наборы правил для множества тэгов

Пусть у нас есть некий HTML-каркас для какого-либо своего блока шаблона. Это может быть слайдер, меню, виджет или какая-то заготовка из предопределенных тэг.class. При верстке очень часто встречаются такие блоки, где часть css-правил кочует от шаблона к шаблону.

Скажем плагин облака рубрик имеет такие стили:

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

То есть в миксе можно указывать сколько угодно вложенных правил.

Этот подход можно использовать для решения задач, где есть уже какие-то предопределённые условия. Например можно придумать набор правил для модульной сетки сайта. Мы знаем, что сетка задаётся в main.php и содержит фиксированный HTML для базовых div-блоков. Один микс может выводить сетку для левого сайдбара, второй — правого. Как-то так:

Сравнение вёрстки css-фреймворком и less

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

Удобно ли это? Вряд ли. Тем более, есть такой HTML-код, к которому добраться будет проблематично. Например в MaxSite CMS type-файлы имеют своё именование и каждый раз менять, да еще и поддерживать правки при каждом обновлении системы. Бр-р-р-р-р.

С LESS подход диаметрально противоположный. Есть произвольные HTML-тэги. В less-файле подготавливаются миксы и подставляются под нужный тэг. Нет никакой необходимости лезть в исходные HTML-файлы — вся вёрстка целиком перемещается в less-файл. Удобно? Однозначно!

Миксы в миксах

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

Видно, что в нём микс в миксе. Для вызова такого микса следует использовать символ « > ».

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

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

Аргументы миксов

Аргументы превращают миксы в полноценные функции. Думаю, нет смысла рассказывать об основах переменных и аргументах, поскольку это азы LESS, но вот остановиться на некоторых нюансах стоит.

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

Цукерберг рекомендует:  Трудоустройство - Golang

Какого цвета будет H1? Зеленый. Потому что получится вот такой css-код:

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

Это сработали второй и третий миксы.

Далее. У миксов в аргументах можно не указывать переменные. Это несколько непривычно и называется «совпадение с шаблоном». Например есть два микса .sibebar, один из них размещает сайдбар слева, другой справа.

Для левого сайдбара используем:

В данном примере left и right, переключатели, согласно которым будет срабатывать тот или иной микс. Причем отмечу, что «переключатель» может свободно комбинироваться с другими аргументами, например так:

А по-русски можно?

Можно! Об этом знают даже не все опытные верстальщики. В LESS нет жестких правил именования! Посмотрите несколько примеров.

А вот с переменными придется задавать строго с «@» и по-англиский. Ругается компилятор. :blank:

Так что при желании можно верстать и «по-русски». :lol: Ну или как минимум убрать ведущие точки в именах миксов. :coolsmirk:


Overview

An in-depth guide to features of the LESS language. See the Overview for a quick summary of Less.

For an in-depth guide to installing and setting up a Less environment, as well as documentation on developing for Less, see: Using Less.js.

Variables

Control commonly used values in a single location.

Overview

It’s not uncommon to see the same value repeated dozens if not hundreds of times across your stylesheets:

Variables make your code easier to maintain by giving you a way to control those values from a single location:

Variable Interpolation

The examples above focused on using variables to control values in CSS rules, but they can also be used in other places as well, such as selector names, property names, URLs and @import statements.

Selectors

Import Statements

Syntax: @import «@/tidal-wave.less»;

Note that before v2.0.0, only variables which have been declared in the root or current scope were considered and that only the current file and calling files were considered when looking for a variable.

Properties

Variable Variables

In Less, you can define a variable’s name using another variable.

Which compiles to:

Lazy Evaluation

Variables do not have to be declared before being used.

Valid Less snippet:

this is valid Less too:

both compile into:

When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards. This is similar to css itself where the last property inside a definition is used to determine the value.

Essentially, each scope has a «final» value, similar to properties in the browser, like this example using custom properties:

This means that, unlike other CSS pre-processing languages, Less variables behave very much like CSS’s.

Properties as Variables (NEW!)

You can easily treat properties like variables using the $prop syntax. Sometimes this can make your code a little lighter.

Note that, like variables, Less will choose the last property within the current/parent scope as being the «final» value.

Default Variables

We sometimes get requests for default variables — an ability to set a variable only if it is not already set. This feature is not required because you can easily override a variable by putting the definition afterwards.

This works fine because of Lazy Loading — @base-color is overridden and @dark-color is a dark red.

Parent Selectors

Referencing parent selectors with &

The & operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector:

Notice that without the & , the above example would result in a :hover rule (a descendant selector that matches hovered elements inside of tags) and this is not what we typically would want with the nested :hover .

The «parent selectors» operator has a variety of uses. Basically any time you need the selectors of the nested rules to be combined in other ways than the default. For example another typical use of the & is to produce repetitive class names:

Multiple &

& may appear more than once within a selector. This makes it possible to repeatedly refer to a parent selector without repeating its name.

Note that & represents all parent selectors (not just the nearest ancestor) so the following example:

Changing Selector Order

It can be useful to prepend a selector to the inherited (parent) selectors. This can be done by putting the & after current selector. For example, when using Modernizr, you might want to specify different rules based on supported features:

The selector .no-borderradius & will prepend .no-borderradius to its parent .header .menu to form the .no-borderradius .header .menu on output:

Combinatorial Explosion

& can also be used to generate every possible permutation of selectors in a comma separated list:

This expands to all possible (16) combinations of the specified elements:

Extend

Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references.

In the rule set above, the :extend selector will apply the «extending selector» ( nav ul ) onto the .inline class wherever the .inline class appears. The declaration block will be kept as-is, but without any reference to the extend (because extend isn’t css).

So the following:

Notice how the nav ul:extend(.inline) selector gets output as nav ul — the extend gets removed before output and the selector block left as-is. If no properties are put in that block then it gets removed from the output (but the extend still may affect other selectors).

Extend Syntax

The extend is either attached to a selector or placed into a ruleset. It looks like a pseudo-class with selector parameter optionally followed by the keyword all :

It can contain one or more classes to extend, separated by commas.

Extend Attached to Selector

Extend attached to a selector looks like an ordinary pseudo-class with selector as a parameter. A selector can contain multiple extend clauses, but all extends must be at the end of the selector.

  • Extend after the selector: pre:hover:extend(div pre) .
  • Space between selector and extend is allowed: pre:hover :extend(div pre) .
  • Multiple extends are allowed: pre:hover:extend(div pre):extend(.bucket tr) — Note this is the same as pre:hover:extend(div pre, .bucket tr)
  • This is NOT allowed: pre:hover:extend(div pre).nth-child(odd) . Extend must be last.

If a ruleset contains multiple selectors, any of them can have the extend keyword. Multiple selectors with extend in one ruleset:

Extend Inside Ruleset

Extend can be placed into a ruleset’s body using &:extend(selector) syntax. Placing extend into a body is a shortcut for placing it into every single selector of that ruleset.

Extend inside a body:

is exactly the same as adding an extend after each selector:

Extending Nested Selectors

Extend is able to match nested selectors. Following less:

Essentially the extend looks at the compiled css, not the original less.

Exact Matching with Extend


Extend by default looks for exact match between selectors. It does matter whether selector uses leading star or not. It does not matter that two nth-expressions have the same meaning, they need to have to same form in order to be matched. The only exception are quotes in attribute selector, less knows they have the same meaning and matches them.

Leading star does matter. Selectors *.class and .class are equivalent, but extend will not match them:

Order of pseudo-classes does matter. Selectors link:hover:visited and link:visited:hover match the same set of elements, but extend treats them as different:

nth Expression

Nth expression form does matter. Nth-expressions 1n+3 and n+3 are equivalent, but extend will not match them:

Quote type in attribute selector does not matter. All of the following are equivalent.

Extend «all»

When you specify the all keyword last in an extend argument it tells Less to match that selector as part of another selector. The selector will be copied and the matched part of the selector only will then be replaced with the extend, making a new selector.

You can think of this mode of operation as essentially doing a non-destructive search and replace.

Selector Interpolation with Extend

Extend is not able to match selectors with variables. If selector contains variable, extend will ignore it.

However, extend can be attached to interpolated selector.

Selector with variable will not be matched:

and extend with variable in target selector matches nothing:

Both of the above examples compile into:

However, :extend attached to an interpolated selector works:

Scoping / Extend Inside @media

Currently, an :extend inside a @media declaration will only match selectors inside the same media declaration:

Note: extending does not match selectors inside a nested @media declaration:

This compiles into:

Top level extend matches everything including selectors inside nested media:

Duplication Detection

Currently there is no duplication detection.

Use Cases for Extend

Classic Use Case

The classic use case is to avoid adding a base class. For example, if you have

and you want to have a subtype of animal which overrides the background color then you have two options, firstly change your HTML

or have simplified html and use extend in your less. e.g.

Reducing CSS Size

Mixins copy all of the properties into a selector, which can lead to unnecessary duplication. Therefore you can use extends instead of mixins to move the selector up to the properties you wish to use, which leads to less CSS being generated.

Example — with mixin:

Example (with extends):

Combining Styles / A More Advanced Mixin

Another use-case is as an alternative for a mixin — because mixins can only be used with simple selectors, if you have two different blocks of html, but need to apply the same styles to both you can use extends to relate two areas.

Merge

The merge feature allows for aggregating values from multiple properties into a comma or space separated list under a single property. merge is useful for properties such as background and transform.

Comma

Append property value with comma

Space

Append property value with space

To avoid any unintentional joins, merge requires an explicit + or +_ flag on each join pending declaration.

Mixins

«mix-in» properties from existing styles

You can mix-in class selectors and id selectors, e.g.

which results in:

Currently and historically, the parentheses in a mixin call are optional, but optional parentheses are deprecated and will be required in a future release.

Not Outputting the Mixin

If you want to create a mixin but you do not want that mixin to be in your CSS output, put parentheses after the mixin definition.

Selectors in Mixins

Mixins can contain more than just properties, they can contain selectors too.

Namespaces

If you want to mixin properties inside a more complicated selector, you can stack up multiple id’s or classes.

Both > and whitespace are optional

Namespacing your mixins like reduces conflict with other library mixins or user mixins, but it can also be a way to «organize» groups of mixins.

Guarded Namespaces

If a namespace has a guard, mixins defined by it are used only if the guard condition returns true. A namespace guard is evaluated exactly the same way as a guard on mixin, so the following two mixins work the same way:

The default function is assumed to have the same value for all nested namespaces and mixin. Following mixin is never evaluated, one of its guards is guaranteed to be false:

The !important keyword

Use the !important keyword after mixin call to mark all properties inherited by it as !important :

Parametric Mixins

How to pass arguments to mixins

Mixins can also take arguments, which are variables passed to the block of selectors when it is mixed in.

And here’s how we can mix it into various rulesets:

Parametric mixins can also have default values for their parameters:

We can invoke it like this now:

And it will include a 5px border-radius.

You can also use parametric mixins which don’t take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets:


Which would output:

Mixins with Multiple Parameters

Parameters are either semicolon or comma separated. It is recommended to use semicolon. The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or css list separator.

Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists:

  • two arguments and each contains comma separated list: .name(1, 2, 3; something, else) ,
  • three arguments and each contains one number: .name(1, 2, 3) ,
  • use dummy semicolon to create mixin call with one argument containing comma separated css list: .name(1, 2, 3;) ,
  • comma separated default value: .name(@param1: red, blue;) .

It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. If you used the mixin with one parameter e.g. .mixin(green); , then properties of all mixins with exactly one mandatory parameter will be used:

Named Parameters

A mixin reference can supply parameters values by their names instead of just positions. Any parameter can be referenced by its name and they do not have to be in any special order:

The @arguments Variable

@arguments has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful if you don’t want to deal with individual parameters:

Which results in:

Advanced Arguments and the @rest Variable

You can use . if you want your mixin to take a variable number of arguments. Using this after a variable name will assign those arguments to the variable.

Pattern-matching

Sometimes, you may want to change the behavior of a mixin, based on the parameters you pass to it. Let’s start with something basic:

Now let’s say we want .mixin to behave differently, based on the value of @switch , we could define .mixin as such:

We will get the following CSS:

Where the color passed to .mixin was lightened. If the value of @switch was dark , the result would be a darker color.

Here’s what happened:

  • The first mixin definition didn’t match because it expected dark as the first argument.
  • The second mixin definition matched, because it expected light .
  • The third mixin definition matched because it expected any value.
Цукерберг рекомендует:  7 соревновательных площадок для прокачки знаний по Swift

Only mixin definitions which matched were used. Variables match and bind to any value. Anything other than a variable matches only with a value equal to itself.

We can also match on arity, here’s an example:

Now if we call .mixin with a single argument, we will get the output of the first definition, but if we call it with two arguments, we will get the second definition, namely @a faded to @b .

Using Mixins as Functions

Selecting properties and variables from mixin calls

Property / value accessors

Starting in Less 3.5, you can use property/variable accessors to select a value from an evaluated mixin’s rules. This can allow you to use mixins similar to functions.

Overriding mixin values

If you have multiple matching mixins, all rules are evaluated and merged, and the last matching value with that identifier is returned. This is similar to the cascade in CSS, and it allows you to «override» mixin values.

Unnamed lookups

If you don’t specify a lookup value in [@lookup] and instead write [] after a mixin or ruleset call, all values will cascade and the last declared value will be selected.

Meaning: the averaging mixin from the above example could be written as:

The output is the same:

The same cascading behavior is true for rulesets or variables aliased to mixin calls.

Unlocking mixins & variables into caller scope

DEPRECATED — Use Property / Value Accessors

Variables and mixins defined in a mixin are visible and can be used in caller’s scope. There is only one exception: a variable is not copied if the caller contains a variable with the same name (that includes variables defined by another mixin call). Only variables present in callers local scope are protected. Variables inherited from parent scopes are overridden.

Note: this behavior is deprecated, and in the future, variables and mixins will not be merged into the caller scope in this way.

Variables defined directly in callers scope cannot be overridden. However, variables defined in callers parent scope is not protected and will be overridden:

Finally, mixin defined in mixin acts as return value too:

Recursive Mixins

In Less a mixin can call itself. Such recursive mixins, when combined with Guard Expressions and Pattern Matching, can be used to create various iterative/loop structures.

A generic example of using a recursive loop to generate CSS grid classes:

Mixin Guards

Guards are useful when you want to match on expressions, as opposed to simple values or arity. If you are familiar with functional programming, you have probably encountered them already.

In trying to stay as close as possible to the declarative nature of CSS, Less has opted to implement conditional execution via guarded mixins instead of if / else statements, in the vein of @media query feature specifications.

Let’s start with an example:

The key is the when keyword, which introduces a guard sequence (here with only one guard). Now if we run the following code:

Here’s what we’ll get:

Guard Comparison Operators

The full list of comparison operators usable in guards are: > , >= , = , = , . Additionally, the keyword true is the only truthy value, making these two mixins equivalent:

Any value other than the keyword true is falsy:

Note that you can also compare arguments with each other, or with non-arguments:

Guard Logical Operators

You can use logical operators with guards. The syntax is based on CSS media queries.

Use the and keyword to combine guards:

You can emulate the or operator by separating guards with a comma , . If any of the guards evaluate to true, it’s considered a match:

Use the not keyword to negate conditions:

Type Checking Functions

Lastly, if you want to match mixins based on value type, you can use the is functions:

Here are the basic type checking functions:

If you want to check if a value is in a specific unit in addition to being a number, you may use one of:

Aliasing Mixins

Assigning mixin calls to a variable

Mixins can be assigned to a variable to be called as a variable call, or can be used for map lookup.


This would output:

Variable calls

Entire mixin calls can be aliased and called as variable calls. As in:

Note, unlike mixins used in root, mixin calls assigned to variables and called with no arguments always require parentheses. The following is not valid.

This is because it’s ambiguous if variable is assigned a list of selectors or a mixin call. For example, in Less 3.5+, this variable could be used this way.

The above would output:

CSS Guards

Like Mixin Guards, guards can also be applied to css selectors, which is syntactic sugar for declaring the mixin and then calling it immediately.

For instance, before 1.5.0 you would have had to do this:

Now, you can apply the guard directly to a style.

You can also achieve an if type statement by combining this with the & feature, allowing you to group multiple guards.

Note that you can also achieve a similar pattern by using the actual if() function and a variable call. As in:

Detached Rulesets

Assign a ruleset to a variable

A detached ruleset is a group of css properties, nested rulesets, media declarations or anything else stored in a variable. You can include it into a ruleset or another structure and all its properties are going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.

Parentheses after a detached ruleset call are mandatory (except when followed by a lookup value). The call @detached-ruleset; would not work.

It is useful when you want to define a mixin that abstracts out either wrapping a piece of code in a media query or a non-supported browser class name. The rulesets can be passed to mixin so that the mixin can wrap the content, e.g.

Here the desktop-and-old-ie mixin defines the media query and root class so that you can use a mixin to wrap a piece of code. This will output

A ruleset can be now assigned to a variable or passed in to a mixin and can contain the full set of Less features, e.g.

You can even take advantage of media query bubbling, for instance

which will output

A detached ruleset call unlocks (returns) all its mixins into caller the same way as mixin calls do. However, it does not return variables.

Scoping

A detached ruleset can use all variables and mixins accessible where it is defined and where it is called. Otherwise said, both definition and caller scopes are available to it. If both scopes contains the same variable or mixin, declaration scope value takes precedence.

Declaration scope is the one where detached ruleset body is defined. Copying a detached ruleset from one variable into another cannot modify its scope. The ruleset does not gain access to new scopes just by being referenced there.

Lastly, a detached ruleset can gain access to scope by being unlocked (imported) into it.

Note: unlocking variables into scope via a called mixin is deprecated. Use property / variable accessors.

Definition and Caller Scope Visibility

A detached ruleset sees the caller’s variables and mixins:

Variable and mixins accessible from definition win over those available in the caller:

Referencing Won’t Modify Detached Ruleset Scope

A ruleset does not gain access to new scopes just by being referenced there:

throws an error:

Unlocking Will Modify Detached Ruleset Scope

A detached ruleset gains access by being unlocked (imported) inside a scope:

Property / variable accessors

(Lookup values)

Starting in Less 3.5, you can use property/variable accessors (also called «lookups») to select a value from variable (detached) rulesets.

If what is returned from a lookup is another detached ruleset, you can use a second lookup to get that value.

Variable variables in lookups

The lookup value that is returned can itself be variable. As in, you can write:

This will output:

@import At-Rules

Import styles from other style sheets

In standard CSS, @import at-rules must precede all other types of rules. But Less doesn’t care where you put @import statements.

File Extensions

@import statements may be treated differently by Less depending on the file extension:

  • If the file has a .css extension it will be treated as CSS and the @import statement left as-is (see the inline option below).
  • If it has any other extension it will be treated as Less and imported.
  • If it does not have an extension, .less will be appended and it will be included as a imported Less file.

The following options can be used to override this behavior.

Import Options

Less offers several extensions to the CSS @import CSS at-rule to provide more flexibility over what you can do with external files.

Syntax: @import (keyword) «filename»;

The following import options have been implemented:

  • reference : use a Less file but do not output it
  • inline : include the source file in the output but do not process it
  • less : treat the file as a Less file, no matter what the file extension
  • css : treat the file as a CSS file, no matter what the file extension
  • once : only include the file once (this is default behavior)
  • multiple : include the file multiple times
  • optional : continue compiling when file is not found

More than one keyword per @import is allowed, you will have to use commas to separate the keywords:

Example: @import (optional, reference) «foo.less»;

reference

Use @import (reference) to import external files, but without adding the imported styles to the compiled output unless referenced.

Example: @import (reference) «foo.less»;

Imagine that reference marks every at-rule and selector with a reference flag in the imported file, imports as normal, but when the CSS is generated, «reference» selectors (as well as any media queries containing only reference selectors) are not output. reference styles will not show up in your generated CSS unless the reference styles are used as mixins or extended.

Additionally, reference produces different results depending on which method was used (mixin or extend):

  • extend: When a selector is extended, only the new selector is marked as not referenced, and it is pulled in at the position of the reference @import statement.
  • mixins: When a reference style is used as an implicit mixin, its rules are mixed-in, marked «not reference», and appear in the referenced place as normal.

reference example

This allows you to pull in only specific, targeted styles from a library such as Bootstrap by doing something like this:


And you will pull in only .navbar related styles from Bootstrap.

inline

Use @import (inline) to include external files, but not process them.

Example: @import (inline) «not-less-compatible.css»;

You will use this when a CSS file may not be Less compatible; this is because although Less supports most known standards CSS, it does not support comments in some places and does not support all known CSS hacks without modifying the CSS.

So you can use this to include the file in the output so that all CSS will be in one file.

Use @import (less) to treat imported files as Less, regardless of file extension.

Use @import (css) to treat imported files as regular CSS, regardless of file extension. This means the import statement will be left as it is.

The default behavior of @import statements. It means the file is imported only once and subsequent import statements for that file will be ignored.

This is the default behavior of @import statements.

multiple

Use @import (multiple) to allow importing of multiple files with the same name. This is the opposite behavior to once.

optional

Use @import (optional) to allow importing of a file only when it exists. Without the optional keyword Less throws a FileError and stops compiling when importing a file that can not be found.

@plugin At-Rules

Import JavaScript plugins to add Less.js functions and features

Writing your first plugin

Using a @plugin at-rule is similar to using an @import for your .less files.

Since Less plugins are evaluated within the Less scope, the plugin definition can be quite simple.

or you can use module.exports (shimmed to work in browser as well as Node.js).

Note that other Node.js CommonJS conventions, like require() are not available in the browser. Keep this in mind when writing cross-platform plugins.

What can you do with a plugin? A lot, but let’s start with the basics. We’ll focus first on what you might put inside the install function. Let’s say you write this:

Congratulations! You’ve written a Less plugin!

If you were to use this in your stylesheet:

However, you would need to return a proper Less node if you wanted to, say, multiply that against other values or do other Less operations. Otherwise the output in your stylesheet is plain text (which may be fine for your purposes).

Meaning, this is more correct:

Note: A dimension is a number with or without a unit, like «10px», which would be less.Dimension(10, «px») . For a list of units, see the Less API.

Now you can use your function in operations.

You may have noticed that there are available globals for your plugin file, namely a function registry ( functions object), and the less object. These are there for convenience.

Plugin Scope

Functions added by a @plugin at-rule adheres to Less scoping rules. This is great for Less library authors that want to add functionality without introducing naming conflicts.

For instance, say you have 2 plugins from two third-party libraries that both have a function named «foo».

That’s ok! You can choose which library’s function creates which output.

This will produce:

For plugin authors sharing their plugins, that means you can also effectively make private functions by placing them in a particular scope. As in, this will cause an error:

As of Less 3.0, functions can return any kind of Node type, and can be called at any level.

Meaning, this would throw an error in 2.x, as functions had to be part of the value of a property or variable assignment:

In 3.x, that’s no longer the case, and functions can return At-Rules, Rulesets, any other Less node, strings, and numbers (the latter two are converted to Anonymous nodes).

Null Functions

There are times when you may want to call a function, but you don’t want anything output (such as storing a value for later use). In that case, you just need to return false from the function.

Цукерберг рекомендует:  Пример всплывающих подсказок с помощью Coda Bubble

Later you could do something like:

The Less.js Plugin Object

A Less.js plugin should export an object that has one or more of these properties.

The PluginManager instance for the install() function provides methods for adding visitors, file managers, and post-processors.

Here are some example repos showing the different plugin types.

Pre-Loaded Plugins

While a @plugin call works well for most scenarios, there are times when you might want to load a plugin before parsing starts.

See: Pre-Loaded Plugins in the «Using Less.js» section for how to do that.

Maps (NEW!)

Use rulesets and mixins as maps of values

By combining namespacing with the lookup [] syntax, you can turn your rulesets / mixins into maps.

Mixins are a little more versatile as maps because of namespacing and the ability to overload mixins.

You can also make this easier by aliasing mixins. That is:

Note, if a lookup value produces another ruleset, you can append a second [] lookup, as in:

In this way, rulesets and variable calls can emulate a type of «namespacing», similar to mixins.

As far as whether to use mixins or rulesets assigned to variables as maps, it’s up to you. You may want to replace entire maps by re-declaring a variable assigned to a rulset. Or you may want to «merge» individual key/value pairs, in which case mixins as maps might be more appropriate.

Using variable variables in lookups

One important thing to notice is that the value in [@lookup] is the key (variable) name @lookup , and is not evaluated as a variable. If you want the key name itself to be variable, you can use the @@variable syntax.

This would output:

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.

CSS → Селектор в качестве параметра миксина LESS

Результат в обоих случаях:

Комментарии

Less это для невероятных фреймворков типа bootstrap ? А есть ли смысл его использовать в работе с друпалом?

Оставить комментарий

Разделы


  • Drupal (758)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • Javascript (31)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • PHP (25)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • CSS (25)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • MySQL (6)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • Разное (56)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce

Последние записи

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

федор, 11.11.2020

Здравствуйте, сделал кнопку, но она не срабатывает для самой формы поч →

Гость, 08.11.2020

Здравствуйте. Я использую парсер для создания товаров в Drupal Commer →

Павел, 04.11.2020

Доброго времени суток! Подскажите как сделать так чтобы всплывающие ( →

Сергей, 21.10.2020

Сам спросил, сам отвечаю. Может кому пригодится. Помог модуль image_u →

Сергей, 21.10.2020

Всем привет! Добавлю от себя как один из пунктов инструкции — в нас →

Изучаем LESS: Общее описание системы

Теперь, когда мы закончили рассмотрение SASS, давайте поговорим о LESS. Если вы еще не читали мою статью по SASS, вы можете найти ее здесь.

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

Мы также говорили о том, как реализовать SASS с помощью переменных, вложенных элементов, примесей, функций и так далее.

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

LESS в двух словах

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

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

LESS работает и на стороне клиента ( IE , Firefox и т.д.), и на стороне сервера, используя Node.js . В этой статье мы рассмотрим клиентскую сторону. Так что, просто сядьте как можно удобнее, расслабьтесь и наслаждайтесь уроком.

Что вам понадобится для выполнения заданий данного урока:

  • LESS библиотека ;
  • SimpLESS для Mac/Windows (компилятор на стороне клиента);
  • Текстовый редактор;
  • Время и терпение.

Установка SimpleLESS

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

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

В этом случае вам необходимо скачать его заново.

Подготовка разметки и LESS Javascript

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

Далее внутри папки LESS создайте HTML-файл, назовите его index.html , скопируйте и вставьте в него приведенный ниже код.

Обратите внимание, что мы включили библиотеку LESS ниже таблицы стилей:

Heading 1

Heading 2

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Затем создайте новый файл и назовите его style.less . Чтобы вы могли увидеть, как компилируется LESS, давайте добавим в этот файл несколько примеров кодов LESS. Идем дальше.

Скопируйте и вставьте следующий код в файл style.less :

На данный момент у вас должна получиться структура файла наподобие этой:

Компиляция LESS помощью SimpLESS

Для компиляции LESS файла в CSS, запустите приложение SimpLESS и перетащите папку « LESS », которую мы создали раньше, в окно приложения:

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

Обратите внимание, что в окне приложения будет выведена текстовая информация, которая уведомляет вас о том, был ли файл скомпилирован или нет.

В моем примере, как вы можете видеть в правом углу текст гласит « never compile ». Это означает, что наша папка LESS никогда не компилировалась:

Приложение также предлагает нам на выбор различные функции, а именно: Prefix , Minify , Love . Вы можете видеть их в правом углу окна под оповещением о статусе.

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

Давайте рассмотрим их использование:


  • Prefix — позволяет обеспечить совместимость с различными браузерами с помощью префиксов;
  • Minify — сжимает ваш CSS документ, с помощью встроенного CSS-минификатора;
  • Love — функция комментирует или извещает о состоянии SimpLESS для вашего документа.

Теперь давайте скомпилируем наш файл LESS в CSS. Для этого нужно просто нажать на иконку « Обновить » в левом углу окна приложения SimpLESS :

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

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

Так что, когда вы откроете папку LESS, вы увидите, что в нее был добавлен файл CSS.

Убедитесь, что вы привязали скомпилированный файл CSS ( style.css ) к файлу index.html , чтобы добавились стили, которые вы задали через LESS:

Переменные LESS

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

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

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

Откройте файл LESS и вставьте в него следующий код. Для этого кода я создал 3 переменные для цвета, размера шрифта и рамки.

Я добавил переменные myColor и myFontSize в тэг H1, переменную myBorder я добавил в список идентификаторов myList :

Теперь, если вы откроете файл style.css , вы увидите, что код был обновлен. Идем дальше, запускаем этот код через адресную строку браузера.

Вы увидите что-то похожее на то, что приведено на рисунке ниже:

Примеси LESS

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

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

Чтобы понять, как в LESS работают примеси, давайте рассмотрим следующий код:

Как вы можете видеть, я создал примесь, которая называется sample-mixin , и добавил ее в тег H1 и параграф с >myParagraph .

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

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

В LESS аналогично SASS применяются вложенные правила для идентификаторов и классов. Это позволяет поддерживать чистоту и организацию кода.

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

Вариант CSS

Вариант LESS

Как видите, мы организовали наши стили с помощью LESS, и нам не пришлось повторять идентификатор container несколько раз.

Если вы запустите приведенные выше коды в браузере, то увидите аналогичные результаты.

Операторы LESS

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

Давайте рассмотрим, как это работает:

Как вы видите, к базовому значению рамки в 5 пикселей я добавил еще 5 пикселей, а затем задал ее цвет. Базовый отступ в 90 пикселей я разделил на 3, и в результате получил отступ в 30 пикселей.

Если вы запустите этот код в браузере, то увидите следующий результат:

Функции LESS

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

Ниже приводится список функций цвета LESS:

  • darken (цвет, значение);
  • lighten (цвет, значение);
  • saturate (цвет, значение);
  • desaturate (цвет, значение);
  • alpha (цвет)

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

Как видите, цвет фона был затемнен на 60%, а затем цвет текста тегов H1 и H2 стал светлее на 10%, а цвет текста тегов абзаца стал светлее на 20%.

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

Заключительное слово

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

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

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

Данная публикация представляет собой перевод статьи « Сайтостроение от А до Я » , подготовленной дружной командой проекта Интернет-технологии.ру

Сравнения CSS препроцессоров Sass и Less

Sass и Less оба являются препроцессорами CSS, и наиболее часто используемые. Препроцессоры CSS являются очень мощным инструментом, и поможет вам упростить процесс разработки. Они оба имеют много общего в синтаксисе, основным различием между ними является способ обработки. Less это JavaScript библиотека и обрабатывается на стороне клиента. В то время Sass работает на Ruby и он обрабатывается на стороне клиента.
Давайте попробуем разобраться, какая разница между Sass и Less.

Приступая к работе Sass.

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

Приступая к работе с Less.

Less установить намного легче, так оно построено на языке JavaScript.
Это так же просто как подключить JavaScript в HTML документ.
Также существует несколько программ с графическим интерфейсом для работы с Less, например WinLess для Windows.

1-Вложенные правила.

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

2 –Миксины

Миксины — это функции, позволяющие многократно использовать набор CSS-свойств во всей таблице стилей.
Вместо того, чтобы писать один и тот же код несколько раз, мы можем написать его один раз в миксине и затем использовать.
Это может быть полезно для стилизации определенных элементов и для автоматической расстановки вендорных префиксов.
Когда миксин включен в какой-либо селектор, препроцессор считывает аргументы (если они есть) и подставляет код, который написан в исходном миксине. Миксины определяются немного по-другому в Sass чем Less.
В Sass используется директива @mixin, в Less она определена как селектор класса.
Напимер:

Миксины используются для включения свойств из одного набора правил в другой набор.
Этот метод идёт дальше с селекторами наследования в Sass.
Sass расширяет группы селекторов , которые имеют одинаковые свойства и значения с помощью директивы @extend, вместо того чтобы копировать все свойства.
Напимер:

Условные операторы.

Это то, чего нет в Less!
Sass позволяет использовать операторы If <>, else <>, , =, ==.

Циклы.

Less позволяет использовать циклы только с числовым значениями.
А вот Sass есть возможность перебирать данные любого вида.
Например:

Операции с числами.

Sass и Less поддерживают основные арифметические операции над числами.
Однако есть разница в том, как они обращаются с единицами измерения.
LESS возьмет за единицу измерения значение первой переменной, игнорируя все остальные, например 100px + 2em == 102px.
Sass даст чётко понять что здесь есть ошибка.
Также Sass позволяет проводить математические операции с неизвестными единицами измерения, которые могут появиться в следующих спецификации W3C или в случае вывода нестандартного блока в браузере.

Функции работы с цветами.

Функции для работы с цветом — это встроенные в препроцессор функции, позволяющие манипулировать цветами.
Эти функции могут быть полезны для создания градиентов, более тёмных или светлых цветов при hover’e и так далее.
Это всего лишь короткий список основных функций для работы с цветом в Sass.
Полный список функций доступен в документации.
Полный список функций для работы с цветом можно посмотреть в документации Less.

Переменные.

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

Sass

Переменные в Sass начинаются с символа $ и объявляются точно так же, как и CSS-свойства.

Less

Less-переменные — такие же, как Sass-переменные.
Единственное отличие — в Less они начинаются с символа @.

Вывод

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

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