less快速上手，使用详解

最新推荐文章于 2024-09-23 15:14:44 发布

畢林茂

最新推荐文章于 2024-09-23 15:14:44 发布

阅读量147

点赞数 1

分类专栏：前端文章标签： less html css

本文链接：https://blog.csdn.net/nilmao/article/details/123911328

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

1.引入 js 文件

<!DOCTYPE html>
<html lang="en">

<head>
   ...
</head>

<body>
    <div id="wrap">
        <div class="inner">AAA</div>
    </div>
     <!-- 引入js文文件 -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script>
</body>

</html>

less写法

@#wrap {                     
    position: relative;
    width: 300px;  
   
    //子元素的样式，嵌套语法；利于代码可读性
    .inner {
        position: absolute;
        height: 100px;
        width: 100px;
    }
}

以上less代码编译为css如下：

#wrap {
  position: relative;
  width: 300px;
}
#wrap .inner {
  position: absolute;
  height: 100px;
  width: 100px;
}

2.变量

//变量声明：变量名前添加‘@’符号
@color:#ff000f;      //1.变量作为：属性值
@m:margin;           //2.变量作为：属性
@selector:#wrap;     //3.变量作为：选择器

//注意：当变量作为选择器，需要添加‘{}’
@{selector} {                        //3.变量作为 选择器 被使用
    position: relative;
    width: 300px;
    @{m}: 0 auto;                    //2.变量作为 属性 被使用

   
    .inner {
        position: absolute;
        background-color: @color;   //1.变量作为 属性值 被使用
        height: 100px;
        width: 100px;
    }
}

3.混合

3.1.普通混合

.inner {    //带参数混合,且有默认值
    background-color: @c;
    height: @h;
    width: @w;
    border: #0000ff 1px solid;
}

//---------------------------
//简单的说就是把上面的代码插入到下面的代码中去

#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid salmon;
    margin: 0 auto;

    .inner1 {
       .inner();//在这里混入
    }
}

3.2.带参数混合

.inner(@w:50px,@h:50px,@c:#f10566) {    //带参数,默认值可以写 或 不写
    background-color: @c;
    height: @h;
    width: @w;
}

#wrap {
    position: relative;
    width: 300px;
  
    .inner1 {
       .inner();

        &:hover {
            background-color: #F00fff;
        }
    }
    .inner2 {
        .inner(@c:#000);
    }
}

4.arguments

这个不是很重要

.border(@w,@s,@c) {   //在这里声明 .border()     有点js函数的味
    border: @arguments;
}

#wrap {
    position: relative;
    width: 960px;

    .inner1 {
        .border(1px,solid,red);  //在这里传入  值
    }
}

5.计算

@w:100;//声明变量

#wrap {
    position: relative;
    width: 960px;

    .inner1 {
        height: (@w+100px); //计算中使用
    }
}

畢林茂

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录