Less

一、Less 快速入门

1.1 资料网站：Less中文网

http://lesscss.cn/

1.2 Less介绍

  • less是一门CSS预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更容易维护和扩展。较少可以运行在Node或浏览器端。

二、Less中的注释

2.1 /**/ 注释

/**/ 注释是可以给用户看的注释，在Less编译为CSS的过程中，/**/注释是会被一起编译的

2.2 // 注释

// 注释是给编程人员看的注释，less文件编译不会将此注释编译出去

2.3 两个注释效果展示

.less 文件

.css 文件

三、变量

  • less 中的变量声明用@符号
  • 作为普通的属性值使用变量直接 @color 的形式
  • 作为选择器和属性名使用变量要用 @{selector} 的形式
  • 作为URL ==》 @

3.1 Less 中常用的变量

@color:yellow;   //颜色变量
* {
    margin : 0;
    padding : 0;
}
#warp {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
}
#warp .inner{
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    background: @color;     //变量的使用
    height: 100px;
    width: 100px;
}

3.2 Less中不常使用这种方法

  • 以下变量在使用的过程中需要加 { }
@m:margin;         //属性名变量 
@selector:#warp;   //选择器变量
* {
    @{m} : 0;            //属性名变量的使用
    padding : 0;
}
@{selector} {           //选择器变量的使用
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
}
#warp .inner{
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    @{m}: auto;
    background:pink;
    height: 100px;
    width: 100px;
}

3.3 变量的延迟加载

.less

@var: 0 ;
.class{
@var: 1 ;
    .brass{
        @var: 2 ;
        three: @var;
        @var: 3 ;
    }
    one: @var;
}

.css

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

四、Less嵌套规则

  1. 基本的嵌套规则：普通的父子级关系
  2. &的使用：代表平级关系

.less

@color:deeppink;   //颜色变量

* {
    margin: 0;
    padding : 0;
}
#warp {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
}
    .inner{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        margin: auto;
        background:@color;
        height: 100px;
        width: 100px;
        &:hover{                         //&的使用，hover和inner是平级关系
            background: yellow;
        }

  
}

.css

* {
  margin: 0;
  padding: 0;
}
#warp {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
.inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: deeppink;
  height: 100px;
  width: 100px;
}
.inner:hover {
  background: yellow;
}

五、Less中的混合

5.1 普通混合

.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/Study/test.css">
    </head>

    <body>

        <div id="warp">
            <div class="inner"></div>
            <div class="inner2"></div>
        </div>
    </body>
    <script src=""></script>

</html>

.less

  1. 定义一个规则（在多个标签使用相同样式时）
  2. 调用规则
/*1.普通混合*/
.hunhe{                                 //1.定义规则（名字随意）
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    background:deeppink;
    height: 100px;
    width: 100px;
}


#warp {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
}
    .inner{
      .hunhe;                           //2.调用规则
    }
    
    .inner2{                            //调用规则
        .hunhe;
    }

.css

/*1.普通混合*/
.hunhe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: deeppink;
  height: 100px;
  width: 100px;
}
#warp {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
.inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: deeppink;
  height: 100px;
  width: 100px;
}
.inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: deeppink;
  height: 100px;
  width: 100px;
}

5.2 不带输出的混合

/*2.不带输出的混合*/
.hunhe(){                     //比普通混合加了一个（），不影响结果
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    background:deeppink;
    height: 100px;
    width: 100px;
}


#warp {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
}
    .inner{
      .hunhe;
    }

    .inner2{
        .hunhe;
    }

5.3 带参数的混合

.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/Study/test.css">
    </head>

    <body>

        <div id="warp">
            <div class="inner"></div>
            <div class="inner2"></div>
        </div>
    </body>
    <script src=""></script>

</html>

.less

/*3.带参数的混合*/
.hunhe(@height,@width,@color){      //将需要改变的属性设置为变量
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    background:@color;              //将需要改变的属性设置为变量
    height: @height;
    width: @width;
}


#warp {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
}
    .inner{
      .hunhe(200px,200px,yellow);    //定义变量的值
    }

    .inner2{
        .hunhe(100px,100px,pink);   //定义变量的值
    }

.css

/*3.带参数的混合*/
#warp {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
.inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: yellow;
  height: 200px;
  width: 200px;
}
.inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: pink;
  height: 100px;
  width: 100px;
}

效果：

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

  • 为变量设置默认值，直接在变量后加“：值”

  • 当没有为变量赋值时，会使用默认的值

.less

/*4.带参数并且带默认值的混合*/
.hunhe(@height:20px,@width:30px,@color:black){           //1.为变量设置默认值
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    background:@color;
    height: @height;
    width: @width;
}


#warp {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
}
    .inner{
      .hunhe(200px,200px,yellow);
    }

    .inner2{
        .hunhe();                             //2.当没有为变量设置值的时候，会调用默认值
    }

5.5 带多个参数的混合

5.6 命名参数

  • 当有多个变量，我们只希望改变一个变量的值，其余的都用默认参数值时，就可以在参数值前面加上@变量

.less

/*6.命名参数*/
.hunhe(@height:20px,@width:30px,@color:black){           //3个变量并且有默认值，只想改变颜色
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    background:@color;
    height: @height;
    width: @width;
}
#warp {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
}
    .inner{
      .hunhe(200px,200px,yellow);
    }

    .inner2{
        .hunhe(@color:blue);              //直接这样定义颜色
    }

.css

/*6.命名参数*/#warp {  position: relative;  width: 300px;  height: 400px;  border: 1px solid;  margin: 0 auto;}.inner {  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;  margin: auto;  background: yellow;  height: 200px;  width: 200px;}.inner2 {  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;  margin: auto;  background: blue;  height: 20px;  width: 30px;}

5.7 匹配模式

例：用CSS画一个三角形

.html

<!DOCTYPE html><html>    <head>        <link rel="stylesheet" href="/Study/test.css">    </head>    <body>        <div id="warp">            <div class="sjx"></div>        </div>    </body></html>

.less

  • “@_” 的后面需要带上定义的变量
/*7.匹配模式*/
.triangle(@_,@width,@color){   //将下面四个规则中相同的部分提取出来
    width: 0;
    height: 0;
    overflow: hidden;          //overflow 溢出
}
//定义规则
.triangle(L,@width,@color){         //定义规则
    border-width: @width;
    border-style: dashed solid dashed dashed;      //上 右 下 左 (边框出现的位置)
    border-color: transparent @color transparent transparent;       //transparent 透明的
   
}
.triangle(R,@width,@color){         
    border-width: @width;
    border-style: dashed dashed dashed solid;      
    border-color: transparent transparent transparent @color;       
          
}
.triangle(T,@width,@color){         
    
    border-width: @width;
    border-style: dashed dashed solid dashed;      
    border-color: transparent transparent @color transparent;       
          
}
.triangle(B,@width,@color){         
   
    border-width: @width;
    border-style: solid dashed dashed dashed;      
    border-color: @color transparent transparent transparent;       
      
}
// 调用规则 
#warp .sjx{
    .triangle(B, 60px, rgb(22, 207, 105));
}

.css

/*7.匹配模式*/#warp .sjx {  width: 0;  height: 0;  overflow: hidden;  border-width: 60px;  border-style: solid dashed dashed dashed;  border-color: #16cf69 transparent transparent transparent;}

5.8 arguments变量

六、Less中计算

  • 在less中计算，只需要计算的一方带单位即可

.less

#warp .sjx{
    .triangle(B, 60+40px, rgb(22, 207, 105));
}

.css

#warp .sjx {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 100px;
  border-style: solid dashed dashed dashed;
  border-color: #16cf69 transparent transparent transparent;
}

七、避免编译

  • ~"(避免编译的内容)"

例：

#warp .sjx{
    .triangle(B, ~"60+40px", rgb(22, 207, 105));
}

#warp .sjx {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 60+40px;       //未进行编译（计算）
  border-style: solid dashed dashed dashed;
  border-color: #16cf69 transparent transparent transparent;
}
posted @ 2021-10-11 10:22  小小狍子  阅读(20)  评论(0)    收藏  举报