一、什么是less
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
Less官网地址:http://lesscss.cn/
二、less编译工具
作用:将less类型的文件转换为css类型的文件。
常见的Less编译工具有: winLess、simpLess、Koala
koala 官网:http://koala-app.com/
三、less中的注释
- 以//开头的注释,不会被编译到css文件中
- 以/**/包裹的注释会被编译到css文件中
四、less中的变量
使用@来申明一个变量:@pink:pink
- 作为普通属性值来使用:直接用@pink
- 作为选择器和属性名:#@{selector的值}
- 作为url:@{url}
- 变量的延迟加载
例如:
less:
@color:deeppink;
@m:margin;
@selector:#wrap;
*{
padding: 0;
@{m}: 0;
@{selector}{
background-color: blue;
width: 200px;
height: 200px;
.inner{
background-color: @color;
height: 100px;
width: 100px;
left:50%;
right:50%;
}
}
}
变量的延迟加载示例:
less:
//css是块级作用域
@var:0;
.class{
@var:1;
.brass{
@var:2;
three:@var;//3
@var:3;
}
one:@var;
}
编译后的css文件:
.class {
one: 1;
}
.class .brass {
three: 3;
}
less中的加载是有延迟的,它会在当前作用域样式未加载之前先加载变量,而且是由内而外,先寻找作用域内的变量,如果没有在寻找作用域外的变量。
五、less中的嵌套规则
- 基本嵌套规则
- 嵌套规则允许在一个选择器中嵌套另一个选择器 ,这样可以使得代码看起来一目了然,后期维护也方便
- 一般不会嵌套太多层,嵌套的层数越多,性能就越差,建议一般嵌套三层左右
- &的使用
- & 符号可以表示对父选择器的引用
- 在一个内层选择器的前面,如果没有 & 符号,则这个内层选择器会被解析为父选择器的后代
- 如果内层选择器前面有一个 & 符号,则内层选择器会被解析为父选择器自身或父选择器的伪类
例如:
less:
*{
#wrap{
.inner{
&:hover{
background-color: yellow;
}
}
}
}
编译后的css文件:
* #wrap .inner:hover {
background-color: yellow;
}
less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方法。
简单来说:我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性。
有如下几种混合方式:
- 普通混合
- 不带输出的混合
- 带参数的混合
- 带参数且有默认值的混合
- 命名参数
- 匹配模式
- arguments
1. 普通混合
less转成css时公共部分还会保留。
less:
/*普通混合*/
/*.innerStyle是一个属性集*/
.innerStyle{
background-color: pink;
height: 100px;
width: 100px;
left:50%;
right:50%;
}
#wrap{
background-color: blue;
width: 200px;
height: 200px;
.inner{
/*调用.innerStyle中的属性*/
.innerStyle;
}
.inner2{
/*调用.innerStyle中的属性*/
.innerStyle;
}
}
编译后的css文件:
/* .innerStyle被保留了! */
.innerStyle {
background-color: pink;
height: 100px;
width: 100px;
left: 50%;
right: 50%;
}
#wrap {
background-color: blue;
width: 200px;
height: 200px;
}
#wrap .inner {
background-color: pink;
height: 100px;
width: 100px;
left: 50%;
right: 50%;
}
#wrap .inner2 {
background-color: pink;
height: 100px;
width: 100px;
left: 50%;
right: 50%;
}
2. 不带输出的混合:加()
less转成css时公共部分不保留
less:
.innerStyle(){
background-color: pink;
height: 100px;
width: 100px;
left:50%;
right:50%;
}
#wrap{
background-color: blue;
width: 200px;
height: 200px;
.inner{
.innerStyle;
}
.inner2{
.innerStyle;
}
}
编译后的css文件:
/* 注意:此时的css文件中没有 .innerStyle */
#wrap {
background-color: blue;
width: 200px;
height: 200px;
}
#wrap .inner {
background-color: pink;
height: 100px;
width: 100px;
left: 50%;
right: 50%;
}
#wrap .inner2 {
background-color: pink;
height: 100px;
width: 100px;
left: 50%;
right: 50%;
}
/*# sourceMappingURL=01.css.map */
3. 带参数的混合
less:
.innerStyle(@w,@h,@c){
background-color: @c;
height: @h;
width: @w;
left:50%;
right:50%;
}
#wrap{
background-color: blue;
width: 200px;
height: 200px;
.inner{
.innerStyle(pink,100px,100px);
}
.inner2{
.innerStyle(deeppink,50px,50px);
}
}
编译成css文件后:
#wrap {
background-color: blue;
width: 200px;
height: 200px;
}
#wrap .inner {
background-color: 100px;
height: 100px;
width: pink;
left: 50%;
right: 50%;
}
#wrap .inner2 {
background-color: 50px;
height: 50px;
width: deeppink;
left: 50%;
right: 50%;
}
/*# sourceMappingURL=01.css.map */
4. 带参数且有默认值的混合
.innerStyle(@w:10px,@h:10px,@c:pink){
background-color: @c;
height: @h;
width: @w;
left:50%;
right:50%;
}
#wrap{
background-color: blue;
width: 200px;
height: 200px;
.inner{
.innerStyle(pink,100px,100px);
}
.inner2{
.innerStyle();
}
}
编译成css文件后:
#wrap {
background-color: blue;
width: 200px;
height: 200px;
}
#wrap .inner {
background-color: 100px;
height: 100px;
width: pink;
left: 50%;
right: 50%;
}
#wrap .inner2 {
background-color: pink;
height: 10px;
width: 10px;
left: 50%;
right: 50%;
}
/*# sourceMappingURL=01.css.map */
5. 命名参数
给实参指定对应形参名,在参数有缺省的时候以便匹配到对应的形参。
less:
.innerStyle(@w:10px,@h:10px,@c:pink){
background-color: @c;
height: @h;
width: @w;
left:50%;
right:50%;
}
#wrap{
background-color: blue;
width: 200px;
height: 200px;
.inner{
.innerStyle(pink,100px,100px);
}
.inner2{
/* 指定实参给传给谁 */
.innerStyle(@c:yellow);
}
}
编译后的css文件:
.innerStyle(@w:10px,@h:10px,@c:pink){
background-color: @c;
height: @h;
width: @w;
left:50%;
right:50%;
}
#wrap{
background-color: blue;
width: 200px;
height: 200px;
.inner{
.innerStyle(pink,100px,100px);
}
.inner2{
.innerStyle(@c:yellow);
}
}
6. 匹配模式
triangle.less:
/*第一个参数是_@,不管下面哪个样式被执行都会自动调用这个样式*/
.triangle(@_,@w,@c){
width: 0;
height: 0;
border-width: @w;
border-style:solid;
}
/*三角形朝左*/
.triangle(L,@w,@c){
border-color:transparent @c transparent transparent;
}
/*三角形朝右*/
.triangle(R,@w,@c){
border-color:transparent transparent transparent @c;
}
/*三角形朝上*/
.triangle(T,@w,@c){
border-color: transparent transparent @c transparent;
}
/*三角形朝下*/
.triangle(B,@w,@c){
border-color:@c transparent transparent transparent;
}
03.less
@import "./triangle.less";
#wrap > .sjx{
.triangle(B,20px,yellow);
}
03.css
/*第一个参数是_@,不管下面哪个样式被执行都会自动调用这个样式*/
/*三角形朝左*/
/*三角形朝右*/
/*三角形朝上*/
/*三角形朝下*/
#wrap > .sjx {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: yellow transparent transparent transparent;
}
/*# sourceMappingURL=03.css.map */
7. arguments变量
less:
.border(@1,@2,@3){
border:@arguments;
}
#wrap > .sjx{
width: 200px;
height: 200px;
.border(1px,solid,red);
}
六、less运算
在less中可以进行加减乘除的运算。
less:
#wrap .inner{
width:(100+100px);
height: (100+200px);
border: 1px solid #000;
}
编译成css文件:
#wrap .inner {
width: 200px;
height: 300px;
border: 1px solid #000;
}
/*# sourceMappingURL=index.css.map */
七、less继承
混合与继承的区别:
- 混合情况下,编译后的css文件中还是会有大量重复的代码。
例如:
juzhong.less
.juzhong(@w,@h,@c){
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
width: @w;
height: @h;
background-color: @c;
}
mixin.less
@import "mixin/juzhong.less";
*{
margin: 0;
padding: 0;
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
.inner{
&:nth-child(1){
.juzhong(200px,200px,pink);
}
&:nth-child(2){
.juzhong(100px,100px,yellow);
}
}
}
}
编译后的css文件:
* {
margin: 0;
padding: 0;
}
* #wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
* #wrap .inner:nth-child(1) {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: pink;
}
* #wrap .inner:nth-child(2) {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: yellow;
}
/*# sourceMappingURL=mixin.css.map */
-
继承不支持带参数,灵活性较低。但是通过继承被编译的css文件无重复代码。
juzhong-extend.less:
.juzhong{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
}
.juzhong:hover{
background-color: red;
}
extend.less
@import "mixin/juzhong-extend.less";
*{
margin: 0;
padding: 0;
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
.inner{
/* all表示与juzhong相关的所有样式都被继承,如果不加all,.juzhong:hover不会被继承*/
&:nth-child(1):extend(.juzhong all){
width: 200px;
height: 200px;
background-color: pink;
}
&:nth-child(2):extend(.juzhong){
width: 100px;
height: 100px;
background-color: yellow;
}
}
}
}
编译后的css文件
/*这里是继承部分*/
.juzhong,
* #wrap .inner:nth-child(1),
* #wrap .inner:nth-child(2) {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.juzhong:hover,
* #wrap .inner:nth-child(1):hover {
background-color: red;
}
* {
margin: 0;
padding: 0;
}
* #wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
* #wrap .inner {
/* all表示与juzhong相关的所有样式都被继承,如果不加all,.juzhong:hover不会被继承*/
}
* #wrap .inner:nth-child(1) {
width: 200px;
height: 200px;
background-color: pink;
}
* #wrap .inner:nth-child(2) {
width: 100px;
height: 100px;
background-color: yellow;
}
/*# sourceMappingURL=extend.css.map */
八、避免编译
用~“”把避免编译的内容包含起来。
less:
*{
margin: 100/20px;
//原生css 用cac进行计算
padding: ~"cacl(200)";
}
编译后的css文件:
* {
margin: 5px;
padding: cacl(200);
}
/*# sourceMappingURL=test.css.map */