Extend伪类
样式的继承使用
LESS:
.public {
width: 100px;
height: 100px;
}
.main
(.public) {
list-style-type: none;
}
CSS:
.public,
.main ul {
width: 100px;
height: 100px;
}
.main ul {
list-style-type: none;
}
命名空间和作用域
指定命名空间
LESS:
.public {
width: 50px;
height: 50px;
}
.box {
width: 100px;
height: 100px;
.a {
display: block;
float: left;
.public;
.b {
.public;
}
}
}
.hk {
.box;
}
.hn {
.box >.a;
}
CSS:
.public {
width: 50px;
height: 50px;
}
.box {
width: 100px;
height: 100px;
}
.box .a {
display: block;
float: left;
width: 50px;
height: 50px;
}
.box .a .b {
width: 50px;
height: 50px;
}
.hk {
width: 100px;
height: 100px;
}
.hk .a {
display: block;
float: left;
width: 50px;
height: 50px;
}
.hk .a .b {
width: 50px;
height: 50px;
}
.hn {
display: block;
float: left;
width: 50px;
height: 50px;
}
.hn .b {
width: 50px;
height: 50px;
}
私有作用域
LESS:
@color: #000;
.main {
@color: #fff;
.main-content {
color: @color;
width: 100px;
height: 100px;
}
}
.foot {
.footer {
color: @color;
}
}
CSS:
.main .main-content {
color: #fff;
width: 100px;
height: 100px;
}
.foot .footer {
color: #000;
}
Parametric Mixins （带参数的混合）
1、参数可以用分号或者逗号分割。但是推荐使用分号分割。因为逗号符号有两个意思：它可以解释为mixins参数分隔符或者css列表分隔符。
使用逗号作为mixin的分隔符则无法用它创建逗号分割的参数列表。换句话说，如果编译器在mixin调用或者声明中看到至少一个分号，它会假设参数是由分号分割的，而所有的逗号都属于CSS列表:
两个参数，并且每个参数都是逗号分割的列表：.name(1,2,3;something, ele)，
三个参数，并且每个参数都包含一个数字：.name(1,2,3)，
使用伪造的分号创建mixin，调用的时候参数包含一个逗号分割的css列表：.name(1,2,3;)，
逗号分割默认值：.name(@param1: red, blue)。
LESS:
.mixin(@color) {
color-1: @color;
}
.mixin(@color;@width) {
color-2: @color;
width-2: @width;
}
.mixin(@color;@width;@height) {
color-3: @color;
width-3: @width;
height-3: @height;
}
.main {
.mixin(#fff;5px;10px);
}
CSS:
.main {
color-3: #fff;
width-3: 5px;
height-3: 10px;
}
2、Named Parameters （命名参数）
引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。
LESS:
.a (@width:10px; @height:10px; @padding:2px 2px; @margin:10px;) {
width: @width;
height: @height;
padding: @padding;
margin: @margin;
}
.b {
.a(@margin:30px;@padding:20px;)
}
CSS:
.b {
width: 10px;
height: 10px;
padding: 20px;
margin: 30px;
}
3、The @arguments variable （@arguments 变量）
@arguments在mixins内部有特殊意义，调用mixin时，它包含所有传入的参数。
LESS:
.border(@blur: 1px; @type:solid; @color: #000) {
border: @arguments;
}
.a {
.border(2px;dashed);
}
CSS:
.a {
border: 2px dashed #000;
}
4、Pattern-matching （模式匹配）
.mixin基于@switch的值以不同的方式表现
LESS:
.mixin(dark; @color) {
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
@switch: dark;
.class {
.mixin(@switch; #888);
}
CSS:
.class {
color: #6f6f6f;
display: block;
}
Mixins as Functions （作为函数使用的混合）
1、从mixin中返回变量
LESS：
.mixin (){
@width: 100px;
@height: 100px;
}
.a {
.mixin();
width: @width;
height
CSS:
.a {
width: 100px;
height: 300px;
}
2、定义在mixin中的mixin可以作为返回值
LESS：
.unlock(@value) {
.doSomething() {
declaration: @value;
}
}
#namespace {
.unlock(5);
.doSomething();
}
CSS：
#namespace {
declaration: 5;
}
Passing Rulesets to Mixins （传递规则集给混合）
1、分离（detached）规则集合是一组CSS属性，嵌套的规则集合，媒体声明或是存储在一个变量中的任何其他东西。可以将其包含到一个规则集合或其他结构中，它的所有属性将被复制在那里。也可以将它作为一个mixin参数，并传递它周围的其他任何变量。
LESS:
// 声明 detached 规则集合
@detached-ruleset: {
background: red;
width: 100px;
height: 100px;
};
// 使用 detached 规则集合
.top {
@detached-ruleset();
}
CSS:
.top {
background: red;
width: 100px;
height: 100px;
}
2、定义一个mixin将一个媒体查询中的一个代码块或者一个浏览器不支持的类名抽象出来时很有用。规则集合可以传递规则集给mixin，所以该mixin会包装这些内容。
LESS:
.a(@rules) {
@media screen and (min-width: 1200) {
@rules();
}
.b & {
@rules();
}
}
header {
background-color: blue;
.a({
background-color: red;
});
}
CSS:
header {
background-color: blue;
}
@media screen and (min-width: 1200) {
header {
background-color: red;
}
}
.b header {
background-color: red;
}
3、一个规则集合现在可以分配给一个变量或传递给一个mixin，并且可以包含全部的less特性。
LESS:
@public: {
.a {
width: 100px;
height: 100px;
}
.a {
background-color: #000;
}
};
@media (orientation:portrait) {
@public();
}
CSS:
@media (orientation: portrait) {
.a {
width: 100px;
height: 100px;
}
.a {
background-color: #000;
}
}
4、
LESS:
.public(@rules) {
.a { @rules(); }
.b{ @rules(); }
}
header {
background-color: blue;
.public ({
background-color: red;
});
}
CSS:
header {
background-color: blue;
}
header .a {
background-color: red;
}
header .b {
background-color: red;
}
5、分离规则集合可以解锁（返回）所有它的mixins给调用者，可以以同样的方式调用mixin。但是，它不会返回变量。
LESS：
// 带有mixin的分离规则集合
@detached-ruleset: {
.mixin() {
color:blue;
}
};
// 调用分离规则集合
.caller {
@detached-ruleset();
.mixin();
}
CSS：
.caller {
color: blue;
}
Mixin Guards（带条件的Mixin）
LESS:
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.main {
.mixin(#333)
}
.foot {
.mixin(#f9f9f9)
}
CSS:
.main {
background-color: white;
color: #333;
}
.foot {
background-color: black;
color: #f9f9f9;
}
网友评论