О нас
Разработчикам
Заметки
Переводчик
Транслитератор
Сравнить текст
Генератор пароля
Ip и информация
Декодировать JSON
Локация
О нас
Разработчикам
Заметки
Переводчик
Транслитератор
Сравнить текст
Генератор пароля
Ip и информация
Декодировать JSON
Локация
Less
us.content
// LESS Функции http://lesscss.org/functions/ @import "style.less"; // Импорт less файлов @import (less) "style.css"; // Импорт css файлов @grey: #ccc; //Миксины .mixin(@color, @text: 16px) { // В css файле не будет этой переменной, 16px значение по-умолчанию color: @color; font-size: @text; } .mixin(@color) { // Второй спрособ передовать два параметра, скопировать миксин с одним параметром color: @arguments; // Можно так написать, подставляется из функции font-size: @text; } .mixin() { .red { color: red; } .blue { color: blue; } }// При вызове этого миксина можно обратиться только к одному селектору .mixin > red {} таким образом @selector: test; .@{selector} & { // & означает поставить родительский класс перед .@{selector} .mixin(#fff, 18px); // Можно писать сразу класс и применяться все свойства } //ceil() // Округляет до большего числа //floor() // Округляет до меньшего числа // Ссылка на переменную @color: @grey; @field: 'color'; // Название переменной @color пишу так 'color' @one: @@field; p { background: @one; // Вызываем переменную color : lighten(@grey, 5%); // Сделать светлее на 5% или darken() темнее } // Синтаксис .main { padding: (@padding * 5 - 2) * 3; // Можно также * + / - backgrond: @grey; &_hearder { color: #000; } &.top { margin: 0; } } .test { extend(.main, .top); // Наследование, если все стили пишу extend(all); width: ~"calc(100% - 10px)"; // Говорим less не компилировать, что внутри говычек. calc свойство css для расчётов height: ceil(100px / 3); // Функция округления, получиться 34рх }
Список