关于最近学习的Less预编译语言的笔记，欢迎大家一起探讨~Less 是一门CSS 预处理语言，它扩展了 CSS 语言，增

Less CSS预编译语言

Less 是一门CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
安装
- 浏览器端使用方式
  
  下载less.js到本地，链接如下：
  
  下载后放到项目中，在需要的html界面，使用script标签导入js（注意：样式文件需要放在引用less.js的语句前！！！不然没作用）
```
<link rel="stylesheet/less" type="text/css" href="styles.less" />
```
```
<script src="less.js" type="text/javascript"></script>
```
  其他提示
  - 确保在脚本之前包含样式表。
  - 链接多个.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，mixin或名称空间均不可访问。
  - 由于浏览器的原始策略相同，因此加载外部资源需要启用CORS
  - 在浏览器端引用less.js比较适合开发，但不建议用于生产环境
- Node服务端安装使用
  
  使用npm命令在node服务器端安装Less依赖
```
$ npm install -g less
```
  使用方式
```
$ lessc styles.less
```
  使用上述方式，可以将编译后的CSS输出到stdout
```
$ lessc styles.less styles.css
```
  使用上述方式，可以将编译后的样式保存到你新建的css文件中
less语法
- 变量
  
  使用@定义变量
```
@Baccolor:red
```
  作为URL来使用：@{url}
  
  变量的延迟加载：@变量的作用域是块级作用域，不管变量在作用域中赋值过几次，会在最后一次赋值后，才是该变量的值，即使在最后一次赋值语句前，已经使用该变量。
- 基础嵌套
  
  less基础语法就是嵌套，和html的嵌套一样，在父级选择器里面写子级选择器
```
<div class="el">
	<div class="ziji">
	</div>
</div>
```
```
.el{
	.ziji{
		color:@Baccolor
	}
}
```
  这里有个&的使用注意事项：&起的作用是使写在子级里的样式和父级同级
```
.el{
	.ziji{
		@：hover{
			color:green
		}
		color:@Baccolor
	}
}

编译后就是:
.ziji:hover{
    color:green
}
```
- 混合
  
  混合就是将一系列属性从一个规则集引入到另一个规则集的方式；目的就是为了减少css代码的冗余，用法看起来和函数一样，在选择器后加括号（）
  
  混合主要包括（普通混合、不带输出的混合、带参数的混合，带参数并且有默认值的混合、带多个参数的混合、命名参数、匹配模式、argument变量）
```
//不带输出的混合：单纯加个括号
.ziji(){

}
```
```
//带参数的混合：括号里面有形参
.ziji(@w,@c){
	width:@w;
	color:@c
}
```
```
//带参数并且有默认值的混合
.ziji(@w:100px,@c:red){
	width:@w;
	color:@c
}
```
```
.ziji(@_,@w,@c){
	可以放公共样式，形参需要加@_
}
.ziji(@w,@c){
	width:@w;
	color:@c
}
```
```
//匹配模式，在使用这个混合的地方，加上L或者R，以确定是使用哪个样式
.weizhi(L,@w,@c){
	float:left；
    width:@w;
    background:@c
}
.weizhi(R,@w,@c){
	float:right；
    width:@w;
    background:@c
}


//使用
.el{
    .ziji{
        @:hover{
            .weizhi(L,100px,red)
            }
    }
}
```
- 计算
  
  less计算和css加减乘除是一样的，唯一的区别是，只需要在进行运算的其中一方加上单位
```
.ziji(){
	width:calc(100 + 100px)
}
```
  加号两边要加空格啊啊啊啊啊
- 避免编译
  
  有时候不希望自己写的样式会被编译，可以这样做：
```
.weizhi(){
	width:~"calc(100% + 100px)"
}
```
总结

好了，到自己的总结了，这是我第二次写掘金，关于less，了解的还是皮毛，还有很多需要补的地方，希望大家多多包涵啊啊啊啊，欢迎提出需要更正的地方，谢过了！！

关于最近学习的Less预编译语言的笔记，欢迎大家一起探讨~

Less CSS预编译语言

其他提示

变量

基础嵌套

混合

计算

避免编译