Less的基本使用
简介
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，功能更加强大，开发更加方便。
工作流程
Less 包含一套自定义的语法及一个解析器，Less代码会先被编译成CSS，这样才会被浏览器识别，并引用编译后的CSS文件为元素添加样式。
注意
- less可以在服务器端，浏览器端被引用；
- 在浏览器端引用外部less文件会出现跨域问题
- 可以直接在html中使用less
- 或使用live server开启本地服务。
- less中的注释
- 以//开头的注释不会被编译到css文件中
- 以/**/包裹的注释会被编译到css文件中
基本使用
- 定义变量
（1）以@开头
@color:pink 当文件中所有的pink都要改成deeppink时，直接修改定义就可以了；
也可以设置属性/选择器变量/类名
@m:margin：使用到margin的地方都可以用@{m}的格式使用；
@selector:#wrap 使用到#wrap的地方都可以用@{selector}的格式使用；
@url:路径 使用到该路径的地方都可以用@{url}的格式使用。
（2）以$开头
$color:pink
background-color:$color;
- 变量的延迟加载
@var:0;
.class{
@var:1;
.brass:{
@var:2;
/*
编译后是3
当某一个位置需要@var这个变量的值时
他会解析一整个作用域中间的@var,再确定@var的值
*/
three:@var;
@var:3;
}
// 编译后是1
one:@var;
}
- less的嵌套规则
- CSS不支持代码嵌套，Less支持，嵌套代表选择器的父子关系
- &的使用(使平级) &表示外层的父元素
#wrap{
.inner{
/*
直接写:hover时由于嵌套
把hover当成inner的子元素去解析，hover没有效果
*/
&:hover{
}
}
}
- less混合
有重复样式时,可以将样式提前写好放在一个类里面，然后下面在引用时可以直接写该段样式代码的类名。
// (1)普通混合：
.juzhong{
xxxxx
}
// 下面有需要用到重复代码时可以这样
.a{
.juzhong
}
/*
普通混合的样式编译之后会在css文件中出现
但其实我们不想要这个编译结果，我们要的是.a的样式能够编译即可
*/
// (2)不带输出的混合:
.juzhong(){
xxxxx
}
// 与上述类似,区别在于加了个括号,该部分样式不会出现在编译后的css文件里面
// (3)带参数混合:
.juzhong(@w,@h,@color){
width:@w;
height:@h;
background-color:@color;
}
// 使用时记得传参
.a{
.juzhong(100px,50px,pink);
}
// (4)带参数且有默认值的混合:
// 与上述类似，只是在调用时如果不传参就有默认参数
.juzhong(@w:10px,@h:10px;@color:pink){
}
// (5)命名参数混合:
// 当形参和实参个数不匹配时可以使用命名参数
.juzhong(@w,@h,@color){
}
.a{
// 只给color赋值,若不指定@color,只传一个参数,默认会给第一个形参即width赋值
.juzhong(@color:black);
}
// (6)匹配模式
.triangle(L,@w,@c){
}
.triangle(R,@w,@c){
}
// 调用时 .triangle(L,40px,pink); .triangle(R,30px,black)
// (7)还有第7种arguments变量，不过以上6种已经满足大部分的开发需求。
- less计算
在less中可以进行加减乘除的运算
width:(100+100px) 计算双方只要有一方携带单位,结果就带有单位
- less继承
.p1{
display:inline-block;
color:red;
}
.p2:extend(.p1){
font-size:12px;
}
// 相当于p2继承了p1的样式,p2还有新的样式font-size:12px
- 函数
如：
对颜色取中间值的函数:average(red,yellow)
取更深的颜色 darken(#bfa,15%) 取比#bfa更深15%的颜色
- @import同样地，也可以引入外部的Less文件。
