less的简单使用

css预处理器之less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Mixin(混合)、函数等特性，使css更具维护和扩展

less既可以在客户端上运行，也可以借助node.js在服务器运行

less中的注释

以//开头的注释，不会编译到css文件中，给开发人员看

以/**/包裹的注释会被编译到css文件中

less中的变量

使用@来申明一个变量：

@red: red;

1.作为普通属性值来使用，直接使用@red

2.作为选择器和属性名，使用@{selector}的形式

3.作为url: @{url}

4.变量的延迟加载（等块级作用域下的变量全部加载完）

@var: 0;
.class{
	@var: 1;
	.brass{
		@var:2;
		three: @var;//3
		@var: 3;
	}
	one: @var;//1
}

less中的嵌套规则

1.基本嵌套规则(父包含子)

2.&的使用（可以去掉空格，不代表父子级关系，例如&:hover）

less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

/*使用：以点开头*/
.juzhong(@w:100px,@c:150px){
	width:@w;
    height:@c;
}
/*调用*/
.aside{
    .juzhong(50px,@c:100px)
}
/*普通混合 不带输出的混合 带参数的混合 带参数并且有默认值的混合 带多个参数的混合 命名参数*/

• 匹配模式

使用标识符时，可以使用同名的类，参数为(@_)表示自动调用该类

.triangle(@_){
	width:0px;
    height:0px;
    overflow:hidden;
}
.triangle(l,@w,@c){
    border-width: @w;
    border-style:dashed solid dashed dashed;
    border-color:transparent @c transparent transparent;
}
/*会自动调用第一个triangle类里的属性，可以改变三角形的朝向*/ 

• arguments变量

.border(@1,@2,@3){
	border: @arguments;
}
.saide{
    .border(1px,solid,red)
}

less运算

在less中可以进行加减乘除，计算的一方带单位就可以

less中的继承

/*性能比混合高，灵活度不如混合*/
.juzhong{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0; 
}
/*使用继承*/
.wrap{
    width:500px;
    .inner{
        &:extend(.juzhong all);//all表示包括.juzhong和它之后的类
        &:nth-child(1){
            width:100px;
        }
    }
}

less避免编译

使用波浪号+双引号
~""

less在vscode中使用

1. 下载 Easy LESS插件

2. 在文件->首选项->设置，输入less.compile，在settings.json中编写配置文件

  "less.compile": {
      "compress": false,//是否压缩
      "sourceMap": false,//是否生成map文件
      "out": "${workspaceRoot}\\css\\"//生成css文件的路径，workspaceRoot表示根目录
      //"out":true 表示将css文件生成到当前less文件所在目录
  },