less:css预编译-CSDN博客

less

1.less里可以直接写css的代码
2.可以定义变量:@变量名:值;使用:@变量名
3.可以层次嵌套(按结构去写
4.mixin混合
5.函数
6.导入@import
复制代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet/less" href="1.less">
    <script src="less.min.js"></script><!--通过此处的js把less编译成css语言-->
</head>
<body>
<div id="box">
    <a href="">张三</a>
    <a href="">张三</a>
    <a href="">张三</a>
    <a href="">张三</a>
    <p><a href="">你你你</a></p>
</div>
<div class="box3">我曾经想你想他像那野草野花</div>
<br>
<div id="box1"></div>
</body>
</html>
复制代码

1.less

@color:red;
@import "color";
#box111(@width,@height,@bgColor){
  width: @width;
  height: @height;
  background: @bgColor;
}
//#box{
//  width: 200px;
//  height: 200px;
//  background: @color;
//    &>a{
//      font-size: 40px;
//      text-decoration: none;
//      &:nth-child(1){
//        border: 1px solid #CCCCCC;
//      }
//    }
//
//}
.flexbox{
    display:flex;
    display:-webkit-flex;
    display:-o-flex;
    display:-moz-flex;
    display:-ms-flex;
}
#box1{
  .flexbox;<!--有点像继承-->
  #box111(400px,400px,yellow);
    //width: 500px;
    //height: 300px;
    //background: @color;
}
.box3{
  background:@color
}
复制代码