less中的混合

最新推荐文章于 2022-05-12 12:42:50 发布
最新推荐文章于 2022-05-12 12:42:50 发布
阅读量188 收藏
点赞数 1
分类专栏： less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/99682285
版权

混合就是将一系列属性从一个规则集引入到另一个规则集的方式。

普通混合（例子中重点看mixture）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/style2.css"/>
</head>
<body>
<div class="test1">
    <span class="test2">
         XYZ
    </span>
    <span class="test3">LM</span>
</div>
</body>
<script src="../less.min.js" type="text/javascript"></script>
</html>
//普通混合：mixture会编译到.css文件里面去
.mixture {
  font-weight: bold;
  font-size: 30px;
  color: blue;
}

.test1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .test2 {
    .mixture
  }

  .test3 {
    .mixture
  }
}

.mixture {
  font-weight: bold;
  font-size: 30px;
  color: blue;
}
.test1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.test1 .test2 {
  font-weight: bold;
  font-size: 30px;
  color: blue;
}
.test1 .test3 {
  font-weight: bold;
  font-size: 30px;
  color: blue;
}

不带输出的混合，加上()就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/style2.css"/>
</head>
<body>
<div class="test1">
    <span class="test2">
         XYZ
    </span>
    <span class="test3">LM</span>
</div>
</body>
<script src="../less.min.js" type="text/javascript"></script>
</html>
//不带参数的混合,加上()就可以了
.mixture() {
  font-weight: bold;
  font-size: 30px;
  color: blue;
}

.test1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .test2 {
    .mixture
  }

  .test3 {
    .mixture
  }
}

.test1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.test1 .test2 {
  font-weight: bold;
  font-size: 30px;
  color: blue;
}
.test1 .test3 {
  font-weight: bold;
  font-size: 30px;
  color: blue;
}

带参数的混合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/style3.css"/>
</head>
<body>
<div class="test1">
    <span class="test2">
         XYZ
    </span>
    <span class="test3">LM</span>
</div>
</body>
<script src="../less.min.js" type="text/javascript"></script>
</html>
//带参数的混合
.mixture(@c) {
  font-weight: bold;
  font-size: 30px;
  color: @c;
}

.test1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .test2 {
    .mixture(red)
  }

  .test3 {
    .mixture(blue)
  }
}

带参数并且有默认值的混合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/style3.css"/>
</head>
<body>
<div class="test1">
    <span class="test2">
         XYZ
    </span>
    <span class="test3">LM</span>
</div>
</body>
<script src="../less.min.js" type="text/javascript"></script>
</html>
//带参数并且有默认值的混合
.mixture(@c:red,@w:100px,@h:100px) {
  font-weight: bold;
  font-size: 10px;
  display: inline-block;
  text-align:center;
  line-height:@h;
  border: 1px solid @c;
  width: @w;
  height: @h;
  color: @c;
}

.test1 {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .test2 {
    .mixture(red)
  }

  .test3 {
    .mixture(blue)
  }
}

 

.test1 {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.test1 .test2 {
  font-weight: bold;
  font-size: 10px;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  border: 1px solid #ff0000;
  width: 100px;
  height: 100px;
  color: #ff0000;
}
.test1 .test3 {
  font-weight: bold;
  font-size: 10px;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  border: 1px solid #0000ff;
  width: 100px;
  height: 100px;
  color: #0000ff;
}

命名参数：当形参和实参不不匹配的时候，就需要用到命名参数了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/style4.css"/>
</head>
<body>
<div class="test1">
    <span class="test2">
         XYZ
    </span>
    <span class="test3">LM</span>
</div>
</body>
<script src="../less.min.js" type="text/javascript"></script>
</html>
//命名参数
.mixture(@c:red,@fs:30px) {
  font-weight: bold;
  font-size: @fs;
  color: @c;
}

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

  .test2 {
    .mixture(@fs:40px)
  }
}

.test1 {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.test1 .test2 {
  font-weight: bold;
  font-size: 40px;
  color: #ff0000;
}

匹配模式：注意@_调用其它同名规则集就会默认调用此规则集

注意这个三角形，已经写成了一个API接口，直接通过@import '三角形接口的规则集.less'引入，然后就传参就可以了。

<!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="triangle"></div>
</body>
<script type="text/javascript" src="../less.min.js"></script>
</html>
@import "triangleApi.less";

.triangle {
  .mixture(T, @bw:200px, @bc:red);
}
.mixture(@_,@bw,@bc) {
  width: 0;
  height: 0;
}

.mixture(T,@bw,@bc) {
  border-width: @bw;
  border-style: solid;
  border-color: @bc transparent transparent transparent;
}

.mixture(R,@bw,@bc) {
  border-width: @bw;
  border-style: solid;
  border-color: transparent @bc transparent transparent;
}

.mixture(B,@bw,@bc) {
  border-width: @bw;
  border-style: solid;
  border-color: transparent transparent @bc transparent;
}

.mixture(L,@bw,@bc) {
  border-width: @bw;
  border-style: solid;
  border-color: transparent transparent transparent @bc;
}

arguments变量：比较鸡肋，但是别人在用的使用要看的懂。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/arguments.css"/>
</head>
<body>
<div class="test1">
    <span class="test2">
         XYZ
    </span>
    <span class="test3">LM</span>
</div>
</body>
<script src="../less.min.js" type="text/javascript"></script>
</html>

.mixture(@1,@2,@3){
  border:@arguments;
}
.test1{
  width:200px;
  height:200px;
  .mixture(@1:1px, @2:solid, @3:red)
}

 

&XYZ&
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 预处理 语言 - Less（2）- 混合、运算
JHY97的博客
05-24 742
一、less中的混合 混合就是将一系列属性从一个规则集引入到另一个规则集的方式 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。 以案例说明： html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"
Less预处理——混合方法
HuoZhiyan 的博客
10-01 2544
Less预处理——混合方法的使用
less基础——嵌套、混合、继承
mantou_riji的博客
05-12 2836
文章目录注释变量变量的定义属性值或选择器做变量变量作为url变量的延时加载嵌套规则 注释 less的注释 // css的注释是/**/，css注释也可以在less中起作用，不同的是css注释会被编译到css文件中，而less注释（//）不会被编译到css文件中。 即，在less中： 以//开头的注释,不会被编译到css文件中 以/**/包裹的注释会被编译到css文件中 eg: less文件： /*这是想暴露出去的注释*/ // 这是见不得人的注释 对应的css文件： /*这是想暴露出去的注释*/ 变量
less混合
m0_52380041的博客
04-03 599
一：混合的定义 混合就是一种或者一系列属性从一种规则集引入（混合）到另一种规则集的方法 二：混合的分类 1.普通混合 当一个元素要采用另一个类的样式时，可以在HTML文件对应的元素上添加对应的类，但less更为方便，直接在对应的类的样式中添加另一个类的名字即可 例子： less文件 .juzhong{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .texta
less学习（二）：混合、继承、运算
激洪的博客
04-06 900
less之混合、继承、运算
动态的样式语言less语法详解之混合属性
09-25
主要介绍了动态的样式语言less语法详解之混合属性,需要的朋友可以参考下
sprite.less:LESS 图像精灵混合
07-07
用于在单个位置维护精灵定义的 LESS 图像精灵混合。 基本上，它是这样工作的：您定义一个自定义精灵伪类，它将精灵项目位置或精灵项目名称作为每个精灵的参数。 该参数将与一些自定义精灵“配置”-东西一起传递给 ....
less开发指南
09-25
LESS文件以`.less`为扩展名，它引入了变量、嵌套、混合（mixin）、运算符等功能，让CSS代码更加模块化和可重用。 **一、LESS的基本特性** 1. **变量（Variables）**：LESS允许我们定义变量来存储颜色、尺寸等值，...
LESS简明教程1
08-03
Mixin是LESS中的一种复用机制，类似于类。它包含一组样式规则，可以被多个选择器调用。例如： ```less .rounded-corners(@radius) { border-radius: @radius; } .box { .rounded-corners(5px); } ``` `.rounded...
项目中的less文件和图片资源
最新发布
11-10
在IT行业中，前端开发是至关重要的一个环节，而 Less 是一种预处理器语言，它扩展了 CSS，增加了变量、嵌套规则、运算符等功能，使得 CSS 编写更加灵活和易于维护。本项目中的"项目中的less文件和图片资源"着重关注...
less混合 + less计算
你好牛蛙！
11-01 4368
less中的混合 混合的意思： 混合就是将一系列属性从一个规则集引入到另一个规则集的方式 通俗来讲，规则集即指一套代码，一套定义一定规则的代码，比如一套定义样式的代码，就是一个规则集 比如： 这里面的样式就是一个规则集 混合就是把一套规则集用于另一个元素上面 混合类别： 普通混合 不带输出的混合 带参数的混合 带参数并且有默认值的混合 带多个参数的混合 命名参数 匹配模式 arguments变量 普通混合 即直接写一个不影响html中元素的选择器，然后代码体里面写上规则集，然后直接让其他规则集调用 这种
less（六） 混合的使用
cvper's world !
04-21 783
直接看下面的代码：混合就相当于一个函数，我们可以使用不同的参数来反复使用这个函数；            上面的代码首先定义了一个函数，有两个参数，那么函数内部，我们的border参数的设置就使用了这些参数；定义完之后，我们在div内部的p标签上使用了这个函数；和使用 js 函数是差不多的；上面只是定义了参数，参数还可以指定默认值的，我们改变一下： @width:100;@height:100;@...
Less变量、混合
XCMercy
09-05 4200
Less特性 注释 // 注释内容 此注释不会编译输出到CSS文件中 /* 注释内容 */ 此注释会编译输出到CSS文件中 变量 Less中使用@变量名定义变量。需要注意的是，作为属性及选择器的时候，变量名需要放在{}中。 1.作为属性 @bg: background-color; .box{ width: 600px; height: 400px; ...
LESS详解之混合(Mixins)高级
热门推荐
梦龙小站
11-06 1万+
现在已经为大家介绍了LESS之混合(Mixins)的一些用法了，相信大家也用了不少有关LESS之混合(Mixins)了。接下来将为大家介绍一些有关LESS之混合(Mixins)的另外一些使用方法，可算是比较难理解的，所以把它们放到了LESS详解之混合(Mixins)高级来为大家介绍，希望能个能对大家有所帮助。
LESS详解之混合(Mixins)初级
梦龙小站
11-04 5340
在LESS中，有很多方式都可以称作混合。比如继承已有的样式，调用有参数的类名等。在LESS详解之混合都会为大家一一介绍的。
less模块——混合（像函数一样可以调用）
奔跑的程序员
07-06 1808
123
less学习-带参数混合
付博瀚
08-14 3722
在 LESS 中，你还可以像函数一样定义一个带参数的属性集合: .border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 然后在其他class中像这样调用它: #header { .border-ra...
less-带参数的混合（arguments）
稻草人
06-19 3180
1、编辑less： .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }#header { .border-radius(4px); } .button { .border-radius(
css预处理 之 less（浏览器端） （二） less混合
Mark_fu博客
09-21 263
1-1 less 混合 1、 less learn 下面新建 lesshunhe 下面建立 less 文件 less 通过考拉可以处理 得到 css html文件 引用这个css 需要特别注意路径 1-2 普通混合 + 不带参数混合 缺点 会混合到原生css里面去 使得css文件很大 两个或者多个 1、 2、 01.less 很神奇的写法 是不是 和你的认知不一样 .juzhong { position: absolute; left: 0; right: 0;
Less.js中文文档：CSS扩展与变量、混合与嵌套教程
2. 混合（Mixin）：Less中的混合（Mixin）类似于函数，允许你在一处定义一组属性，然后在其他地方多次调用。例如，`.bordered`类定义了边框样式，`#menua { color: #111; .bordered; }`和`.posta { color: red; ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值