Less的guards and argument matching
2024-10-01 11:45:14
- less guards/argument matching:
.setbackground(@number) when (@number>0){
.setbackground( @number - 1 );
.class@{number} { background-image: ~"url(backgroundimage-
@{number}.png)"; }
}
.setbackground(10);
输出以下css:
.class1 {
background-image: url(backgroundimage-1.png);
}
.class2 {
background-image: url(backgroundimage-2.png);
}
.class3 {
background-image: url(backgroundimage-3.png);
}
.class4 {
background-image: url(backgroundimage-4.png);
}
.class5 {
background-image: url(backgroundimage-5.png);
}
.class6 {
background-image: url(backgroundimage-6.png);
}
.class7 {
background-image: url(backgroundimage-7.png);
}
.class8 {
background-image: url(backgroundimage-8.png);
}
.class9 {
background-image: url(backgroundimage-9.png);
}
.class10 {
background-image: url(backgroundimage-10.png);
}
- & symbol:
& symbol在less中有特殊的意义，它代表了当前selector的parent:
.class1
{
.class2{
property:;
}
}
.class1
{
.class2 & {
property:;
}
}
由于&代表了.class1所以编译后将输出以下css:
.class1 .class2 {
property:;
}
.class2 .class1 {
property:;
}
同样类似地：
.clearfix() {
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
}
.wrapper {
.clearfix(); 该调用将自动在.wrapper:after{clear: both;}清除float影响。 注意：这里clearfix中的&指的是.wrapper
}
最新文章
- Centos 6.5 安装ELK
- iOS 字符串转son  json转字符串
- PostScript的简单例子-用粗线画一个圆
- java中的不为空判断
- WEB移动应用框架构想（转载）
- Linux的视频编程(V4L2编程)【转】
- XMLHTTPRequest的属性和方法简介
- /bin/bash^M: bad interpreter: No such file or dire
- NA笔记
- java oop详解
- 环境配置（pycharm+virtualenv+git+github等）
- Python（一）—— 控制流：if & for & while
- LINK1104:无法打开文件"\.obj"原因及解决办法
- 如何注册CUBA Studio
- 继承之es5对比es6
- Redis消息通知（任务队列和发布订阅模式）
- 牛客Wannafly9E 组一组 差分约束
- Cocos2d-x执行时错误：Cocos2d: Get data from file(xxx.xxx) failed!
- android project 文件夹
- LeetCode 30 Substring with Concatenation of All Words（确定包含所有子串的起始下标）