CSS Guards（CSS保护）
LESS:
& when (@my-option = true) {
button {
color: white;
}
a {
color: blue;
}
}
Import Directives （导入准则）
LESS:
.a {
color: green;
}
@import (multiple) "style.less";
@import (multiple) "style.less";
CSS:
.a {
color: green;
}
.a {
color: green;
Misc Functions （杂项函数）
LESS:
.mixin(1) {x: 11}
.mixin(2) {y: 22}
.mixin(@x) when (default()) {z: @x}
div {
.mixin(3);
}
div.special {
.mixin(1);
}
CSS：
div {
z: 3;
}
div.special {
x: 11;
}
LESS:
.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default()) {padding: (@value / 5)}
div-1 {
.mixin(100px);
}
div-2 {
.mixin(300px);
}
CSS:
div-1 {
width: 100px;
padding: 20px;
}
div-2 {
width: 300px;
padding: 60px;
}
String Functions （字符串函数）
replace （替换）
- string: 搜索和替换用的字符串.
- pattern:一个字符串或者能搜索的正则表达式.
- replacement: 匹配模式成功的替换字符串.
- flags: (可选的) 正则表达式匹配标识（全匹配还是…）.
LESS:
replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');
Color Definition Functions （颜色定义函数）
1、通过十进制红色，绿色，蓝色，以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。
@red: 整数 0-255 或百分比 0-100%.
@green: 整数 0-255 或百分比 0-100%.
@blue: 整数 0-255 或百分比 0-100%.
@alpha: 数字 0-1 或百分比 0-100%.
2、通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。
@hue: 整数 0-360 表示度数
@saturation: 整数 0-100% 或是数字 0-1
@lightness: 整数 0-100% 或是数字 0-1
练习
less：
@import "state.less";
@import "layout.less";
@import "base.less";
.f-l {
float: left;
}
.f-r {
float: right;
}
#box-wrap {
.banner {
padding-top: 70px;
margin-bottom: 80px;
.container {
width: 970px;
.navbar {
margin: 0 15px;
.col-nav-l {
width: 25%;
.f-l;
a {
width: 52px;
height: 30px;
padding: 0;
font-size: 18px;
display: block;
}
}
.col-nav-c {
width: 75%;
.f-l;
ul {
display: table;
margin-bottom: 0;
padding-left: 0;
text-align: center;
li {
font-size: 20px;
display: inline-block;
position: relative;
margin-left: 50px;
.f-l;
&:first-child {
a {
border-bottom: 2px solid #52d3aa;
}
}
a {
color: #000;
font-weight: 400;
&:hover {
color: #989898;
}
}
}
}
}
}
}
}
.intro {
width: 970px;
padding-bottom: 5em;
.intro-txt {
width: 60%;
margin: 0 auto;
h2 {
font-size: 30px;
line-height: 1.5em;
margin-bottom: 30px;
text-align: center;
}
}
}
}
CSS:
#header {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: #eeeff0;
margin: 0;
padding: 0;
}
#box-wrap {
background-color: #fff;
max-width: 1000px;
margin: 0 auto;
}
.fix {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
a {
text-decoration: none;
}
.f-l {
float: left;
}
.f-r {
float: right;
}
#box-wrap .banner {
padding-top: 70px;
margin-bottom: 80px;
}
#box-wrap .banner .container {
width: 970px;
}
#box-wrap .banner .container .navbar {
margin: 0 15px;
}
#box-wrap .banner .container .navbar .col-nav-l {
width: 25%;
float: left;
}
#box-wrap .banner .container .navbar .col-nav-l a {
width: 52px;
height: 30px;
padding: 0;
font-size: 18px;
display: block;
}
#box-wrap .banner .container .navbar .col-nav-c {
width: 75%;
float: left;
}
#box-wrap .banner .container .navbar .col-nav-c ul {
display: table;
margin-bottom: 0;
padding-left: 0;
text-align: center;
}
#box-wrap .banner .container .navbar .col-nav-c ul li {
font-size: 20px;
display: inline-block;
position: relative;
margin-left: 50px;
float: left;
}
#box-wrap .banner .container .navbar .col-nav-c ul li:first-child a {
border-bottom: 2px solid #52d3aa;
}
#box-wrap .banner .container .navbar .col-nav-c ul li a {
color: #000;
font-weight: 400;
}
#box-wrap .banner .container .navbar .col-nav-c ul li a:hover {
color: #989898;
}
#box-wrap .intro {
width: 970px;
padding-bottom: 5em;
}
#box-wrap .intro .intro-txt {
width: 60%;
margin: 0 auto;
}
#box-wrap .intro .intro-txt h2 {
font-size: 30px;
line-height: 1.5em;
margin-bottom: 30px;
text-align: center;
}
