1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

Для тех кто использует css [Юзаем less]

Тема в разделе "CSS, HTML, JS", создана пользователем хопкинс, 19 окт 2013.

  1. хопкинс
    хопкинс Продвинутый
    Симпатии:
    35
    Предлагаю вашему вниманию LESS!!! Не забудь установить WinLess.

    Переменные

    Эта возможность вполне очевидна:
    Код:
    @nice-blue: #5B83AD; @light-blue: @nice-blue + #111;  #header { color: @light-blue; }
    что дает на выходе:

    Код:
    #header { color: #6c94be; }
    Можно также определять переменную, ссылаясь на другую переменную по ее имени:

    Код:
    @fnord: "I am fnord."; @var: 'fnord'; content: @@var;
    Что компилируется в:

    Код:
    content: "I am fnord.";
    Заметьте, что то, что мы называем переменными — на самом деле ‘константы’, поскольку они могут быть определены только раз.

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



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


    Код:
    .bordered {   border-top: dotted 1px black;   border-bottom: solid 2px black; }
    
    И мы хотим использовать эти свойства внутри другого набора правил. Что же, мы просто указываем имя класса в любом другом наборе правил, куда нужно включить свойства, вот так:


    Код:
    #menu a {   color: #111;   .bordered; } .post a {   color: red;   .bordered; }
    
    Свойства класса .bordered теперь появятся и в #menu a, и в .post a. Результатом компиляции окажется:


    Код:
    #menu a {   color: #111;   border-top: dotted 1px black;   border-bottom: solid 2px black; } .post a {   color: red;   border-top: dotted 1px black;   border-bottom: solid 2px black; }
    
    Любой класс CSS, а также набор правил id или элемента может быть смешан точно так же.

    Параметризированные примеси



    В LESS существует особый вид наборов правил, которые можно смешивать, точно как описываемые выше классы, но которые принимают параметры. Вот канонический пример:​
    Код:
    .border-radius (@radius) {   border-radius: @radius;   -moz-border-radius: @radius;   -webkit-border-radius: @radius; }
    А вот как мы можем подмешивать этот набор правил в другие наборы:​
    Код:
    #header {   .border-radius(4px); } .button {   .border-radius(6px);   }
    Параметризированные примеси могут также иметь значения по-умолчанию для своих параметров:​
    Код:
    .border-radius (@radius: 5px) {   border-radius: @radius;   -moz-border-radius: @radius;   -webkit-border-radius: @radius; }
    и, если мы используем такой вызов:​
    Код:
    #header {   .border-radius;   }
    то получим на выходе значение border-radius, равное 5px.​
    Вы также можете использовать параметризированные примеси, которые не учитывают передаваемых параметров. Это удобно, если есть желание спрятать некий набор правил при выводе в CSS, но использовать значения его свойств в других наборах правил:​
    Код:
    .wrap () {   text-wrap: wrap;   white-space: pre-wrap;   white-space: -moz-pre-wrap;   word-wrap: break-word; }  pre { .wrap }
    Это даст на выходе:​
    Код:
    pre {   text-wrap: wrap;   white-space: pre-wrap;   white-space: -moz-pre-wrap;   word-wrap: break-word; }
    Переменная с именем @arguments

    Название переменной @arguments внутри примешивания имеет особое значение. В процессе компиляции заменяется на все переданные аргументы. Это удобно, если нет желания возиться с отдельными параметрами:​
    Код:
    .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {   box-shadow: @arguments;   -moz-box-shadow: @arguments;   -webkit-box-shadow: @arguments; }  .box-shadow(2px, 5px);
    Совпадение с шаблоном и предохранительные выражения

    Иногда, Вы можете захотеть изменить поведение примешивания, в зависимости от переданный в него параметров. Попробуем на чем-нибудь простом:

    Код:
    .mixin (@s, @color) { ... }  .class {   .mixin(@switch, #888); } 
    Теперь, предположим, что мы хотим, чтобы .mixin вела себя по-разному, в зависимости от величины @switch. Определяем .mixin таким образом:
    Код:
    .mixin (dark, @color) {   color: darken(@color, 10%); }  .mixin (light, @color) {   color: lighten(@color, 10%); } .mixin (@_, @color) {   display: block; }  
    Теперь, если мы используем:
    Код:
    @switch: light;  .class {   .mixin(@switch, #888); } 
    Мы получим такой CSS:
    Код:
    .class {   color: #a2a2a2;   display: block; } 
    Т.е. величина цвета (@color), переданная в .mixin, оказалась осветлена. Если бы значение @switch было задано как dark, результатом стал бы более темный цвет.
    Вот что происходит:

    • Первое определение примешивания не подходит, поскольку мы ожидаем black в качестве первого аргумента.
    • Второе определение примешивания подходит, поскольку мы ожидаем light.
    • Третье определение примешивания срабатывает, так как оно ожидает любую величину.
    Отработали только подошедшие под определение примешивания. Переменные могут совпадают и привязываться к любому значению. Все, что отличается от переменной, дает совпадение, только если равно самому себе.
    Мы можем также сравнивать арность, т.е. количество элементов, например:
    Код:
    .mixin (@a) {   color: @a; }  .mixin (@a, @b) {   color: fade(@a, @b); } 
    Если мы вызовем .mixin с одним аргументом, мы получим вывод первого определения, но если мы вызовем примешивание с двумя аргументами, мы получим второе определение, а именно @a, приглушенное на @b.
    Предохранители

    Предохранители полезны, когда мы хотим проверять совпадение с выражениями, а не с просыми величинами или с арностью. Если Вы знакомы с функциональным программированием, Вы вероятно уже встречались с ними.
    В попытке оказаться как можно ближе к декларативной природе CSS, LESS использует условное исполнение при помощи предохраняемых примешиваний вместо выражение if/else, в русле спецификации указания @media.
    Начнем с примера:
    Код:
    .mixin (@a) when (lightness(@a) >= 50%) {   background-color: black; }  .mixin (@a) when (lightness(@a) < 50%) {   background-color: white; } .mixin (@a) {   color: @a; } 
    Ключевым являемся указание when, которое описывает предохранительное выражение (здесь всего один предохранитель). Теперь, если запустить код:
    Код:
    .class1 { .mixin(#ddd) } .class2 { .mixin(#555) } 
    Мы получим:
    Код:
    .class1 {   background-color: black;   color: #ddd; } .class2 {   background-color: white;   color: #555; } 
    Полный список операторов сравнения в предохраняющих выражениях: > >= = =< <. Кроме того, ключевое слово true - всегда дающее истину выражение, делающее две следующие примеси эквивалентными:
    Код:
    .truth (@a) when (@a) { ... }  .truth (@a) when (@a = true) { ... } 
    Любые выражения, кроме true, являются ложью:
    Код:
    .class {   .truth(40); // Не совпадет ни с одним из выражений. } 
    Предохранители могут разделяться запятыми ‘,’ — если однин из них срабатывает, весь набор считается совпадшим:
    Код:
    .mixin (@a) when (@a > 10), (@a < -10) { ... }  
    Заметьте, что можно сравнивать аргументы друго с другом, либо с не-аргументами:
    Код:
    @media: mobile;  .mixin (@a) when (@media = mobile) { ... }  .mixin (@a) when (@media = desktop) { ... }  .max (@a, @b) when (@a > @b) { width: @a }  .max (@a, @b) when (@a < @b) { width: @b }  
    Наконец, если Вы хотите сравнивать примешивания по типу значения, Вы можете использовать функции вида is*:
    Код:
    .mixin (@a, @b: 0) when (isnumber(@b)) { ... }  .mixin (@a, @b: black) when (iscolor(@b)) { ... } 
    Вот функции для сравнения основных типов:

    • iscolor
    • isnumber
    • isstring
    • iskeyword
    • isurl
    Если необходимо проверить, чтобы величина была не только числом, но и имела бы значение определенного типа:

    • ispixel
    • ispercentage
    • isem
    Можно использовать ключевое слово and для указания дополнительных условий, например:
    Код:
    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }    И ключевое слово not для отрицания условия:
      .mixin (@b) when not (@b > 0) { ... }  
    Вложенные правила

    LESS дает возможность вкладывать определения, вместо либо вместе с каскадированием. Пусть, например, у нас есть такой CSS:
    Код:
    #header { color: black; } #header .navigation {   font-size: 12px; } #header .logo {    width: 300px;  } #header .logo:hover {   text-decoration: none; }
    При использовании LESS, мы также можем записать его в виде:
    Код:
    #header {   color: black;    .navigation {     font-size: 12px;   }   .logo {     width: 300px;     &:hover { text-decoration: none }   } } 
    либо так:
    Код:
    #header        { color: black;   .navigation  { font-size: 12px }   .logo        { width: 300px;     &:hover    { text-decoration: none }   } } 
    Итоговый код более понятен, и повторяет структуру вашего дерева DOM.
    Обратите внимание на элемент & — он используется, когда указанный селектор нужно приписать к селекторe-родителю, а не использовать как вложенный элемент. Это особенно удобно для псевдо-классов типа :hover или :focus
    Например, запись:
    Код:
    .bordered {   &.float {     float: left;    }   .top {     margin: 5px;    } } 
    даст на выходе
    Код:
    .bordered.float {   float: left;   } .bordered .top [   margin: 5px; } 
    Операции



    С любыми числовые и цветовые значениями можно производить математические операции. Вот несколько примеров:​
    Код:
    @base: 5%; @filler: @base * 2; @other: @base + @filler;  color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler;
    Итоговый код будет вполне логичным — LESS распознает разницу между указаниями цветов и другими единицами измерений. Если единивы измерений используются в операции, скажем, так:​
    Код:
    @var: 1px + 5;
    LESS использует указанную единицу измерения для итогового кода — что даст, в данном случае, 6px.​
    Скобки также разрешены в операциях:​
    Код:
    width: (@var + 5) * 2;
    И даже обязательны в составных значениях:​
    Код:
    border: (@width * 2) solid black;
    Функции работы с цветом





    LESS предлагает множество функций, изменяющих указание цвета. Цвета сначала преобразуются в цветовую модель HSL (от англ. Hue, Saturation, Lightness — цветовая модель, в которой цветовыми координатами являются тон, насыщенность и светлота), а затем манипуляции ведутся с каждым каналом по отдельности:​
    Код:
    lighten(@color, 10%); // возвращает цвет, который на 10% *светлее*, чем @color darken(@color, 10%); // возвращает цвет, который на 10% *темнее*, чем @color saturate(@color, 10%); // возвращает цвет, на 10% *более* насыщенный, чем @color desaturate(@color, 10%); // возвращает цвет, на 10% *менее* насыщенный, чем @color fadein(@color, 10%); // возвращает цвет, на 10% *менее* прозрачный, чем @color fadeout(@color, 10%); // возвращает цвет, на 10% *более* прозрачный, чем @color spin(@color, 10); // возвращает цвет, на 10 градусов больший по оттенку, чем @color spin(@color, -10); // возвращает цвет, на 10 градусов меньший по оттенку, чем @color ​
    Использование этих функций вполне очевидно:
    Код:
    @base: #f04615;  .class {   color: saturate(@base, 5%);   background-color: lighten(spin(@base, 8), 25%); }
    Вы также можете извлекать информацию о цвете:​
    Код:
    hue(@color);        // возвращает канал тона (`hue`) в указанном @color saturation(@color); // возвращает канал насыщенности (`saturation`) в указанном @color lightness(@color);  // возвращает канал светлоты (`lightness`) в указанном @color
    Это полезно, если Вы хотите создать новый цвет, основываясь на значениях каналов другого цвета, например:​
    Код:
    @new: hsl(hue(@old), 45%, 90%);
    в результате @new получит тон (hue), равный тону цвета @old, но при этом будет иметь свои собственные насыщенность и светлоту.

    Математические функции

    LESS предлагает пару удобных математических функций, которые можно применять к числовым значениям:​
    Код:
    round(1.67); // вернет `2` ceil(2.4);   // вернет `3` floor(2.6);  // вернет `2`
    Если Вам нужно преобразовать значение в проценты, это можно сделать при помощи функции percentage:​
    Код:
    percentage(0.5); // вернет `50%
    `


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

    Иногда появляется необходимость сгруппировать переменные или примеси, либо для удобства организации кода, либо просто для некоторой инкапсуляции. Вы можете сделать это весьма интуитивно понятно в LESS — скажем, чтобы собрать несколько примесей и переменных под #bundle, для дальнейшего использования, достаточно указать:​
    Код:
    #bundle {   .button () {     display: block;     border: 1px solid black;     background-color: grey;     &:hover { background-color: white }   }   .tab { ... }   .citation { ... } }
    Теперь, чтобы примешать .button к нашему классу #header a, указываем:​
    Код:
    #header a { color: orange; #bundle > .button; } ​
    Зоны видимости



    Зоны видимости в LESS похожи на одноименное понятие, применяемые в языках программирования. Переменные и примеси сначала ищутся локально, а затем, если компилятор не смог их найти, поиск продолжается в родительской зоне видимости, затем выше, и т.д.​
    Код:
    @var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red } ​
    Комментарии

    LESS придерживается привычного по CSS стиля комментариев:​
    Код:
    /* Привет, я комментарий в стиле CSS! */ .class { color: black }
    В LESS также возможны однострочные комментарии, они считаются невидимыми, и не появляются в итоговом, скомпилированный выводе CSS:​
    Код:
    // Привет, я невидимый комментарий, я не появлюсь в выводе CSS .class { color: white }

    Импортирование

    Вы можете импортировать файлы .less, при этом все переменные и примеси в них становятся доступными в главном файле. Расширение .less необязательно, так что обе следующие записи сработают одинаково:​
    Код:
    @import "lib.less"; @import "lib";
    Если Вы хотите импортировать файл CSS, и не хотите, чтобы LESS обрабатывал его содержимое, просто используйте расширение .css:​
    Код:
    @import "lib.css";
    Директива будет оставлена как есть, и в этом же виде попадет в вывод CSS.

    Интерполяция строк



    Переменные могут быть включены внутрь строк, как в ruby или в PHP, при помощи конструкции @{name}:
    Код:
    @base-url: "http://assets.fnord.com";  background-image: url("@{base-url}/images/bg.png");
    
    Экранирование

    Иногда Вам может потребоваться вывести значение параметра CSS, либо не валидное с точки зрения CSS, либо с синтаксисом, который LESS не распознает.​
    В подобном случае используйте функцию e(), которой нужно передать в качестве параметра строку. Вот пример:​
    Код:
    .class {   filter: e("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"); }
    Это будет выведено в виде:​
    Код:
    .class {   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png'); }
    lesscss.ru
     
    19 окт 2013
    1 человеку нравится это.

Поделиться этой страницей

Загрузка...