less练习

顽强的小豆子

已于 2022-06-14 18:24:40 修改

阅读量95

点赞数

文章标签： less webview elementui

于 2022-06-14 18:10:42 首次发布

本文链接：https://blog.csdn.net/qiuyushuofeng/article/details/125283515

版权

练习变量的使用，嵌套，完全匹配（类似定义函数，可传参，最后调用）

html文件（里面含图片，需要准备两张图片187x187）

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="./style.css">
</head>
<body>
   <div class="container">
      <div class="box1">
         <div>
            <img src="./img/1.jpg" alt="" srcset="">
         </div>
         <div class="font">
            <span class="title">剑来：第五及（29-35）烽火戏诸侯</span><br>
            <span class="autor">烽火戏诸侯</span><br>
            <span class="time">出版时间：2022-06-01</span><br>
            <span class="price">￥256.80 <del>￥336.00</del></span><br>
         </div>
      </div>
      <div class="box1">
         <div>
            <img src="./img/1.jpg" alt="" srcset="">
         </div>
         <div class="font">
            <span>剑来：第五及（29-35）烽火戏诸侯</span><br>
            <span>烽火戏诸侯</span><br>
            <span>出版时间：2022-06-01</span><br>
            <span>￥256.80 <del>￥336.00</del></span><br>
         </div>
      </div>
      <div class="box2"></div>
      <div class="box3"></div>
   </div>
</body>
</html>

style.less文件

//定义变量的练习
@col1: #000000;
@col2: #aaaaaa;
@col3: #404040;
@col4: #cc3300;
//完全匹配
//个人理解，定义了css函数，可以自由传参
.box(@width: 1px,@style: dotted,@color: blue){
  width: 100px;
  height: 100px;
  border: @width @style @color;
}

.box2{
  .box(@width:20px);
}
.box3{
  .box(@width: 10px,@style: solid)
}
.font(@col:@col1){
  color: @col;
  font-size: 16px;
}

.container{
  display: flex;
}
.tuwen(@ali: left){
  width: 210px;
  height: 339px;
  padding: 10px;
  text-align: @ali;
  .font{
    padding: 15px;
    .tile{
      .font(@col: @col1);
      font-weight: bolder;
    }
    .autor{
      .font(@col: @col2)
    }
    .time{
      .font(@col: @col3)
    }
    .price{
      .font(@col: @col4);
      font-weight: bolder;
    }
    del{
      .font(@col: @col2);
      font-weight: bolder;
    }
  }
}
.box1{
  .tuwen()
}



// 000000黑色
//aaaaaa灰色
//404040 3
//cc3300 橙色
//aaaaaa 会的

将style.less文件编译为style.css文件

lessc style.less style.css

.container {
  display: flex;
}
.box1 {
  width: 210px;
  height: 339px;
  padding: 10px;
  text-align: left;
}
.box1 .font {
  padding: 15px;
}
.box1 .font .tile {
  color: #000000;
  font-size: 16px;
  font-weight: bolder;
}
.box1 .font .autor {
  color: #aaaaaa;
  font-size: 16px;
}
.box1 .font .time {
  color: #404040;
  font-size: 16px;
}
.box1 .font .price {
  color: #cc3300;
  font-size: 16px;
  font-weight: bolder;
}
.box1 .font del {
  color: #aaaaaa;
  font-size: 16px;
  font-weight: bolder;
}
.box2 {
  width: 100px;
  height: 100px;
  border: 20px dotted blue;
}
.box3 {
  width: 100px;
  height: 100px;
  border: 10px solid blue;
}