CSS3----less----预处理器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>运行式编译</title>
        <style type="text/less">
            *{
                margin: 0;
                padding: 0;
            }
            .wrap{
                position: relative;
                width: 300px;
                height: 300px;
                border: 1px solid;
                margin: 0 auto;
                .inner{
                    width: 100px;
                    height: 100px;
                    background: pink;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
            }
            
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
    <script src="less/less.min.js"></script>
</html>

以上为运行式编译

 

 

预处理

使用考拉编译less

 

 

 

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

 

 

less中的变量
使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载

 

变量的延迟加载

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

变量的延迟加载是在运行完之后再去看@var的值

 

嵌套规则

以下为less

*{
    margin: 0;
    padding: 0;
}
.wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        width: 100px;
        height: 100px;
        background: pink;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        &:hover{
                background: #BBFFAA;
        }
    }
}

通过考拉编译后得到以下css

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

 

posted @ 2021-07-19 09:44  2237774566  阅读(65)  评论(0)    收藏  举报