less中的注释、less中的公共变量怎么写、变量延迟加载

最新推荐文章于 2022-07-14 11:50:23 发布

&XYZ&

最新推荐文章于 2022-07-14 11:50:23 发布

阅读量579

点赞数 1

分类专栏： less

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/99672056

版权

less 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

less中的注释

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

以/**/包裹的注释会被编译到css文件中

//style.less文件
/*这里注释会被编译到css文件中*/
.less-test1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .less-test2 {
    font-weight: bold;
    font-size: 20px;
  }
}

/*这里注释会被编译到css文件中*/
.less-test1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.less-test1 .less-test2 {
  font-weight: bold;
  font-size: 20px;
}

less中的公共变量怎么写

公共变量用@

运用场景：你的样式中对于宽、高、颜色、边距等样式都有规定，需要多地方都要运用到，这个时候用公共变量是非常方便的！

//style.less文件
//公共变量用@
@color:blue;
.less-test1 {
  width: 200px;
  height: 200px;
  border: 1px solid @color;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .less-test2 {
    font-weight: bold;
    font-size: 20px;
  }
}

注意：选择器和属性名，变为公共的变量后怎么去使用？（了解一下，用的不多）

在这里需要填一个坑：选择器名的名字不要带有 - 否则考拉会报错；

//style.less文件
//公共变量用@
@color: blue;
@selector: .test1;
@fs: font-size;

@{selector} {
  width: 200px;
  height: 200px;
  border: 1px solid @color;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .test2 {
    font-weight: bold;
      @{fs}: 30px;
  }
}

变量延迟加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="test1">
    <span class="test2">
         XYZ
        <span class="test3">
            XTY
        </span>
    </span>

</div>
</body>
<script src="../less.min.js" type="text/javascript"></script>
</html>

//公共变量用@
//变量延迟加载
@variate: red;

.test1 {
  @variate: blue;
  width: 200px;
  height: 200px;
  border: 1px solid @variate; //@variate==green
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  @variate: green;

  .test2 {
    @variate: yellow;
    font-weight: bold;
    font-size: 30px;
    color: @variate;

    .test3 {
      color: @variate //@variate==yellow
    }
  }
}

&XYZ&

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
less中的注释、less中的公共变量怎么写、变量延迟加载

以//开头的注释，不会被编译到css文件中以/**/包裹的注释会被编译到css文件中//style.less文件/*这里注释会被编译到css文件中*/.less-test1 { width: 200px; height: 200px; border: 1px solid red; margin: 0 auto; display: flex; justify-c...
复制链接

扫一扫

专栏目录