Российская проектная студия OlDesign.ru

Разработка и ведение стартапов, изготовление сайтов, дизайн печатной и сувенирной продукции, продвижение.

LESS на стороне клиента

    less

     

    LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания, операции ифункции.

    LESS может использоваться как на стороне клиента (IE 6+, Webkit, Firefox), так и на стороне сервера, с Node.js и Rhino.

    LESS обеспечивает расширения CSS: переменные, вложенные блоки, миксины, операторы и функции.

     

     

    Переменные

    Как и в других языках, переменные позволяют описать в одном месте какое-либо значение, а затем в коде использовать его повторно  когда потребуется. Благодаря переменным становится легче вносить модификации: вместо правки значения в нескольких местах, можно исправить его только в одном месте.

     

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

     

    @color: #4D926F; #header { color: @color; } h2 { color: @color; }
    
    


     

    Примешивания (mixins)

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

     

    .rounded-corners (@radius: 5px) {
        border-radius: @radius;
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius; 
    }
    #header {
        .rounded-corners; 
    }
    #footer {
        .rounded-corners(10px); }
    
    


     

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

    С помощью Less, возможно сократить запись стилей, используя вложенные правила:

     

    #header { 
              h1 { font-size: 26px; font-weight: bold; } 
               p { font-size: 12px; 
                   a { text-decoration: none; 
                       &:hover { border-width: 1px } 
                     } 
                 } 
    }
    
    
    

     

    Функции и операции

    В LESS можно использовать в качестве значений свойств не только константы, но даже выражения и функции! Можно производить арифметические операции, вызывать функции аналогично JS

     

    @the-border: 1px; 
    @base-color: #111; 
    @red: #842210;
     #header { 
                    color: @base-color * 3; 
                    border-left: @the-border; 
                    border-right: @the-border * 2;
                    }
     #footer {
                    color: @base-color + #003300;
                    border-color: desaturate(@red, 10%);
                    }
    

    less


    Установка:
     

    Загружаем файл JS с  офицального сайта. Так же есть возможно использовать файл без загрузки (с репозитория):

     

    < script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js" >< /script >

     

     

    Создаем: файл Style.less

     

    Подключаем к странице:

     

    < !doctype html >
    < hеad >
      < link rеl="stylesheet/less" type="text/css" href="style.less" >
      < sсript src="less.min.js" type="text/javascript" >< /sсript >
    < /hеad >

     

     

    Внимание! файл стилей должен быть подключён до файла JavaScript.
     


     

    Библиотека MIXINS для LESS:

    http://lesselements.com/



    Скажите спасибо - поделитесь:
     

    Комментарии (0)


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