less基础用法

less是什么

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS更易维护和扩展。 Less 可以运行在 Node 或浏览器端。

less语法

保留CSS的基础语法，并进行了扩展

@import "reset.css" //less在编译时不会变动css文件
@import "base" //less导入其他less文件时可以省略文件格式
@import url("base.less") //less也可以使用url形式导入，但是必须有后缀

运算

在less中，可以在书写属性时直接进行加减乘除

@fullWidth: 1200px;
.header{
    width: @fullWidth – 20px * 2;
    padding: 0px 20px*2;
}

变量

1.格式以`@`开头

@headergray: #c0c0c0;
@fullWidth: 1200px;
@logoWidth: 35%;

2.字符串插值

@name: banner;
background: url("images/@{name}.png") no-repeat;

// 编译后
background: url("images/banner.png") no-repeat;

3.避免编译

background: ~"red";
// 编译后
background: red;

混合

1.无参数方法(在一个类中继承另一个类)

方法犹如声明的集合，使用时直接键入名称即可。

.class1{
    color: red;
}
.class2{
    background: green;
    .class1;
}

其中 .class1 与 .class1() 是等价的。个人建议，为了避免代码混淆，应写成 :

.class1{
    color: red;
}
.class2{
    background: green;
    .class1();
}

编译后

.class1{
    color: red;
}
.class2{
    background: green;
    color: red;
}

2.默认参数方法

Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。
@arguments 犹如 JS 中的 arguments 指代的是全部参数。
传的参数中必须带着单位。

/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
}
#main{
    .border(0px,5px,30px,red);//必须带着单位
}
#wrap{
    .border(0px);
}
#content{
  .border;//等价于 .border()
}

/* 生成的 CSS */
#main{
    border:solid 1px red;
    box-shadow:0px,5px,30px,red;
}
#wrap{
    border:solid 1px #000;
    box-shadow: 0px 50px 30px #000;
}
#content{
    border:solid 1px #000;
    box-shadow: 10px 50px 30px #000;
}

3.方法的匹配模式

与面向对象中的多态很相似

/* Less */
.triangle(top,@width:20px,@color:#000){
    border-color:transparent  transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
    border-color:transparent @color transparent  transparent ;
}

.triangle(bottom,@width:20px,@color:#000){
    border-color:@color transparent  transparent  transparent ;
}
.triangle(left,@width:20px,@color:#000){
    border-color:transparent  transparent  transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
    border-style: solid;
    border-width: @width;
}
#main{
    .triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
  border-color:transparent  transparent  transparent #999;
  border-style: solid;
  border-width: 50px;
}

4.数量不定的参数

如果你希望你的方法接受数量不定的参数，你可以使用... ，犹如 ES6 的扩展运算符。

/* Less */
.boxShadow(...){
    box-shadow: @arguments;
}
.textShadow(@a,...){
    text-shadow: @arguments;
}
#main{
    .boxShadow(1px,4px,30px,red);
    .textShadow(1px,4px,30px,red);
}

/* 生成后的 CSS */
#main{
  box-shadow: 1px 4px 30px red;
  text-shadow: 1px 4px 30px red;
}

5.用&替换当前选择器

a{
    color: #000;
    &:hover{
        color: #f00;
    }
}

6.在父类中嵌套子类

.class1{
    p{
        span{
            a{ }
        }
        &:hover{  }
    }
    div{  }
}

编译后

.class1{ }
.class1 p{ }
.class1 p span{
.class1 p span a{ }
.class1 p:hover{  }
.class1 div{  }

注意：嵌套层级不要太深，后期修改样式不好维护

7.带参混合

.color(@color=red){
    color: @color;
}
.class1{
    .color(#0f0);
}
.class2{
    .color();
}

编译后

.class1{
    color: #0f0;
}
.class2{
    color: red;
}

灵活导入拓展性强，混合参数可以写默认值

8.块定义

@demo: {
	color: #f00;
}
body {
	@demo()
}

编译后

body {
	color: #f00;
}

该方式和类继承的区别在于该块不会出现在编译的CSS中。

函数

1.方法的条件筛选

Less 没有 if else，可是它有 when

/* Less */
#card{
    
    // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }

    // not 运算符，相当于 非运算 !，条件为 不符合才会执行
    .background(@color) when not (@color>=#222){
        background:@color;
    }

    // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}
/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}

要点

比较运算有： > >= = =< <。
= 代表的是等于
除去关键字 true 以外的值都被视为 false：

格式：statement when(conditons)、prop: if((conditions),value);

例子1：在less中使用一个带参类名展示上下左右四个方向的纯CSS三角形

index.less

.base(){
    width: 0;
    height: 0;
}
@normal: 20px solid transparent;
@anger: 20px solid #f00;
.triangle(@val) when(@val=left){
    .base();
    border-left: none;
    border-right: @anger;
    border-top: @normal;
    border-bottom: @normal;
}
.triangle(@val) when(@val=right){
    .base();
    border-right: none;
    border-left: @anger;
    border-top: @normal;
    border-bottom: @normal;
}
.triangle(@val) when(@val=top){
    .base();
    border-left: @normal;
    border-right: @normal;
    border-top: none;
    border-bottom: @anger;
}
.triangle(@val) when(@val=bottom){
    .base();
    border-left: @normal;
    border-right: @normal;
    border-top: @anger;
    border-bottom: none;
}
.div1{
    .triangle(left);
}
.div2{
    .triangle(right);
}
.div3{
    .triangle(top);
}
.div4{
    .triangle(bottom);
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet/less" href="index.less">
        <script src="../less-1.3.3.min.js"></script>
    </head>

    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </body
</html>

2.循环

Less 并没有提供 for 循环功能，但这也难不倒聪明的程序员，使用递归去实现。下面是官网中的一个 Demo，模拟了生成栅格系统。

/* Less */
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
/* 生成后的 CSS */
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

例子：将8个td的背景依次更换为bg_1.png、bg_2.png、…、bg_8.png

table td{
    width: 200px;
    height: 200px;
    .loop(@i) when(@i<9){
        &:nth-child(@{i}){
            background: url(~"../images/partner_@{i}.png") no-repeat;
        }
        .loop(@i+1);
    }
    .loop(1);
}

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}

编译后

编译后
div {
  width: 25px;
  width: 50px;
  width: 75px;
  width: 100px;
  width: 125px;
  width: 150px;
  width: 175px;
}

继承

extend 是 Less 的一个伪类。它可继承所匹配声明中的全部样式。

1.extend 关键字的使用

/* Less */
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/* 生成后的 CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

2.all 全局搜索替换

使用选择器匹配到的全部声明。

/* Less */
#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/* 生成的 CSS */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

3.减少代码的重复性

从表面看来，extend 与方法最大的差别，就是 extend 是同个选择器共用同一个声明，而方法是使用自己的声明，这无疑增加了代码的重复性。

方法示例与上面的 extend 进行对比：

/* Less */
.Method{
  width: 200px;
  &:after {
      content:"Less is good!";
  }
}
#main{
  .Method;
}
#wrap{
  .Method;
}

/* 生成的 CSS */
#main{
  width: 200px;
  &:after{
    content:"Less is good!";
  }  
}
#wrap{
  width: 200px;
  &:after{
    content:"Less is good!";
  }  
}

导入

用less写文件的时候，可以一个模块写一个less，但是index.html里面都要引用，引用那么多个less文件就不合适了，这个时候就要建立一个总的less，这是有一种解耦的开发思想，"高内聚，低耦合"。

下面来梳理一下结构： <less里面所需要的模块>

变量
函数
功能模块（视自己的情况而定）
总（引用变量、函数、功能模块）

首先在index.less中引入

/*index.less*/
@import "variable.less";      /*引入变量，后面可以加后缀*/
@import "mixin.less";         /*引入函数*/
@import "topBar.less";        /*引入功能模块1*/
@import  "navBar.less";       /*引入功能模块2*/

在index.html中值需要引入一个index.less即可

less的基础用法