less 入门

less 简介

less是一门预处理语言，它是一个css的增强版，通过less可以编写更少的代码实现更大的样式
在less中添加了许多的新特性：像对变量的支持、对mixin的支持等等
less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器是无法直接执行less代码的，要执行必须要将less转换为css，然后再由浏览器执行

css3 变量

.box1 {
    width: 100px;
    height: 200px;
    background-color: #bfa;
}

效果：

而css3中是可以支持变量的，还有一些其他的函数
诸如:

• var(); 使用变量
  而定义变量的规制是：–变量名: 值;
• calc(); 计算函数

用变量和函数来实习上面的代码

html {
    --color: #bfa;
    --length: 100px;
}

.box1 {
    width: var(--length);
    height: calc(var(--length)*2);
    background-color: var(--color);
}

less 语法

注释

• // 双斜杠，单行注释，注释的内容不会被解析到css中，常用

• /**/ css中的注释，内容会被注释到css中

// less中的单行注释，注释中的内容不会被解析到css中

/*
    css中的注释，内容会被解析到css文件中
*/

变量

在变量中我们可以存储任意一个值
在我们需要时，可以任意的修改变量值

声明定义变量语法：@变量名: 变量值;

使用变量：

• 如果是直接使用则以 @变量名 的形式使用即可
• 如果是间接使用，例如作为变量名、url一部分、属性名等等，规则就是 @{变量名}
• 当变量发生重名时，会使用相同层级区块的变量
  如果在同一层级 区块内，则会优先使用最近的变量，就近原则
• 在同一区域内，若要使用相同的属性值，可以使用 $属性名，eg：width: 100px; height: $width;
• 变量的值也可以是一个变量

@a:200px;
@b:#bfa;
@c:box6;

.box5{
    //使用变量是，如果是直接使用则以 @变量名 的形式使用即可
    width: @a;
    color:@b;
}

//作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}

@d:200px;
@d:300px;

div{
    // 变量发生重名时，会优先使用比较近的变量
    @d:115px;
    width: @d;
    height: @e;
}

//可以在变量声明前就使用变量
@e:335px;

div{
    width: 300px;
    // 新版的语法
    height: $width;
}

$ 和 :extend()

$ 就表示外层的父元素
.box1{ $:hover{...} }

子元素选择器 > ，.box1{ >.box3{...} }，当然像 + ~ , 等都是可以这样用的

:extend() 函数，对当前的选择器扩展指定选择器的样式（选择器分组）
.p1{ width:100px;} .p2:extend{ color:red; }，此时在css中p2就有两个属性（一个在分组选择器里，一个在.p2里）

() 混合函数

1. () 可以直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制，mixin 混合
   .p3{ .p1(); }

2. 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
   .p4(){ width:100px; } .p5{ .p4; } 类p4在css中是不显示的，而p5是有.p4里内容的

3. 混合函数 在混合函数中可以直接设置变量

   // 定义混合函数，可以用形参和默认值
   .test(@w:100px,@h:200px,@bg-color:red){
       width: @w;
       height: @h;
       border: 1px solid @bg-color;
   }
   
   div{
       // 调用混合函数，按顺序传递参数
       // .test(200px,300px,#bfa);
       // 按名传递
       // .test(@bg-color:red, @h:100px, @w:300px);
   
       .test(300px);
   }

average()，计算颜色的平均值
color: average(red,blue);

darken()，加深颜色
darken(#bfa,50%);

运算 和 @import

在less中所有的数值都可以直接进行运算 + - * /
width: 100px * 2; height: 100px + 100px;

@import 导包，用来将其他的less引入到当前的less
@import "syntax.less";