如何使用less
- Koala自动监视编译/Webpack/FIS
- Sublime插件less2css自动编译 && Lessc
Terminal -> npm i less (支持lessc命令)
Sublime -> install package : Less2Css - less.min.js + httpserver
变量-Variables
1.普通的变量
变量的定义方式:@
//less文件
@blue:#5b83ad;
body{
color: @blue;
}
编译后
//css
body{
color: #5b83ad;
}
2.作为选择器和属性名
使用的时候将变量以"@{变量名}"的方式使用
实例:
//html
//less
@mySelector:width;
.@{mySelector}{
@{mySelector}:960px;
height: 500px;
background-color: red;
}
编译后的css文件
.width{
width: 960px;
height: 500px;
background-color: red;
}
3.作为url
使用时,使用""将变量的值括起来,使用的时候将变量同样以@{变量名}的方式使用
//less
@myUrl:"http://www.greentea.com/static/module/img"
body{
background: #ccc url("@{myUrl}/nav.png") no-repeat;
}
编译后
//css
body{
background: #ccc url("http://www.greentea.com/static/module/img/nav.png") no-repeat;
}
4.延迟加载
变量是延迟加载的,使用前不一定要预先声明
//less
.box{
background: @green;
width: 500px;
height: 500px;
}
@green:#801f77;
编译后
.box{
background: #801f77;
width: 500px;
height: 500px;
}
5.定义多个相同名称的变量时
在定义一个变量两次时,只会使用最后定义的变量,less会从当前作用域中向上搜索,这个行为类似于css的定义中始终使用最后定义的属性值
示例
//less
@var:0;
.class{
@var:1;
.brass{
@var:2;
three:@var;
@var:3;
}
one:@var;
}
编译后
.class{
one:1;
}
.class .brass{
three:3;
}
混合-Mixins
1.普通混合
什么是混合?混合就是一种将一系列属性从一个规则集引入('混合')到另一个规则集的方式
栗子
//less
.font_h{
color:red;
}
h1{
font-size: 28px;
.font_h;
}
编译后
.font_h{
color:red;
}
h1{
font-size: 28px;
color:red;
}
2.不带输出的混合
如果你想要创建一个混合集,但是却不想让他输出到你的css样式中,在不想输出的混合集的名字后面加上一个括号,就可以实现
栗子
//less
.my-mixin{
color: red;
}
.my-other-mixin(){
background: #ccc;
}
.class{
.my-mixin;
.my-other-mixin();
}
编译后
.my-mixin{
color: red;
}
.class{
color: red;
background: #ccc;
}
这里.my-other-mixin没有被编译到css样式文件中
3.带选择器的混合
栗子
//less
.my-hover-mixin(){
&:hover{
border:1px solid red;
}
}
button{
.my-hover-mixin();
}
编译后
button:hover{
border:1px solid red;
}
4.带参数的混合
//less
//定义混合
.border(@border-color){
border:2px solid @border-color;
}
//使用混合
.div{
.border(#f60);
//使用时我们需要传入一个参数进去
}
编译后
.div{
border:2px solid #ff6600;
}
也可以加默认值
.border(@border-color:#f60){
border:2px solid @border-color;
}
.div{
.border();
}
5.带多个参数的混合
什么是参数?一个组合可以带多个参数,参数之间可以用分号或者逗号分隔,但是推荐使用分号分隔,因为逗号有两个意思,它可以解释为mixins参数分隔符或者css列表分隔符
.mixin(@color;@padding:xxx;@margin:2){
color: @color;
padding:@padding;
margin:@margin @margin @margin @margin;
}
//赋值给color,padding和margin有默认值可以不用管
.div{
.mixin(red;)
}
编译后
.div{
color: #ff0000;
padding:xxx;
margin:2 2 2 2;
}
匹配模式
在匹配模式下,传值的时候定义一个字符,在使用的时候使用哪个字符,就调哪条规则
.border(all,@w:5px){
border-radius: @w;
}
.border(t_r,@w:5px){
border-top-left-radius: @w;
}
//让四条边都是圆角,就调用all
.border{
.border(all,50%);
}
编译后
.border{
border-radius: 50%;
}
得到混合中变量的返回值
//less
.average(@x,@y){
@average:((@x+@y)/2);
}
div{
.average(16px,50px);
padding:@average;
}
编译后
div{
padding: 33px;
}
嵌套
嵌套规则:嵌套规则它模仿了HTML的结构,让我们的CSS代码更加简洁
例子
/*传统css写法*/
#header{
color: red;
}
#header .nav{
font-size: 16px;
}
#header .logo{
width: 300px;
}
/*less中的写法*/
#header{
color:red;
.nav{
font-size: 16px;
}
.logo{
width: 300px;
}
}
编译后的css文件
#header{
color: red;
}
#header .nav{
font-size: 16px;
}
#header .logo{
width: 300px;
}
两者实现的结果是一样的,但是使用less嵌套写的代码结构更加清晰
父元素选择器&符号
&:表示当前选择器的所有父选择器
/*传统css写法*/
.bgcolor{
background: orange;
}
.bgcolor a{
color: green;
}
.bgcolor a:hover{
color: blue;
}
/*less中的写法*/
.bgcolor{
background: orange;
a{
color: green;
&:hover{
color: blue;
}
}
}
改变选择器的顺序
将&放到当前选择器之后,就会将当前的选择器插入到所有的父选择器之前
/*改变选择器的顺序*/
ul{
li{
.conter &{
background: red;
width: 200px;
height: 200px;
}
}
}
编译后
.conter ul li{
background: red;
width: 200px;
height: 200px;
}
运算
任何数值,颜色和变量都可以进行运算
数值型运算
less会为你自动推断数值的单位,所以你不比每一个值都加上单位.此外,运算符与值之间必须以空格分开,涉及优先级时以()进行优先级运算
//less
.wp{
width: 450px + 450;
}
编译后
.wp{
width: 900px;
}
颜色值运算
less在运算时,先将颜色转换为rgb模式,然后在转换为16进制的颜色值并且返回
//less
.content{
background: #000000 + 21;
}
编译后
.content{
background: #151515;
}
注意:既然是转换为rgb模式,rgb的取值范围是255,所以我们计算的时候不能超过这个区间,超过后默认使用最大值255计算!不能使用颜色名称(如:red,green)进行计算
函数
less中提供了许多用于转换颜色,处理字符串和进行算数运算的函数,这些函数使用起来非常简单
rgb()函数
将rgb模式的值转换为16进制的值
//less
.bgcolor{
background: rgb(0,143,0);
}
编译后
.bgcolor{
background: #008f00;
}
命名空间
将一些需要的混合组合在一起,可以通过嵌套多层id或者class来实现
.aaa(){
background: #000;
.bbb{
background: green;
width: 100px;
height: 100px;
}
}
.container{
.aaa > .bbb;
}
编译后
.container{
background: green;
width: 100px;
height: 100px;
}
也可以省略>用空格代替
作用域
less中的作用域与编程语言中的作用域概念非常相似,首先会在局部查找变量和混合,如果没找到,编译器就会在父作用域中查找,以此类推
@color:#ffffff;
.bgcolor{
width: 100px;
a{
color: @color;
}
@color:#ff0000;
}
编译后
.bgcolor{
width: 100px;
}
.bgcolor a{
color: #ff0000;
}
引入-Importing
你可以引入一个或多个.less文件,然后这个文件中的所有变量都可以在当前的less项目中使用
//main.less
@wp:960px;
//index.less
//引入main.less文件
@import "main";
.content{
width: @wp;
//使用main.less中定义的变量@wp
}
编译后
.content{
width: 960px;
}
引入css
@import "main";
@import "index.css"
在less文件中,不能混合css文件中的样式,引用的css文件会被原样输出到编译的文件中
关键字
在调用混合集后面追加!important关键字,可以使混合集里面的所有属性都继承!important
.foo(@bg:#f5f5f5,@color:#900){
background: @bg;
color: @color;
}
.unimportant{
.foo();
}
.import{
.foo()!important;
}
编译后
.unimportant{
background: #f5f5f5;
color: #990000;
}
.import{
background: #f5f5f5!important;
color: #990000!important;
}
条件表达式
带条件的混合
比较运算符:>, >=, =, <=, <, true
.mixin(@a)when(lightness(@a)>=50%){
background-color: black;
}
.mixin(@a)when(lightness(@a)<50%){
background-color: white;
}
.mixin(@a){
color: @a;
}
.class1{
.mixin(#ddd);
}
.class2{
.mixin(#555);
}
编译后
.class1{
background-color: black;
color: #dddddd;
}
.class2{
background-color: white;
color: #555555;
}
类型检查函数
可以基于值的类型来匹配函数
基本的类型检查函数:iscolor,isnumber,isstring,iskeyword,isurl
例子
//less
.mixin(@a)when(lightness(iscolor(@a)){
background-color: black;
}
.mixin(@a)when(lightness(isnumber(@a)){
background-color: white;
shuzi:shuzi;
}
.mixin(@a){
color: @a;
}
.class1{
.mixin(#ddd);
}
.class2{
.mixin(123);
}
编译后
.class1{
background-color: black;
color: #dddddd;
}
.class2{
background-color: white;
shuzi:shuzi;
color:123;
}
单位检查函数
检查一个值除了数字是否是一个特定的单位
基本的单位检查函数:ispixel,ispercentage,isem,isunit
例子
//less
.mixin(@a)when(ispixel(@a)){
background-color: black;
}
.mixin(@a)when(ispercentage(@a)){
background-color: white;
}
.mixin(@a){
width:@a;
}
.class1{
.mixin(960px);
}
.class2{
.mixin(95%);
}
编译后
.class1{
background-color: black;
width: 960px;
}
.class2{
background-color: white;
width: 95%;
}
循环-loop
在less中,混合可以调用它自身,这样,当一个混合递归调用自己,再结合Guard表达式和模式匹配这两个特性,就可以写出循环结构
//less
//递归调用自身.loop(@counter - 1)
//每次调用时产生的样式代码 width:(10px*@counter);
.loop(@counter) when (@counter>0){
.loop(@counter - 1);
width:(10px*@counter);
}
//调用循环
div{
.loop(5);
}
编译后
div{
width:10px;
width:20px;
width:30px;
width:40px;
width:50px;
}