Parent Selectors （父級選擇器）
1只壳、使用&引用父選擇器
LESS:
.public {
width: 100px;
height: 100px;
& > p {
background-color: #000;
}
&:hover {
background-color: #fff;
}
:hover {
background-color: #f48;
}
&-btn {
background-color: #f60;
}
&,&-b {
background-color: #ccc;
}
}
CSS:
.public {
width: 100px;
height: 100px;
}
.public > p {
background-color: #000;
}
.public:hover {
background-color: #fff;
}
.public :hover {
background-color: #f48;
}
.public-btn {
background-color: #f60;
}
.public,
.public-b {
background-color: #ccc;
}
2、Changing selector order （改變選擇器順序）
LESS：
.header {
.menu {
border-radius: 5px;
.abc & {
background-image: url('images/button-background.png');
}
.efg & {
background-image: url('images/button-background.png');
}
}
}
CSS:
.header .menu {
border-radius: 5px;
}
.abc .header .menu {
background-image: url('images/button-background.png');
}
.efg .header .menu {
background-image: url('images/button-background.png');
}
3、&還可以用于生成一個逗號分割列表的所有可能的選擇器排列
LESS:
.a, .b, .c, .d {
border-top: 2px dotted #366;
& + & {
border-top: 1px solid #ccc;
}
}
CSS:
.a,
.b,
.c,
.d {
border-top: 2px dotted #366;
}
.a + .a,
.a + .b,
.a + .c,
.a + .d,
.b + .a,
.b + .b,
.b + .c,
.b + .d,
.c + .a,
.c + .b,
.c + .c,
.c + .d,
.d + .a,
.d + .b,
.d + .c,
.d + .d {
border-top: 1px solid #ccc;
}
Merge （合并屬性）
1、merge特性可以從多個屬性中將值集合集合到一個單一屬性之下的逗號或空格分割屬性列表中臭笆。對于諸如background和transform之類的屬性來說，merge非常有用秤掌。
LESS：
.mixin() {
background+: url(../images/1.png) no-repeat;
}
.myclass {
.mixin();
background+:#000;
}
CSS:
.myclass {
background: url(../images/1.png) no-repeat, #000;
}
Loops （循環(huán)）
1愁铺、
LESS:
.generate-columns(5);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
CSS:
.column-1 {
width: 20%;
}
.column-2 {
width: 40%;
}
.column-3 {
width: 60%;
}
.column-4 {
width: 80%;
}
.column-5 {
width: 100%;
}
Mixin Guards（帶條件的Mixin）
1、
LESS：
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
CSS:
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
2闻鉴、Guard comparison operators （Guard中的比較運算符）
guards中可用的比較運算符的完整列表為： >, >=, =, =<, <茵乱。此外，關(guān)鍵字true是讓兩個mixins等價的唯一真值孟岛。
3瓶竭、Guard logical operators （Guard邏輯運算符）
使用and關(guān)鍵字來組合guards
LESS:
@media: mobile;
@media: desktop;
.mixin (@a) when (@media = mobile) {
width: 100px;
height: 100px;
}
.mixin (@a) when (@media = desktop) {
width: 200px;
height: 200px;
}
.max (@a; @b) when (@a > @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }
.class1 { .mixin(100px) }
.class2 { .mixin(200px) }
CSS:
.class1 {
width: 200px;
height: 200px;
}
.class2 {
width: 200px;
height: 200px;
}
函數(shù)
color(string) 解析顏色,將代表顏色的字符串轉(zhuǎn)換為顏色值
convert(value,unit) 將數(shù)字從一種單位轉(zhuǎn)換到另一種單位.第一個參數(shù)為帶單位的數(shù)值,第二個參數(shù)為單位.
ceil(number)向上取整
floor(number)向下取整
percentage(number)將浮點數(shù)轉(zhuǎn)換為百分比字符串
round(number)四舍五入取整
sqrt(number)計算一個數(shù)的平方根,并原樣保持單位
pow(number,number)設(shè)第一個參數(shù)為A,第二個參數(shù)為B,返回A的B次方.
mod(number,number)返回第一個參數(shù)對第二參數(shù)取余的結(jié)果.
min(value1, ..., valueN)返回一系列值中最小的那個.
max(value1, ..., valueN)返回一系列值中最大的那個.
abs(number)計算數(shù)字的絕對值,并原樣保持單位
sin(number)正弦函數(shù)
cos(number)余弦函數(shù)
asin(number)反正弦函數(shù).返回以弧度為單位的角度,區(qū)間在 -PI/2 到 PI/2之間.
acos(number)反余弦函數(shù).區(qū)間在 0 到 PI之間.
tan(number)正切函數(shù)
atan(number)反正切函數(shù)
pi()返回圓周率 π (pi)
isnumber(value)如果待驗證的值為數(shù)字則返回 true,否則返回 false
isstring(value)如果待驗證的值是字符串則返回 true,否則返回 false
iscolor(value)如果待驗證的值為顏色則返回 true,否則返回 false
練習(xí)
1、四角的半徑
LESS:
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
-moz-border-radius: @topleft @topright @bottomright @bottomleft;
border-radius: @topleft @topright @bottomright @bottomleft;
}
#somediv {
.border-radius-custom(20px, 20px, 0px, 0px);
}
CSS:
#somediv {
border-radius: 20px 20px 0px 0px;
}
2渠羞、方塊陰影
LESS:
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
#somediv {
.box-shadow(5px, 5px, 6px, 0.3);
}
CSS:
#somediv {
box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
3斤贰、 轉(zhuǎn)換/旋轉(zhuǎn)
LESS：
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
#someDiv {
.transform(5deg, 0.5, 1deg, 0px);
}
CSS:
#someDiv {
-webkit-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
}
4 、不同背景圖
LESS：
@base-url: "../images ";
@icon-image-url: "a.png";
.icon (@index) {
background-image: url("@{base-url}/@{icon-image-url}");
background-position: 0px (0 - (10 * @index));
}
.icon (@_) {
width: 50px;
height: 50px;
}
#icon1 {
.icon (1);
}
#icon2 {
.icon (2);
}
#icon3 {
.icon (3);
}
CSS:
#icon1 {
background-image: url("../images/images/a.png");
background-position: 0px -10;
width: 50px;
height: 50px;
}
#icon2 {
background-image: url("../images/images/a.png");
background-position: 0px -20;
width: 50px;
height: 50px;
}
#icon3 {
background-image: url("../images/images/a.png");
background-position: 0px -30;
width: 50px;
height: 50px;
}
