@EncyKe
2016-11-17T07:44:03.000000Z
字数 2058
阅读 1653
#笔记
CSS
编写、维护都在 LESS 文件中,由编译后的 CSS 供浏览器识别。
/* 这一注释将被编译 */
// 这一注释将不会别编译
<div class="box border"></div>
可写作
.border{
// ...
}
.box{
// ...
.border {};
}
@text_width: 300px;
.border(@border_width) {
border: solid yellow @border_width;
}
.border(3px);
.border(@border_width: 5px) {
border: solid yellow @border_width;
}
.border()
即为默认值;
ul {
// ul的样式
li {
// li的样式
}
a {
// a 的样式
// 尽管 a 是 li 的子级,但建议写在与 li 同级,可增加加载速度;
&:hover {
// a:hover 的样式
// & 代表其父级选择器;
}
}
}
.triangle(top, @width: 10px, @colour: gray) {
border-width: @width;
border-color: transparent transparent @colour transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom, @width: 10px, @colour: gray) {
border-width: @width;
border-color: @colour transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(left, @width: 10px, @colour: gray) {
border-width: @width;
border-color: transparent @colour transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(right, @width: 10px, @colour: gray) {
border-width: @width;
border-color: transparent transparent transparent @colour;
border-style: dashed dashed dashed solid;
}
.triangle(@_, @width: 10px, @colour: gray) {
// @_ 表全局引用的因子,无论参数传入成功与否均会实现;
width: 0;
height: 0;
overflow: hidden;
}
.sanjiao {
.triangle(top);
}
// 或者——
.sanjiao {
.triangle(top, 100px);
}
@import "nameOfLess";
@import (less) "nameOfCss.css";
~'内容'
以上内容不被编译,直接原封不动进入 CSS 中,可应用与 filter 及 calc(需让浏览器自己计算而非 CSS)等语句。
div {
.border() {} !important;
}
.triangle {
width: 0;
height: 0;
overflow: hidden;
border-width: 10px;
border-color: transparent transparent blue transparent;
border-style: dashed dashed solid dashed;
/*dashed is for IE*/
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
在 LESS 中的写法:
.clearfix {
zoom: 1;
&::after {
content: "";
display: block;
clear: both;
}
}