LESS基础教程

Posted 2020-11-25 tourey-fatty

一、初见LESS

1. 什么是LESS

Less是Css的预编译语言，兼容Css语法，在其基础上扩展，可以使用变量，混合，继承，函数等语法，更贴近编程语言，在开发时使用，生产时将Less转换为Css文件。

2. LESS的官方网站

中文网址：http://lesscss.cn/

3. LESS与CSS的写法

CSS的写法

.content{
    display: flex;
}
.content .item{
    width: 100rem;
    height: 100rem;
    background: pink;
    color: #fff;
}

LESS的写法

.content{
    display: flex;
    .item{
        width: 100rem;
        height: 100rem;
        background: pink;
        color: #fff;
    }
}

4. 搭建开发环境

因为less其实无法在浏览器上运行的，它要编译成CSS才行。主要以下方法

• 下载less.js文件，利用该文件编译less，但是太建议使用
• 借助考拉这软件编译
• 借助vs code，在该编辑器安装编译less的插件，less文件保存后就会自动生成对应的CSS
• 借助node环境

因为前面两种没用过，所以主要介绍下后两种

在vs code安装less的编译插件

安装插件Easy LESS，如下图所示

有了这个后，可以在编辑器新建less文件，后缀名是.less,保存后会自动编译成css

使用node

要使用node就要先安装node，这个就自己去官网下载吧，傻瓜式安装，无需多言

node官网：https://nodejs.org/

如果不知道自己的电脑有没有安装node的话，打开终端，也就是window的cmd，至于苹果电脑的，很抱歉，我不知道，本人用的是window。

查看node版本，最好是版本8以上的，本人是v12.13.0

node -v

有了node后，就有了npm这个包管理工具，现在的Node版本会自带npm的

接下来就是安装less了，我这里用全局安装，这样在哪里都可以用了

npm install less -g

查看版本

lessc -v

在自己电脑上新建一个文件夹，再新建一个less文件

代码如下

@bg: #000;
.div{
    height: 2rem;
    width: 2rem;
    background: @bg
}

使用命令行

cd 你自己的less文件所在的地址

如cd C:UsersasusDesktopless教程

命令行

lessc style.less

这个会在终端输出编译后的css代码

命令行

lessc style.less style.css

会输出编译好的CSS文件

如果要卸载全局依赖

npm uninstall less -g

二、LESS语法

1. 注释

less的注释有两种

//这种注释，在编译后不会出现在CSS文件上

/*这种注释，编译后会出现在CSS文件上*/

2. 变量

2.1 普通的变量

变量的定义

@变量名: 值;

例如

@bg: #000;
@length: 200rem;
div{
  width: @length;
  height: @length;
  background-color: @bg;
}

变量的值如果需要单位，要把单位一起写上

如果重复定义变量，那么后面的变量会覆盖前面的变量

@color: #333;
@color: #fff;
p{
  color: @color;
}

CSS

p {
  color: #fff;
}

2.2 变量的合法标识符

变量名是不能随便定义的，有些特殊的字符的变量名会导致编译报错，像#, .等，经过试试，可以使用数字，英文大小写，下划线，中划线，且开头可以是数字，其他特殊符号就不要去整了，这些也够用了，编程语言的标识符都没这么多。

2.3 作为选择器和属性名

<div class="div">
    
</div>
<p id="p1">
    
</p>

@div: div;// 选择器名
@width: width; // 属性名
@p: p1;

//使用的时候要加上花括号{}
.@{div}{
  @{width}: 200rem;
  height: 200rem;
  background: #ffffff;
}

#@{p}{
    color: #fff;
}

2.4 作为URL

@imgUrl: "./img.png"; // 图片地址
div{
    height: 2rem;
    width: 2rem;
    background: url("@{imgUrl}");
}

2.5 延迟加载

变量不一定要先声明后使用，可以先使用再声明，这样也是不会报错的，不过没有特殊情况，不建议这样写，影响可读性。

div{
  width: @length;
  height: @length;
  background-color: @bg;
}

@bg: #000;
@length: 200rem;

2.6 变量的作用域

存在多个相同变量时，会使用最后定义的变量，less会在当前作用域向上搜索。

花括号{}就是一个作用域

LESS

@color: #fff;
div{
  color: @color; // #888;

  @color: #777;
  border-color: @color; // #888;
  p{
    @color: #000;  // 如果这里没有定义，就会去外部的作用域寻找该变量
    color: @color; // #000;
  }

  background: @color; // #888;  
  @color: #888;  // 最后定义的，所以会使用这个变量
}

CSS

div {
  color: #888;
  border-color: #888;
  background: #888;
}
div p {
  color: #000;
}

三、混合

混合就是将一系列属性从一个规则集引入到另一个规则集中。

通俗来讲就是将相同的CSS片段抽取到一个类中，其他类可以引用这个类。

3.1 普通混合

h1 {
  font-size: 36px;
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}
h2 {
  font-size: 32px;
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}

上面有相同片段的代码，可以提取出来放在一个类里

.mixins{
    font-family: "楷体";
    border: 1px solid #ffffff;
    color: pink;
}

h1{
    font-size: 36px;
}
h2{
    font-size: 32px;
}

之后在需要这个类(混合)时，引入这个混合

.mixins{
    font-family: "楷体";
    border: 1px solid #ffffff;
    color: pink;
}

h1{
    font-size: 36px;
    .mixins;
}
h2{
    font-size: 32px;
    .mixins;
}

这样编译出来的CSS是这样的

.mixins {
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}
h1 {
  font-size: 36px;
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}
h2 {
  font-size: 32px;
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}

这个类.mixins被输出了，这样就显得有点多余了，所以接下来是，让它不输出的混合

3.2 不能输出的混合

要让混合不输出，只要在后面加上括号()就行了

.mixins(){
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}

h1{
  font-size: 36px;
  .mixins();
}
h2{
  font-size: 32px;
  .mixins();
}

输出CSS

h1 {
  font-size: 36px;
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}
h2 {
  font-size: 32px;
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}

3.3 &符号的运用

&这个符号代表着父级的意思

h1{
  font-size: 36px;
  
  &:hover{
    color: pink;
  }
}

这时&就代表着父级h1

编译后的CSS

h1 {
  font-size: 36px;
}
h1:hover {
  color: pink;
}

混合中的&

.mixins(){
  &:hover{
    color: pink;
  }
}

h1{
  font-size: 36px;
  
  .mixins();
}
h2{
  font-size: 32px;
  .mixins();
}

这段代码等价于

h1{
  font-size: 36px;
  
  &:hover{
    color: pink;
  }
}
h2{
  font-size: 32px;
  &:hover{
    color: pink;
  }
}

所以编译后的CSS

h1 {
  font-size: 36px;
}
h1:hover {
  color: pink;
}
h2 {
  font-size: 32px;
}
h2:hover {
  color: pink;
}

3.4 带参数的混合

.mixins(@color){
  &:hover{
    color: @color;
  }
}

h1{
  font-size: 36px;
  
  .mixins(red); //传入颜色
}
h2{
  font-size: 32px;
  .mixins(pink); //传入颜色
}

3.5 带参数并且有默认值

.mixins(@color:pink){
  &:hover{
    color: @color;
  }
}

h1{
  font-size: 36px;
  
  .mixins(); // 不传参数时，默认为上面设置的pink
}
h2{
  font-size: 32px;
  .mixins(green);
}

3.6 带多个参数的混合

.mixins(@w, @h, @bgColor:#000){
  width: @w;
  height: @h;
  background: @bgColor;
}
.div1{
  .mixins(200px, 200px, pink); //参数要一一对应
}
.div2{
  .mixins(200px, 200px); // 最后一个参数因为有默认值，所以可以省略
}

如果没有一一对应，虽然不会报错，但是CSS会无效

.mixins(@w, @h, @bgColor:#000){
  width: @w;
  height: @h;
  background: @bgColor;
}
.div1{
  .mixins(200px, pink);// 这样没有一一对应，第二个参数的值不应该是颜色值
}

编译出的CSS

.div1 {
  width: 200px;
  height: pink; /*这里很明显不对*/
  background: #000;
}

那么问题来了，如果混合的参数排列是这样的

.mixins(@w, @bgColor:#000, @h){
  width: @w;
  height: @h;
  background: @bgColor;
}

如果这样的话，下面的写法就是个错误的

.mixins(@w, @bgColor:#000, @h){
  width: @w;
  height: @h;
  background: @bgColor;
}
//下面的代码会报错
.div1{
  .mixins(200px, 200px); 
}

改成这样

.mixins(@w, @bgColor:#000, @h){
  width: @w;
  height: @h;
  background: @bgColor;
}
//指定参数
.div1{
  .mixins(@w:200px, @h:200px); 
}

如下混合应该如何传参

如果margin要有四个值时，要如何传参

.mixins(@margin, @bgColor ){
  width: 200px;
  height: 200px;
  margin: @margin;
  background: @bgColor;
}

答案如下

.mixins(@margin, @bgColor ){
  width: 200px;
  height: 200px;
  margin: @margin;
  background: @bgColor;
}
//这里被分号分割了，这时可以看成两个参数，而2px,3px,4px,5px这一串将会被作为第一个参数
.div{
  .mixins(2px,3px,4px,5px;pink);
}

编译出的CSS

.div {
  width: 200px;
  height: 200px;
  margin: 2px, 3px, 4px, 5px;
  background: pink;
}

如果传参时的括号里面只有逗号，那么会一次传给各个参数

如果传参时既有逗号和分号，那会把分号之前的看成一个整体

.mixins(2px,3px,4px,5px;)这样是一个参数

3.7 定义多个相同名称和相同参数个数的混合

先来看相同名字的混合，但参数个数不同

.mixins(@color){
  color: @color;
}
.mixins(@color, @w){
  color: @color;
  width: @w;
}

.div{
  .mixins(pink);
}
.div1{
  .mixins(pink, 20px);
}

编译后的CSS

.div {
  color: pink;
}
.div1 {
  color: pink;
  width: 20px;
}

从上面看来，混合会自己匹配，只有一个参数的会去找一个参数混合，两个就会去找有连个参数的混合

如果混合名相同，参数个数也相同呢？

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

.div1{
  .mixins(pink, 20px);
}

编译后的CSS

.div1 {
  color: pink;
  width: 20px;
  background: pink;
  height: 20px;
}

这样就很明显了，两个混合都会被引用

再来看另一种情况

相同混合名且参数名也相同

.mixins(@color){
  color: @color;

}
.mixins(@color, @w:200px){
  background: @color;
  width: @w;

}

.div1{
  .mixins(pink);
}

编译输出

.div1 {
  color: pink;
  background: pink;
  width: 200px;
}

其实这种情况和第二种其实是一样的，只不过因为有默认值，所以两个混合都被引用了。

3.8 @arguments变量

这个可以@arguments可以代表全部参数

.mixins(@b, @c){
  border: 1px @arguments;

}

.div1{
  .mixins(solid, pink);
}

编译后的CSS

.div1 {
  border: 1px solid pink;
}

3.9 匹配模式

自己定义一个字符串

比如

//t-l 这个是自定义的
.mixins(t-l,@w:5px){
  border-top-left-radius: @w;

}
.mixins(b-l,@w:5px){
  border-bottom-left-radius: @w;

}

.div1{
  .mixins(t-l); //这个将会匹配，这时会引用第一个
}

编译后的CSS

.div1 {
  border-top-left-radius: 5px;
}

再举个例子

.mixins(r){
  float: right;

}
.mixins(l){
  float: left;

}

.div1{
  .mixins(l);
}

编译后的CSS

.div1 {
  float: left;
}

3.10 得到混合中变量的返回值

.add(@w, @h){
  width: @w;
  height: @h;
  @margin: @w + @h;
}

div{
  .add(100px, 200px);
  margin: @margin; // 拿到上面混合定义的变量值
}

也可以有多个返回值

.add(@w, @h){
  width: @w;
  height: @h;
  @margin: @w + @h;
  @padding: @w+ @h + 100px;
}

div{
  .add(100px, 200px);
  margin: @margin;
  padding: @padding;
}

四、嵌套规则

像html一样的嵌套，让层级显得明显

4.1 普通的嵌套

举个栗子

HTML

<div class="div">
    <div class="item">
        <p>
            
        </p>
    </div>
    <div class="content">
        
    </div>
</div>

LESS

.div{
    width: 200px;
    .item{
        height: 400px;
        p{
            line-height: 2rem;
        }
    }
    .content{
        background: "#000";
    }
}

编译后的CSS

.div {
  width: 200px;
}
.div .item {
  height: 400px;
}
.div .item p {
  line-height: 2rem;
}
.div .content {
  background: "#000";
}

4.2 用&改变嵌套的顺序

.a{
  .b{
      .c{
          color: red;
      }
  }
}

编译后为

.a .b .c {
  color: red;
}

如果加上&

.a{
  .b{
      .c &{
          color: red;
      }
  }
}

编译后为

.c .a .b {
  color: red;
}

4.3 所有组合

利用多个&符号

p, a, ul ,li{
 
  & &{
    color: #fff;
  }
}

编译后

p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
  color: #fff;
}

五、运算

less的运算主要是数值型运算，颜色值运算，单位至少要存在一个，运算符要与值分开，涉及优先级时以括号()进行优先级运算。

5.1 数值运算

举个例子

div{
  width: 10px + 20;
  height: 10rem + 2;

}

.div{
  width: 10px + 5rem; // 有连个不同单位时会，使用第一个的单位  15px
  height: 10px + 2 * 4;
  line-height: (2px + 5px) * 4;
}

编译后

div {
  width: 30px;
  height: 12rem;
}
.div {
  width: 15px;
  height: 18px;
  line-height: 28px;
}

5.2 颜色值运算

LESS在运算时，会先转换为rgb模式，计算后再返回16进制的颜色值，因为rgb模式的值最大为255，所以超过这个值时，将默认使用最大数255。

div{
  color: #000000 + 2;
  background: red + green;
}

编译后

div {
  color: #020202;
  background: #ff8000;
}

六、命名空间

将一些需要的混合组合在一起，可以通过多层id或class来实现

#div(){
  height: 4px;
  .a(){
    color: red;

    .b(){
      width: 4px;
    }
  }

}

#p(){
  height: 4px;
  .a(){
    color: green;
  }

  .b(){
    background: red;
  }
}

div{
  #div > .a //只引用 #div 中的a
  // #div()>.a 这会引起报错
}

p{
  #p(); // 只引用id的样式
}

ul{
  #p .a; //也可以省略 > 用空格代替
}

编译后

div {
  color: red;
}
p {
  height: 4px;
}
ul {
  color: green;
}

七、@import和!important

7.1 引入

新建两个less文件，一个main.less，另一个style.less

可以在less文件中，引入另一个less文件，这样就可以使用其文件中的变量以及混合

main.less

@color: #000;

.add(){
  width: 4rem;
  height: 4rem;
}

style.less

@import './main.less'; // 引入

.a{
  .add();
  background: @color;

}

7.2 !important

在调用混合时使用该关键字，可以让混合中的属性都继承该关键字

.min(){
  width: 2px;
  height: 2px;
}

.a{
  .min();
}

.b{
  .min() !important;
}

编译后

.a {
  width: 2px;
  height: 2px;
}
.b {
  width: 2px !important;
  height: 2px !important;
}

八、条件表达式

类似编程语言的if，在less中用的是when

//lightness 计算亮度的函数
.mixin(@a) when(lightness(@a) >= 50%){
  background: black;
}
.mixin(@a) when(lightness(@a) < 50%){
  background: white;
}
.mixin(@a){
  color: @a;
}

//引用混合
.a{
    .mixin(#ddd); // 亮度大于 50% 所以 是 black
}
.b{
    .mixin(#333); // 亮度小于 50% 所以 是 white
}

编译后

.a {
  background: black;
  color: #ddd;
}
.b {
  background: white;
  color: #333;
}

九、循环

在LESS中混合可以调用自身，

关键字loop和when

.loop(@count) when(@count > 0){
  .loop(@count - 1); // 调用自身
  width: 10px * @count;

}

div{

  .loop(5);
}

编译后

div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

但是这样的代码没什么意义，所以来看另一个例子

.loop(@count) when(@count > 0){
  // 当变量作为选择器时，要加上花括号
  h@{count}{
    font-size: 10 * @count;
  }
  .loop(@count - 1); // 调用自身

}

.loop(6);

编译后

h6 {
  font-size: 60;
}
h5 {
  font-size: 50;
}
h4 {
  font-size: 40;
}
h3 {
  font-size: 30;
}
h2 {
  font-size: 20;
}
h1 {
  font-size: 10;
}

十、继承

一个类继承另一个类的样式，其实就是将两个类组合在一起，用逗号隔开

.center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.div:extend(.center){
  width: 400px;

}

.p:extend(.center){

}

编译后

.center,
.div,
.p {
  display: flex;
  justify-content: center;
  align-items: center;
}
.div {
  width: 400px;
}