CSS预处理器之Less

程序员文章站 2022-07-03 08:48:06

...

CSS预处理器之Less

一、less

Less 是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 既可以在客户端上运行，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/

二、Less使用

浏览器本身是不支持less语法的。我们需要通过编译将less转化为css代码。
可以通过less官网提供的js文件进行编译。

<style type="text/less">
    less代码的编写
</style>
<script src="../less/less.min.js"></script>

less编译文件的bootCDN地址:

https://cdn.bootcss.com/less.js/3.0.4/less.min.js

需要注意的是,该js文件必须要在style标签下面.因为这是一个解析动作需要拿到style中的信息。且这个style标签的type一定得是text/less的。
也可以通过编译工具来进行编译，比如考拉。
当然，最终对less的编译我们都会放进我们项目的工程化流程中使用构建工具来管理。

三、快速入门案例

01普通垂直水平居中.html

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #wrap {
                width: 300px;
                height: 300px;
                background: blue;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

            #f {
                width: 100px;
                height: 100px;
                background: pink;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>

    <body>
        <div id="wrap">
            <div id="f">

            </div>
        </div>
    </body>

案例图示：

CSS预处理器之Less

02使用less实现垂直居中.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--使用less
              1、将f子元素嵌套到父元素中;
              2、style type="text/css"修改为type="text/less";
              3、引入less.min.js标签
        优点：可以实现在CSS中元素嵌套
        缺点：这种less加载方式浏览器加载渲染性能差
        解决：可以使用koala工具来处理less文件，将其转换为css文件
        -->
        <style type="text/less">
            * {
                margin: 0;
                padding: 0;
            }

            #wrap {
                width: 300px;
                height: 300px;
                background: blue;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                #f{
                    width: 100px;
                    height: 100px;
                    background: pink;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }
            }

        </style>
        <script src="../less/less.min.js"></script>
    </head>

    <body>
        <div id="wrap">
            <div id="f">

            </div>
        </div>
    </body>

less.min.js

03使用koala处理less实现垂直居中.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/koala_less_ver_hor_centered.css"/>
    </head>
    <body>
        <body>
        <div id="wrap">
            <div id="f">

            </div>
        </div>
    </body>
    </body>

koala_less_ver_hor_centered.less

* {
                margin: 0;
                padding: 0;
            }

            #wrap {
                width: 300px;
                height: 300px;
                background: blue;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                #f{
                    width: 100px;
                    height: 100px;
                    background: pink;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }
            }

四、注释

以//开头的注释，不会被编译到css文件中    
以/*内容*/包裹的注释会被编译到css文件中

五、变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
使用@来申明一个变量：@pink：pink;
注意（如果属性值有单位一般我们都会把单位放到变量上,这样）

1.作为普通属性值只来使用：直接使用@pink

@z:0;
@w:100px;
@h:100px;
* {
    margin: @z;
    padding: @z;
}
#wrap {
    width: 300px;
    height: 300px;
    background: blue;
    position: absolute;
    left: @z;
    top: @z;
    right: @z;
    bottom: @z;
    margin: auto;
    #f {
        width: @w;
        height: @h;
        background: pink;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}

2.作为选择器和属性名：#@{selector的值}的形式

@z:0;
@w:100px;
@h:100px;
@bg:background;
@selector:#wrap;
* {
    margin: @z;
    padding: @z;
}
@{selector} {
    width: 300px;
    height: 300px;
    @{bg}: blue;
    position: absolute;
    left: @z;
    top: @z;
    right: @z;
    bottom: @z;
    margin: auto;
    #f {
        width: @w;
        height: @h;
       @{bg}: pink;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}

3.作为URL：@{url}

@z:0;
@w:100px;
@h:100px;
@bg:background;
@selector:#wrap;
//引入变量图片
@url:"../../../../../img/mei6.jpg";
* {
    margin: @z;
    padding: @z;
}
/*变量作为选择器*/
@{selector} {
    width: 300px;
    height: 300px;
    /*变量作为属性名*/
    @{bg}: blue;
    position: absolute;
    left: @z;
    top: @z;
    right: @z;
    bottom: @z;
    margin: auto;
    #f {
        width: @w;
        height: @h;
        /*变量作为url*/
        background: url("@{url}");
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}

4.变量的延迟加载

/*变量的延迟加载：@var同级块整体运行结束再计算@var的值*/
@var: 0;                
.class {                
@var: 1;                
    .brass {            
      @var: 2;          
      three: @var;  //3 
      @var: 3;          
    }                   
  one: @var;  //1       
}

六、嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

1、基本嵌套规则

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。-->
        <link rel="stylesheet" type="text/css" href="../css/qiantao.css"/>
    </head>
    <body>
        <div id="wrap">
            <div id="f"></div>
        </div>
    </body>

less文件

@import "default_style.less";
@import "ver_hor";
#wrap {
    width: 300px;
    height: 300px;
    background: blue;
   .ver_hor();
    #f {
        width: 100px;
        height: 100px;
        background: pink;
         .ver_hor();
    }
}

2、&的使用，&向上退一级

@import "./css/reset";
@import "./css/mixin";

#wrap{
    .juzhong(300px,300px,deeppink);
    #inner{
        .juzhong(@c:black);
        &:hover{
            background:blue;
        }
    }
}

<head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/style/index6.css"/>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">

            </div>
        </div>
    </body>

七、运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
@var: 1px + 5;
div {
    color: #888 / 4;
    height: 100% / 2 + @filler;
    width: (@var + 5) * 2;
//  border: (@width * 2) solid black;
//background-color: @base-color + #111;
}

八、避免编译

使用~”避免编译内容”格式，可以是”避免编译内容”，避免编译，
如 width: ~"calc(100px + 100px)";
从语法上让编译器忽略一些操作。

#wrap{width:~"calc(200px + 700px)";}

less文件：

*{
    margin: 0;
    padding: 0;
}
#wrap{
    width:~"calc(200px + 700px)";
}

css文件：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  width: calc(200px + 700px);
}

九、混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式.

1.普通混合
最终编译时会输出到目标文件中 .

less文件：

* {
    margin: 0;
    padding: 0;
}
.ver_hor{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#wrap {
    width: 300px;
    height: 300px;
    background: blue;
    .ver_hor;
    #f {
        width: 100px;
        height: 100px;
        background: pink;
       .ver_hor;
    }
}

css文件：

* {
  margin: 0;
  padding: 0;
}
.ver_hor {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#wrap {
  width: 300px;
  height: 300px;
  background: blue;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#wrap #f {
  width: 100px;
  height: 100px;
  background: pink;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

2.不带输出的混合
最终编译时不会输出到目标文件中

less文件：

* {
    margin: 0;
    padding: 0;
}
.ver_hor(){
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#wrap {
    width: 300px;
    height: 300px;
    background: blue;
    .ver_hor;
    #f {
        width: 100px;
        height: 100px;
        background: pink;
       .ver_hor();
    }
}

css文件：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  width: 300px;
  height: 300px;
  background: blue;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#wrap #f {
  width: 100px;
  height: 100px;
  background: pink;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

3.带参数的混合
使混合更为灵活

less文件：

* {
    margin: 0;
    padding: 0;
}
.ver_hor(@w, @h, @c) {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}
#wrap {
    width: 300px;
    height: 300px;
    background: blue;
//  .ver_hor;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    #f {
        .ver_hor(100px,100px,pink)
    }
}

css文件：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  width: 300px;
  height: 300px;
  background: blue;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#wrap #f {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: #ffc0cb;
}

4.带参数并且有默认值的混合

less文件：

* {
    margin: 0;
    padding: 0;
}
.ver_hor(@w:150px, @h:150px, @c:deeppink) {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}
#wrap {
    width: 300px;
    height: 300px;
    background: blue;
    //  .ver_hor;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    #f {
//      .ver_hor(100px,100px,pink)
        .ver_hor
    }
}

css文件：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  width: 300px;
  height: 300px;
  background: blue;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#wrap #f {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 150px;
  height: 150px;
  background: #ff1493;
}

5.命名参数
当实参与形参不匹配时，可以命名传参

less文件：

* {
    margin: 0;
    padding: 0;
}
.ver_hor(@w:150px, @h:150px, @c:deeppink) {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}
#wrap {
    width: 300px;
    height: 300px;
    background: blue;
    //  .ver_hor;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    #f {
        //      .ver_hor(100px,100px,pink)
        //      ..ver_hor
        .ver_hor(@c:pink);
    }
}

css文件：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  width: 300px;
  height: 300px;
  background: blue;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#wrap #f {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 150px;
  height: 150px;
  background: #ffc0cb;
}

6.匹配模式
定义的混合命名一致时，可以通过第一个参数进行标识区分

html

<head>
        <meta charset="UTF-8">
        <title>triangle</title>
        <link rel="stylesheet" type="text/css" href="../css/index7.css"/>
    </head>
    <body>
        <div id="sanjiao">

        </div>
        <div id="sanjiao2">

        </div>
        <div id="sanjiao3">

        </div>
        <div id="sanjiao4">

        </div>
    </body>

less文件：

*{
    margin: 0;
    padding: 0;
}

/*向上的三角*/
.triangle(top,@w:10px,@c:pink){
    border-width:@w;
    border-color: transparent  transparent  @c transparent ;
    border-style:dashed dashed solid dashed  ;
}
/*向下的三角*/
.triangle(bottom,@w:10px,@c:pink){
    border-width:@w;
    border-color: @c transparent  transparent   transparent ;
    border-style:solid dashed dashed  dashed  ;
}
/*向左的三角*/
.triangle(left,@w:10px,@c:pink){
    border-width:@w;
    border-color:  transparent @c  transparent   transparent ;
    border-style: dashed solid dashed  dashed  ;
}
/*向右的三角*/
.triangle(right,@w:10px,@c:pink){
    border-width:@w;
    border-color:  transparent   transparent   transparent @c;
    border-style: dashed  dashed  dashed  solid;
}

.triangle(@_,@w:10px,@c:pink){
    width: 0;
    height: 0;
    overflow: hidden;
}

#sanjiao{
    .triangle(top,50px,deeppink);
}
#sanjiao2{
    .triangle(bottom);
}
#sanjiao3{
    .triangle(left);
}
#sanjiao4{
    .triangle(right);
}

css文件：

* {
  margin: 0;
  padding: 0;
}
/*向上的三角*/
/*向下的三角*/
/*向左的三角*/
/*向右的三角*/
#sanjiao {
  border-width: 50px;
  border-color: transparent transparent #ff1493 transparent;
  border-style: dashed dashed solid dashed  ;
  width: 0;
  height: 0;
  overflow: hidden;
}
#sanjiao2 {
  border-width: 10px;
  border-color: #ffc0cb transparent transparent transparent;
  border-style: solid dashed dashed  dashed  ;
  width: 0;
  height: 0;
  overflow: hidden;
}
#sanjiao3 {
  border-width: 10px;
  border-color: transparent #ffc0cb transparent transparent;
  border-style: dashed solid dashed  dashed  ;
  width: 0;
  height: 0;
  overflow: hidden;
}
#sanjiao4 {
  border-width: 10px;
  border-color: transparent transparent transparent #ffc0cb;
  border-style: dashed  dashed  dashed  solid;
  width: 0;
  height: 0;
  overflow: hidden;
}

案例图示：
CSS预处理器之Less
7.arguments变量
实参列表.

html

<head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/index8.css"/>
    </head>
    <body>
        <div id="wrap">

        </div>
    </body>

less文件：

*{
    margin: 0;
    padding: 0;
}
.border(@w:10px,@style:solid,@c:deeppink){
    border: @arguments;
}

#wrap{
    width: 200px;
    height: 200px;
    background: pink;
    .border();
}

css文件：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  width: 200px;
  height: 200px;
  background: pink;
  border: 10px solid #ff1493;
}

案例图示：
CSS预处理器之Less

十、继承

1、基本介绍
继承是对选择器的组合，而不是对样式集的复制

nav ul { 
&:extend(.inline); 
background: blue;
 }

2、继承与混合
性能比混合高
灵活度比混合低

3、案例：
less:

* {
    margin: 0;
    padding: 0;
}

.common {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.ver_hor1(@w:150px, @h:150px, @c:deeppink) {
   &:extend(.common);
    width: @w;
    height: @h;
    background: @c;
}
#wrap {
    &:extend(.common);
    width: 300px;
    height: 300px;
    background: blue;
    #f {
        .ver_hor1(@c:pink);
    }
}

css:

* {
  margin: 0;
  padding: 0;
}
.common,
#wrap,
#wrap #f {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#wrap {
  width: 300px;
  height: 300px;
  background: blue;
}
#wrap #f {
  width: 150px;
  height: 150px;
  background: #ffc0cb;
}

十一、 Import

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";
@import "lib";

十二、循环

less本身没有循环的语法是通过递归来构建循环

less:

/*less本身没有循环，通过使用递归来实现循环*/
.test(@n) when(@n>0){
    .box-@{n}{
       width: 100px*@n;
    }
    .test(@n - 1);
}

.test(2);

css:

/*less本身没有循环，通过使用递归来实现循环*/
.box-2 {
  width: 200px;
}
.box-1 {
  width: 100px;
}

CSS预处理器之Less

一、less

二、Less使用

三、快速入门案例

四、注释

五、变量

六、嵌套

七、运算

八、避免编译

九、混合

十、继承

十一、 Import

十二、循环

前端入门23-CSS预处理器（Less&Sass）