less入门 常用特性

Less

前言

当我们做一个项目时，会有一个主题色，而且页面的字体颜色大部分是固定的，如果使用css，当你的boss说这个颜色不好看，换一个，那你就得一个一个去改，难进行代码的维护。理想状态应该是：只要我们修改bgcolor、color变量，整个页面的颜色都会随之改变。下面我们就一起了解一下less。

安装Less

1. 在页面中 引入 Less.js
   • 可在官网下载
   • 使用CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less。

 <link rel="stylesheet/less" href="style.less">
 <script src="less.min.js"></script>

1. 在命令行 使用npm安装

npm install -g less

less的常用特性

less——变量

1.值变量

• 以@开头定义变量，使用时：@加名称

@color:red;

#app{
    background：@color;
}

在平时工作中，我们就可以把常用的变量封装到一个文件中，这样利于代码组织维护。

2.url变量

@image:'../img';

#app{
    background:url("@{image}/i.jpg") //变量名要用大括号包着
}

在目录结构改变时，直接修改变量即可

3.变量运算

//可以进行加减乘除
@width:100px;
@color:#111;

 #app{
        width:@width-20;
        height:@width-20*5;
        margin:(@width-20)*5;
        color:@color*2;
        background-color:@color + #111;
      }

less——函数

函数

.test(@w,@h,@color){
  width: @w;
  height: @h;
  background: @color;
}

div{
    .test(100px,100px,yellow)
}

导入

在less文件中可以引入其他的less文件。使用关键字import。

//导入less文件，可以省略后缀。
import "index.less"
import "index"

less——继承

• 减少代码重复性

.box1{
    width:100px;
    height:100px;
    background:red;
}
.box2{
    @:extend(.box1)
}

less——可以写js代码

• JS来控制 CSS ，形成 动态属性

@content:`"aaa".toUpperCase()`;//转大写字母
//随机颜色
#randomColor{
  @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
}
#wrap{
  width: ~"`Math.round(Math.random() * 100)`px";
  &:after{
      content:@content;
  }
  height: ~"`window.innerHeight`px";
  alert:~"`alert(1)`";
  #randomColor();
  background-color: @randomColor;
}