一个跨行前端的小白菜随笔 —— Less的深入浅出

本人使用的是vue开发，所以直接npm进行安装

npm install --save less less-loader

一开始我们使用普通的CSS写法

.les{
  height: 200px;
  width: 400px;
  background-color: #42b983;
}
.les-1{
  height: 50px;
  width: 100px;
  background-color: red;
}

效果：

接下来，了解less的新特性

1、注释

// 编译后的CSS文件中不可见

/* 编译后的CSS文件中可见*/

2、变量规则

@ 进行声明变量（相当于 let）
属性值：@属性值
选择器和属性名：@｛选择器的名称或者属性名｝
URL：@｛url｝
变量延时加载（存在变量提升）

通过变量规则，修改上面的CSS

<style lang="less" scoped>

@color: red;   //自定义颜色值
   @gao:height;   //自定义属性名
   @selector:.les; //自定义选择器名称

@{selector}{          //放入自定义的选择器名称
  @{gao}: 200px;      //放入自定义的属性名
  width: 400px;     
  background-color: #42b983;
}
.les-1{
  height: 50px;
  width: 100px;
  background-color: @color;   //放入自定义的颜色值
}

</style>

3、嵌套

普通嵌套

.les{
  height: 200px;
  width: 400px;
  background-color: #42b983;
  .les-1{
    height: 50px;
    width: 100px;
    background-color: red;
  }
}

</style>

添加&的嵌套

这里我们添加一个 :hove属性,希望鼠标放到红色区域，颜色会变蓝色（&相当于取消空格，使hover和其它属性平级，而不是父子关系）

<style lang="less" scoped>

.les{
  height: 200px;
  width: 400px;
  background-color: #42b983;
  .les-1{
    height: 50px;
    width: 100px;
    background-color: red;
    &:hover{
      background-color: blue;
    }
  }
}

</style>

4、混合

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

普通混合

在这里，我们希望将小方块可以复制一份，但是又不想代码冗杂。那么可以采用类似于提取公共组件的方式，提出相同的部分。

所以我们在html代码中加入小方块3的div 盒子。同时在CSS中这样设置

<style lang="less" scoped>

.cube{                //提取出相同的内容
  height: 50px;
  width: 100px;
  background-color: red;
  &:hover{
  background-color: blue;
  }
}

.les{
  height: 200px;
  width: 400px;
  background-color: #42b983;
  
  .les-1{
    .cube;
  };
  
  .les-3{
    .cube;
  }
  }


</style>

效果

不带输出的混合

当然上面这样有个弊端，就是编译出来的CSS代码会多一份 .cube｛｝，为了消除这部分代码，可以采用类似函数的方式，将 .cube｛｝修改为 .cube(){}

.cube(){                //提取出相同的内容
  height: 50px;
  width: 100px;
  background-color: red;
  &:hover{
  background-color: blue;
  }
}

带参数的混合

除了能够完全拷贝之外，我们显然希望，还能有更多的可能，比如可以改变颜色、移动位置等等，那么可以采用类似函数的方式。

第3块小方块变成粉色，且高度变成100px

<style lang="less" scoped>

.cube(@color:red,@h:50px){                //放入参数变量,默认是红色；高度默认50px
  height: @h;                             
  width: 100px;
  background-color: @color;
  &:hover{
  background-color: blue;
  }
}

.les{
  height: 200px;
  width: 400px;
  background-color: #42b983;

  .les-1{
    .cube;
  };

  .les-3{
    .cube(pink,100px);                    //颜色变成粉色，高度调为100px
  }
  }

</style>

效果

匹配模式

当我们需要改变很多属性时，为了更好的在项目中运用，我们不希望每次都引入很多参数变量，修改很多变量。比如将上面的方块3 变成圆形和椭圆形。

我们可以只设定一个变量，当这个变量为S时，图形变成方块；变量为C时，变成圆形；变量为M时，变成椭圆

首先，我们需要制作好一个简单的库

.cube(@_,@color:red,@h:50px){            //提取代码中相同的部分，@_表示所有情况，无论选择哪种模式，都会自动加入里面的属性
  width: 100px;
  &:hover{
    background-color: blue;
  }
}

.cube(S,@color:red,@h:50px){                //选择S 表示方块
  height: @h;
  background-color: @color;
}

.cube(M,@color:red,@h:100px){                //选择M 表示圆
  height: @h;
  border-radius: 50px;
  background-color: @color;
}

.cube(C,@color:red,@h:50px){                //选择C 表示椭圆
  height: @h;
  border-radius: 40px;
  background-color: @color;
}

然后，在Less中选择相应的模式就行了

.les{
  height: 200px;
  width: 400px;
  background-color: #42b983;

  .les-1{
    .cube(S,green);       //绿色的方块
  };

  .les-3{
    .cube(M,pink);       //粉色的圆
  }
  }

效果

5、继承

继承相比于混合而言，性能更好（冗余代码更少），但灵活性差一点（继承不支持带参数）

还是上面的代码，现在我们想让1、3都居中

这里我想了两种方式：

第一种：把1嵌套到3里面，各自采用flex布局

第二种：采取子绝父相的方式，脱离文档流，magin设置为auto

我想了一下，似乎第二种更方便一点

.center(){                     //新增一个居中式子
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


.les{
  height: 200px;
  width: 400px;
  background-color: #42b983;

  position: relative;           //添加绝对定位，构成子绝父相的形式

  .les-1{

    .center();              //放到子盒子1中
    .cube(S,green);
     z-index:1;             //1呈现在3前面
  };

  .les-3{
    .center();             //放到子盒子3中
    .cube(M,pink,100px);
  }
  }

效果

效果达到了，但还是跟之前一样，有个性能问题（代码重复）。就是1和3里面的center编译出来后，会在les-1 les-3中产生相同的center的内容，我们希望把它提出来，只保留一份

.center{                     //这里这个式子不能用函数形式
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.les{
  height: 200px;
  width: 400px;
  background-color: #42b983;

  position: relative;           


  .les-1:extend(.center){    //继承
    .cube(S,green);
     z-index:1;}
  .les-3:extend(.center all){        //all表示继承center包括所有的伪类、伪元素
    .cube(M,pink,100px);
  }
  }

这样就产生了 les-1，les-3， .les-1.les-3 (继承得到的属性)

posted @ 2020-10-23 17:44 风中逆羽阅读(176) 评论(0) 收藏举报

刷新页面返回顶部

风中逆羽

一个跨行前端的小白菜随笔 —— Less的深入浅出

公告