less的基本用法

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

1 前言

当我们用多了CSS的时候，特别是由后端转前端的道友们用CSS的时候，会发现CSS简单易懂，但是毫无逻辑，我们来看看下面几种情况：

1. 常常一个颜色的值能出现很多很多次，或者一个宽度的值能出现很多次；
2. 大量的选择器在代码中，一会用那个，一会用这个，毫无逻辑，无层次，不美观，不易维护；
3. 每一个新属性的诞生又会带来大量浏览器兼容性的问题；
4. 此外，CSS虽然易学，好用，但其短板不可忽视，于是就引入了预处理语言

2 预处理语言

我了解到的是less、sass，这里在后面会主要说less,欢迎道友补充指正

2.1 sass

sass诞生于2007年，是一个将脚本解析成CSS的脚本语言，最开始叫缩进语法，较新的叫SCSS，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将不同的样式分开，通常扩展名为.sass或者.scss包含变量，嵌套，混入等，和less类似，下面看less，学会了less的基本语法，对sass就能有一定程度的掌握了

2.2 less

less是一门CSS预处理语言，它扩充了CSS，增加了我们前面提到的能够使得代码更有逻辑性的东西，例如变量，混入，函数等，后缀名为.less，同时，less可以运行在Node或者浏览器端

2.2.1 less 初体验

使用 less 方案一：

1. 引包：在页面中直接引入less.js，可去官网下载放到自己的依赖包文件中，或者利用CDN在线引入

<script src="/libs/less.js/2.7.2/less.min.js"></script>

2. 引入自己写好的less文件：link 标签一定要在 Less.js 之前引入，并且 link 标签的rel 属性要设置为stylesheet/less

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

3. 书写CSS文件看看

/* style.css */
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

4. 我们用less语法去书写和上面CSS同样功能的代码来看看

/* style.less */
@mainColor:#e92323;
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}
//变量用于字符拼接使用方法
.@{className}{
  color: @mainColor;
}

5. 总结：很显然，我们看出将经常出现的#e92323的值存储在一个变量中，这样清晰直观，假如需要修改某个网站的主题色，那么直接修改这个变量即可，我们.box这个类选择器也储存在一个变量中，同样的道理，易于维护
6. 到这里，你可能已经爱上它了

使用 less 方案二：

1. 使用包管理工具npm直接安装less

npm i less -g

2. 使用命令，将less文件编译成css文件

lessc style.less > style.css

3. 在webpack打包工具中可以使用less-loader处理

2.2.2 编译工具

在这里可以选用VSCode或者Sublime Text 3，在使用less之前，建议大家先给自己的开发工具安装一个牛逼轰轰的插件，在VSCode中，可以Ctrl + Shift + X到左侧扩展商店里安装Easy LESS插件，在Sublime中安装Less2Css插件，他们有什么用呢？他们可以实时编译less文件为CSS文件，方便及时修改和查看，另外sublime安装插件的方法，请移步sublime安装插件&常用的sublime插件

效果大概如下图

2.2.3 变量

关于less中变量、函数等，其实就和我们接触到的其他语法中的理解起来差不多，下面来举例理解

变量：想想js里面的变量，是干什么的？存储值，防止同一个值重复出现，提高代码维护效率，这里其实差不多

/* style.less */

@charset "UTF-8";
/*注释：在css当中可以使用，所有编译的过程当中生成在css文件*/
//注释：css不支持,不会编译在css文件

/*变量*/
//必须@前缀，：是等于的以上，必须分号结束；
//不能以数组开头，不能包含特殊字符，区分大小写
@mainColor:#e92323;
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}
//变量用于字符拼接使用方法
.@{className}{
  color: @mainColor;
}

/* style.css */
@charset "UTF-8";
/*注释：在css当中可以使用，所有编译的过程当中生成在css文件*/
/*变量*/
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

2.2.4 嵌套

十分神奇，写完它，你会觉得样式代码层次感十足，逻辑分明，主要是看着爽，选择器便于查找，易于维护

这是我做的一个防微金所小项目里的一段代码

@charset "UTF-8";
.wjs_app{
  display: block;
  img{
    display: none;
  }
  // 需要连接的情况使用 &
  &:hover{
    img{
      display: block;
      position: absolute;
      left: 50%;
      margin-left:-60px;
      border: 1px solid #ccc;
      border-top: none;
      top:40px;
      z-index: 100000;
    }
  }
  >div{
    display: block;
  }
  &::before{
    content: "";
  }
}

@charset "UTF-8";
.wjs_app {
  display: block;
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  border: 1px solid #ccc;
  border-top: none;
  top: 40px;
  z-index: 100000;
}
.wjs_app > div {
  display: block;
}
.wjs_app::before {
  content: "";
}

看看以上的代码，less文件中是不是层次感十足，这里说几点问题

1. &，当需要连接时使用&，代表上层选择器的名字，这里代表.wjs_app，例如可以写&:active，&::before，&:hover等等
2. 其他选择器，例如>，即与父元素有直接的血缘关系的子元素，在后面直接接上就行

2.2.4.1 媒体查询@media

媒体查询，在响应式布局上应用十分广泛，那么在CSS中我们往往需要将一个类分开写，例如下面这样

      .container{
        width:750px;
      }
      @media screen and (max-width:768px){
        .container{
          background: red;
        }
      }

而在less中，可以利用嵌套，将他们写在一块

      /* Less */
      .container{
          width: 750px;
    
          @media screen{
              @media (max-width:768px){
                background-color: red;
              }
          }
          @media tv {
            background-color: yellow;
          }
      }

      @media screen and (maxwidth:768px){
       .container{
            background-color: red; 
        }
      }
      @media tv{
        .container{
          background-color: yellow;
        }
      }

2.2.5 函数

2.2.5.1 一些内置函数

判断：isnumber，iscolor，isurl,分别判断是否是一个数字，颜色，url

颜色操作：lighten增加颜色亮度，darken降低颜色亮度，fade增加透明度，mix根据比例混合两种颜色，saturate增加颜色饱和度等等

数学函数：ceil向上取整，floor向下取整，round四舍五入，sqrt平方根，abs绝对值，pow幂，percentage浮点数转化为百分比字符串等

2.2.5.2 自己写个函数来用用

.fun() {
  width: 100px;
}

.container {
  .fun();
}

.container {
  width: 100px;
}

2.2.6 混入

1. 组合样式混入
2. 类混入
3. 函数混入

@charset "UTF-8";
/*混入*/
/*组合样式的例子*/
.w50{
 width: 50%;
}
.f_left{
 float: left;
}
.f_right{
 float: right;
}
/*类混入*/
.w50-f_left{
 .w50();
 .f_left();
}

/*函数混入*/
/*定义函数*/
.w50(){
  width: 50%;
}
/*定义函数包含参数*/
.f_left(){
 float: left;
}
.f_right(){
 float: right;
}
/*
1.定义了参数（没有默认值），调用的时候必须传参
2.怎么定义默认值 和定义变量值是一样的
3.定义了参数（有默认值），可传可不传
*/
.f(@direction:left){
  float: @direction;
}
.borderRadius(@width:100px){
  border-radius: @width;
  -webkit-border-radius:@width;
  -moz-border-radius:@width;
  -o-border-radius:@width;
  -ms-border-radius:@width;
}
.w50-f_left{
  .w50();
  .f(right);
  .borderRadius(20px);
}

@charset "UTF-8";
/*混入*/
/*组合样式的例子*/
.w50 {
  width: 50%;
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
/*类混入*/
.w50-f_left {
  width: 50%;
  float: left;
}
/*函数混入*/
/*定义函数*/
/*定义函数包含参数*/
/*
1.定义了参数（没有默认值），调用的时候必须传参
2.怎么定义默认值 和定义变量值是一样的
3.定义了参数（有默认值），可传可不传
*/
.w50-f_left {
  width: 50%;
  float: right;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
}

2.2.7 继承 extend

能够继承所匹配的所有样式，但不会继承其子元素的内容

      .container {
      	width: 100px;
      	.other {
      		color: red;
      	}
      }
      .content {
      	&:extend(.container);
      }
      .span {
      	&:extend(.container .other);
      }

.container,
.content {
  width: 100px;
}
.container .other,
.span {
  color: red;
}

2.2.8 运算

在less语法中可以进行简单的运算，首先我们来看下面一段代码

@num:9;
ul{
  width: 100%*@num;
  li{
    width: 100%/@num;
    color: red+yellow+blue;
    background: gray*0.7;
    /*内置函数*/
    border-color: darken(red,20%);
  }
}

ul {
  width: 900%;
}
ul li {
  width: 11.11111111%;
  color: #ffffff;
  background: #5a5a5a;
  /*内置函数*/
  border-color: #990000;
}

其实看到这里，我们可以引申一点，bootstrap的栅格布局原理，这是其中之一了，当然只是引申，想要了解全部的，请移步Web前端中的几种流行布局

2.2.9 导入

那么学了以上那些内容，其实就可以将我们平常写的CSS文件，大概分为变量、函数、等等，然后导入到一个具主要处理的文件中，再通过嵌套、混入、运算等写一个完整的层叠样式表了，这样写的好处是，功能分明，易于维护

1. 导入less文件，可省略后缀

@charset "UTF-8";

@import "variables";

@import "mixins";

@import "topBar";

@import "banner";

@charset "UTF-8";
/*注释：在css当中可以使用，所有编译的过程当中生成在css文件*/
/*变量*/
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

.w50-f_left {
  width: 50%;
  float: right;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
}
.wjs_app {
  display: block;
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  border: 1px solid #ccc;
  border-top: none;
  top: 40px;
  z-index: 100000;
}
.wjs_app > div {
  display: block;
}
.wjs_app::before {
  content: "";
}

是不是很爽？

2. @import 的位置可随意放置

.container {
    width: 100px;
}

@import "style";

2.2.9.1 reference

引入的 Less 文件，但不编译

@import (reference) "style";

2.2.9.2 once

该 less文件只导入一次，其余导入的该less文件都不会被解析

@import (once) "style.less"; // 文件会被解析
@import (once) "style.less"; // 该文件不会被解析

2.2.9.3 multiple

允许导入多个同名文件，但是都会被解析

@import (multiple) "style.less"; // 文件会被解析
@import (multiple) "style.less"; // 文件也会被解析

2.3 less 和 sass 的区别

less和sass最大的区别在于其实现方式不同

less是基于javascript运行，所以less也常用语客户端处理

sass是基于Ruby，常在服务端处理

3 参考文章

• SASS
• Less中文网
• Less