4_less中带参数混合

最新推荐文章于 2021-10-31 18:48:38 发布

无名之辈无名之辈

最新推荐文章于 2021-10-31 18:48:38 发布

阅读量151

点赞数

分类专栏：前端 less

本文链接：https://blog.csdn.net/ice_stone_kai/article/details/110729215

版权

前端同时被 2 个专栏收录

81 篇文章 1 订阅

订阅专栏

less

11 篇文章 0 订阅

订阅专栏

less中你可以定义一些形参,将数值传入形参,

然后再将形参赋予给某一元素(就是利用形参为该元素添加属性)
如:

// 创建一个形参
.whc(@w:,@h:,@c) {
  width: @w;
  height: @h;
  background: @c;
}
.div1 {
  //width: 200px;
  //height: 200px;
  //background: red;
　//下面一行就相当于上面三行的代码
  .whc(200px, 200px, red);
}

也可以使用带默认参数混合:

.whc(@w:100px,@h:100px,@c:pink) {
  width: @w;
  height: @h;
  background: @c;
}

.div1 {
  .whc(200px, 200px, red);
}

.div2 {
  .whc(@c:blue);
}

用下面的html代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="css/07_less中带参数混合.css">
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>

</body>
</html>

效果图:
在这里插入图片描述

无名之辈无名之辈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
4_less中带参数混合

less中你可以定义一些形参,将数值传入形参,然后再将形参赋予给某一元素(就是利用形参为该元素添加属性)如:// 创建一个形参.whc(@w:,@h:,@c) { width: @w; height: @h; background: @c;}.div1 { //width: 200px; //height: 200px; //background: red;　//下面一行就相当于上面三行的代码 .whc(200px, 200px, red);}也可以使用带默认
复制链接

扫一扫