Less

作者: greenteaObject | 来源:发表于2017-09-22 11:38 被阅读0次

less

如何使用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
<div class="width"></div>

//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;
}

网友评论

本文标题：Less

本文链接：https://www.haomeiwen.com/subject/ittfextx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！