Самый полный меньше заметок, выучить за полчаса!

Less

1. Введение в меньшее

  1. less — это прекомпилятор CSS, который может расширять язык CSS (конечно, он совместим с CSS) и может определять переменные, примеси, функции и т. д., что упрощает поддержку и расширение кода CSS.
  2. меньше по сравнению с традиционным письмом:
  • меньше имеет суффикс ".less"
  • В less есть два типа комментариев.
// 这种注释不会编译到CSS文件
/* 这种注释会编译到CSS文件*/
div {
  font-size: 14px;
}
  1. меньше нужно скомпилировать в css для использования
  • Используйте инструменты сборки, такие какKoalaОчень полезно (конечно их многоОнлайн-инструмент компиляции)
  • Использовать в проекте (типа VUE, нужно установить Less-loader)
  • Отладка на стороне клиента (есть междоменная проблема, этот метод не рекомендуется)
  • Используйте тег ссылки для ссылки на less.min.js (Загрузка с официального сайта), обратите внимание на rel="stylesheet/less"
  • Этот метод не генерирует файлы css, а просматривает их прямо в браузере.

2. Правила вложения

2.1 Правила вложенности less аналогичны структуре HTML, что делает код CSS понятным

/*css 写法*/
div {
  font-size: 14px;
}
div p {
 margin: 0 auto;
}

div p a {
  color: red;
}

// less写法
div {
  font-size: 14px;
  p {
    margin: 0 auto;
    a {
      color: red;
    }
  }
}

2.2 Селектор родительского элемента &

  • все родительские селекторы, представляющие текущий селектор
//css写法
.bgcolor {
  background: #fff;
}
.bgcolor a {
  color: #888888;
}
.bgcolor a:hover {
  color: #ff6600;
}

//less写法
.bgcolor {
  background: #fff; 
  a {
    color: #888888;      
    &:hover {
      color: #ff6600;
    }
  }
}

2.3 Изменение порядка селекторов

  • Помещение & после текущего селектора переместит текущий селектор на передний план
  • Просто помните, что "& представляет все родительские селекторы текущего селектора"
ul {
  li {
    .color &{
      background: #fff;
    }
  }
}

//编译结果
.color ul li {
  background: #fff;
}

2.4 Комбинированное использование

  • сгенерирует список всех возможных селекторов
.div1, .div2 {
  color: red;
  & & {
    border-top: 1px solid blue;
  }
} 

//编译结果
.div1, .div2 {
  color: red;
}
.div1 .div2,
.div2 .div1,
.div1 .div1,
.div2 .div2 {
  border-top: 1px solid blue;
}

3. Переменные

3.1 Определение и использование переменных

  • Определение: @name: значение; (@black: #000;)
  • Существует 3 вида использования:
  • Регулярное использование: @имя
  • Как имя селектора или свойства: @{name}
  • Как URL: "@{имя}"
/* 1.常规使用 */
@black: #000000;

div {
  color: @black
}

//编译结果
div {
  color: #000000;
}

/* 2.作用选择器和属性名 */
@selName: container;
@proName: width;

.@{selName} {
  @{proName}: 100px;
}

//编译结果
.container {
  width: 100px;
}

/* 3.作为URL */
@imgUrl: "./images/logo.png"

div {
  background: #FFF url("@{imgUrl}")
}

//编译结果
div {
  background: #FFF url("./images/logo.png")
}

3.2 Примечания

  1. Переменные загружаются лениво и не могут быть предварительно объявлены
div {
  color: @black
}

@black: #000000;

//编译结果
div {
  color: #000000;
}
  1. переменная область видимости
  • less не найдет его из текущей области видимости и будет искать (аналогично js)
  • Если на определенном уровне области видимости найдено более одной переменной с одним и тем же именем, используйте ту, которая определена последней (аналогично css).
@var: 0;
.class {
    @var: 1;
    .brass {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var; //类似js，无法访问.brass内部
}

//编译结果
.class {
    one: 1;
}
.class .brass {
    three: 3;  //使用最后定义的 @var: 3
}

4. Миксины

  • mixin : способ введения («смешивания») набора свойств из одного набора правил в другой.
  • Микширование — очень важное понятие, а содержания слишком много, можно попробовать перечитать несколько раз!

4.1 Нормальное смешивание

//混合
.border {
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #eee;
  .border;
}

//编译结果
.border {
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #eee;
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}

4.2 Микширование без параметров

  • Из приведенного выше кода видно, что смесь также компилируется и выводится
  • Добавить круглые скобки после имени микса, больше не выводится после компиляции
//加括号但不带参数的混合
.border() {
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #eee;
  .border;  //加不加括号都可以
}

//编译结果
#menu a {
  color: #eee;
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}

4.3 Смешивание с параметрами

//带参数的混合
.border(@color) {
  border-top: solid 1px @color;
  border-bottom: solid 2px @color;
}
#menu a {
  color: #eee;
  .border(#fff);
}

//编译结果
#menu a {
  color: #eee;
  border-top: solid 1px #ffffff;
  border-bottom: solid 2px #ffffff;
}

4.4 Смешивание с параметрами и значениями по умолчанию

//带参数且有默认值的混合
.border(@color: #fff) {
  border-top: solid 1px @color;
  border-bottom: solid 2px @color;
}
#menu a {
  color: #eee;
  .border;
}

#menu p {
  .border(#000);
}

//编译结果
#menu a {
  color: #eee;
  border-top: solid 1px #ffffff;
  border-bottom: solid 2px #ffffff;
}

#menu p {
  border-top: solid 1px #000000;
  border-bottom: solid 2px #000000;
}

4.5 С несколькими параметрами

  • При наличии нескольких параметров параметры могут быть разделены точкой с запятой или запятой.
  • Обратите внимание, разделяет ли запятая «индивидуальные параметры» или «параметры списка».
  • Два аргумента, и каждый аргумент представляет собой список, разделенный запятыми: .name(1,2,3; something, ele)
  • Три аргумента, и каждый аргумент содержит число: .name(1,2,3)
  • Используя точку с запятой, вызов содержит список css, разделенных запятыми (один параметр): .name(1,2,3; )
  • По умолчанию, разделенные запятыми (два параметра): .name(@param1:red, blue)
//less编写
.mixin(@color, @padding: xxx, @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

.div {
  .mixin(1,2,3; something, ele);  //2个参数
}
.div1 {
  .mixin(1,2,3);                  //3个参数
}
.div2 {
  .mixin(1,2,3; );                //1个参数
}

//编译输出
.div {
  color-3: 1, 2, 3;
  padding-3: something, ele;
  margin: 2 2 2 2;
}
.div1 {
  color-3: 1;
  padding-3: 2;
  margin: 3 3 3 3;
}
.div2 {
  color-3: 1, 2, 3;
  padding-3: xxx;
  margin: 2 2 2 2;
}

4.6 Определение нескольких миксов с одинаковым названием

  • less вызовет соответствующий микс по параметрам
.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding: 3; @margin) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

.some .selector div {
  .mixin(#008000); //第二个mixins也被调用了，因为 @padding 有默认值
}

.some .selector p {
  .mixin(#008000, 5); //只有第二个mixins被调用
}

//编译结果
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}
.some .selector p {
  color-2: #008000;
  padding-2: 5;
}

4.7 Именованные параметры

  • При ссылке на миксин вы можете указать значения параметров для миксина по имени параметра, а не по позиции параметра.На любой параметр ссылаются по имени, поэтому параметры не обязательно использовать в определенном порядке.
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin:20; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

//编译输出
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

4.8 Переменная @arguments

  • @arguments означает все вариативные аргументы
  • Порядок параметров - порядок в скобках.При присвоении значений позиция и количество значений также находятся во взаимно однозначном соответствии.
  • Есть только одно значение, присвойте значение первому, два значения, присвойте первое и второе...
  • Если вы хотите присвоить первому и третьему, вы должны написать значение по умолчанию второго параметра
.border(@x: solid, @c: red) {
  border: 21px @arguments;
}
.div1 {
  .border;
}
.div2 {
  .border(solid, black)
}

//编译输出
.div1 {
  border: 21px solid #ff0000;
}
.div2 {
  border: 21px solid #000000;
}

4.9 Сопоставление шаблонов

  • Настройте персонажа, добавьте этот символ, когда вы его используете, и вызовите соответствующее правило
.border(all, @w: 5px) {
  border-radius: @w;
}
.border(t_l, @w: 5px) {
  border-top-left-radius: @w;
}
.border(b_l, @w: 5px) {
  border-bottom-left-radius: @w;
}
.border(b_r, @w: 5px) {
  border-bottom-right-radius: @w;
}

.border {
  .border(all, 50%);
}
//编译结果
.border {
  border-radius: 50%;
}

4.10 Получение возвращаемого значения переменной в миксе

.average(@x, @y) {
  @average((@x + @y)/2);
}

div {
  .average(16px, 50px);
  padding: @average;
}

//编译结果
div {
  padding: 33px;
}
/*
1、将16px 和 50px 赋值给混合 .average进行计算
2、计算结果赋值给变量 @average
3、然后在div中调用@average的值
4、编译后就得到了average的值33px
*/

5. Операция

  • Операции можно выполнять с любым числом, значением цвета и переменной.

5.1 Численные операции

  • less автоматически рассчитает единицу значения, нет необходимости добавлять единицу к каждому значению
  • Операторы должны быть разделены пробелами, используйте круглые скобки, если есть проблема приоритета
.wp {
  width: (450px - 50)*2;
}

//编译输出
.wp {
  width: 900px;
}

5.2 Работа со значением цвета

  • Сначала преобразуйте значение цвета в режим rgb, затем преобразуйте его в шестнадцатеричное значение цвета после операции и верните
  • Примечание. Значение — 0–255, поэтому вычисление не может превышать этот диапазон, а значение по умолчанию — 0 или 255.
  • Примечание. Вы не можете использовать названия цветов для прямых операций.
.content {
  color: #000000 + 8;
}

//rgb(0,0,0) + 8
//rgb(8,8,8)
//十六进制：#080808

//编译输出
.content {
  color: #080808; 
}

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

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

6.1 Использование символа «>»

//混合集
#bgcolor() {
  background: #fff;
  .a() {
    color: #888;
    &:hover {
      color: #ff6600;
    }
    .b() {
      background: #ff0000;
    }    
  }
}

.bgcolor1 {
  background: #fdfee0;
  #bgcolor>.a;     //只使用.a()
}
.bgcolor2 {
  #bgcolor>.a>.b;  //只使用.b()
}

//编译输出
.bgcolor1 {
  background: #fdfee0;
  color: #888;
}
.bgcolor1:hover {
  color: #ff6600;
}
.bgcolor2 {
  background: #ff0000;
}

6.2 Опустите «>» и замените его пробелом

//混合集
#bgcolor() {
  background: #fff;
  .a() {
    color: #888;
    &:hover {
      color: #ff6600;
    }
    .b() {
      background: #ff0000;
    }    
  }
}

.bgcolor1 {
  background: #fdfee0;
  #bgcolor .a;     //只使用.a()
}
.bgcolor2 {
  #bgcolor .a .b;  //只使用.b()
}

//编译输出
.bgcolor1 {
  background: #fdfee0;
  color: #888;
}
.bgcolor1:hover {
  color: #ff6600;
}
.bgcolor2 {
  background: #ff0000;
}

7. Представьте

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

7.1 Знакомство с файлом less

//main.less
@wp: 960px;
.color {
  color: #fff;
}

//当前less文件
@import "main"; //可以不加后缀
.content {
  width: @wp;
}

//编译输出
.color {
  color: #fff
}
.content {
  width: 960px;
}

7.2 Импорт CSS-файла

  • Примечание. Правила CSS нельзя смешивать с проектом, а "@import xxx.css" будет выводиться после компиляции как есть.
  • И имя суффикса не может быть опущено при импорте
//main.css
.color {
  color: #ff6600;
}

@import "main.css" ;
.content {
  width: @wp;
  height: @wp;
}

//编译输出
@import "main.css";  //原样输出,但有效，css有这条语句
.content {
  width: 960px;
  height: 960px;
}

7.3 Введение с параметрами

  • Once: по умолчанию, вводится только один раз
  • ссылка: используйте файл less, но не выводите, обратите внимание на приведенный выше пример (если его не использовать, смесь будет выводиться без круглых скобок)
@wp: 960px;
.color {
  color: #fff;
}

//当前less文件
@import (reference) "main";
.content {
  width: @wp;
}

//编译输出
.content {
  width: 960px;
}
  • встроенный: включать меньше файлов в вывод, но не может манипулировать
@wp: 960px;
.color {
  color: #fff;
}

//当前less文件
@import (inline) "main"; 
.content {
  width: @wp;
}

//编译输出
@wp: 960px;    //报错，@wp未知
.color {
  color: #fff;
}
  • меньше: относиться к файлам как к меньшим файловым объектам, независимо от расширения файла.
//main.css文件
.color {
  color: #ff6600;
}

//当前less
@import (less) "main.css";
  .content {
.color;
}

//编译输出
.color {
  color: #ff6600;
}
.content {
  color: #ff6600;
}
  • css: обрабатывать файл как объект файла css, независимо от расширения файла.
//当前less文件
@import (css) "main.less";
.content {
  color: red;
}

//编译输出
@import "main.less";
.content {
  color: red;
}
  • множественный: позволяет вводить несколько файлов с одинаковым именем файла
//当前less
@import (multiple) "main.less";
@import (multiple) "main.less";
@import (multiple) "main.less";
.content {
  width: @wp;
}

//编译输出
.color {
  color: #fff;
}
.color {
  color: #fff;
}
.color {
  color: #fff;
}
.content {
  width: 960px;
}

8. !important

  • Приоритет увеличения веса самый высокий (старайтесь не использовать его)
  • Добавьте ключевое слово !important после вызываемого миксина, и все свойства миксина наследуют !important
.foo(@bg: #fdfdfd, @color: #900) {
  background: @bg;
  color: @color;
}

.important {
  .foo() !important
}

//编译输出
.important {
  background: #fdfdfd !important;
  color: #990000 !important;
}

9. Условные выражения

9.1 Условное смешивание

  • Операторы сравнения: >, >=, =, =
  • Формат: когда () { }
// lightness() 是检测亮度的函数，用%度量
.mixin(@a) when(lightness(@a) >= 50% ) {
  background-color: black;
}
.mixin(@a) when(lightness(@a) < 50% ) {
  background-color: white;
}

.mixin(@a) {
  color: @a;
}
.class1 {
  .mixin(#ddd);
}
.class2 {
  .mixin(#555);
}

//编译输出
.class1 {
  background-color: black;
  color: #dddddd;
}
.class2 {
  background-color: white;
  color: #555555;
}

9.2 Функции проверки типа

  • Тип значения обнаружения
  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl
.mixin(@a: #fff; @b: 0) when(isnumber(@b)) {
  color: @a;
  font-size: @b;
}
.mixin(@a; @b: black) when(iscolor(@b)) {
  font-size: @a;
  color: @b;
}

9.3 Функция обнаружения устройства

  • Проверьте, находится ли значение, отличное от числа, в определенной единице измерения
  • ispixel
  • ispercentage
  • isem
  • isunit
.mixin(@a) when(ispixel(@a)) {
  width: @a;
}
.mixin(@a) when(ispercentage(@a)) {
  width: @a;
}

.class1 {
  .mixin(960px);
}
.class2 {
  .mixin(95%);
}

//编译输出
.class1 {
  width: 960px;
}
.class2 {
  width: 95%;
}

10. Петля

  • Миксин может вызывать сам себя, и когда миксин рекурсивно вызывает сам себя, он формирует структуру цикла.
.loop(@counter) when(@counter > 0) {
  .h@{counter} {
    padding: (10px*@counter);
  }
  .loop((@counter - 1)); //递归调用自身
}
div{
  .loop(5);
}

//编译输出
div .h5 {
  padding: 50px;
}
div .h4 {
  padding: 40px;
}
div .h3 {
  padding: 30px;
}
div .h2 {
  padding: 20px;
}
div .h1 {
  padding: 10px;
}

11. Объединить свойства

  • Объединение нескольких правил в одно

11.1 Метод 1

  • Добавьте двоеточие перед объединяемым свойством"+", объединены и разделены запятыми
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin;
  box-shadow+: 0 0 20px black;
}

//编译输出
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black; //逗号分隔两个属性值

11.2 Метод 2

  • Добавьте «+_» перед двоеточием атрибутов, которые нужно объединить, и разделите слияния пробелами.
.mixin() {
  background+_: #f66;
  background+_: url("/sss.jpg") 
}

.class {
  .mixin;
}

//编译输出
.class {
  background: #f66 url("/sss.jpg"); //空格分隔
}

11.3 Сочетание двух способов

.mixin() {
  background+_: #f66;
  background+: url("/sss.jpg");
  background+_: no-repeat;
  background+: center;
}
.class {
  .mixin;
}

//编译输出
.class {
  background: #f66, url("/sss.jpg")  no-repeat, center;
}

12. Функциональная библиотека

  • Существует множество библиотек функций, инкапсулированных в less, таких как определение цвета, работа с цветом, смешивание цветов, обработка строк и т. д.

  • Например, color(): используется для анализа цвета, преобразования строки, представляющей цвет, в значение цвета.

body {
  color: color("#f60");
  background: color("red");
}

//编译输出
body {
  color: #ff6600;
  background: #ff0000;
}
  • Например, convert(): преобразует число из одного типа (единицы измерения) в другой.
  • Единица длины: м, см, мм, дюйм, pt, px, pc
  • Единица времени: с, мс
  • Угловые единицы: rad (радиан), deg (градус), grad (градиент), tum (круг)
body {
  width: convert(20cm, px);
}

//编译输出
body {
  width: 755.90551181px;
}

Спасибо за прочтение и лайк!

Категории