less
mixi
将一系列的属性从一个规则集引入到另一个规则集的方式。
普通混合
- center会编译到css中
.center{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
background: @color;
height: 100px;
width: 100px;
}
.inner1 {
.center
}
.inner2 {
.center
}
<div class="inner1">
</div>
<div class="inner2">
</div>
不带输出混合
- .center()不会编译到
.center(){
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
background: @color;
height: 100px;
width: 100px;
}
.inner1 {
.center
}
.inner2 {
.center
}
带参数的混合
.center(@w, @h, @bg) { // 参数
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
background: @bg;
height: @h;
width: @w;
}
.inner1 {
.center(100px, 100px, red);
}
.inner2 {
.center(200px, 200px, orange);
}
带参数有默认值的混合
.center(@w:100px, @h:200px, @bg:red) { // 参数
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
background: @bg;
height: @h;
width: @w;
}
.inner1 {
.center();
}
.inner2 {
.center(200px, 200px, orange);
}
命令参数
- 指定的实参给对应的形参
.center(@w:100px, @h:200px, @bg:red) { // 参数
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
background: @bg;
height: @h;
width: @w;
}
.inner1 {
.center(@bg:orange);
}
.inner2 {
.center(200px, 200px, orange);
}
规则匹配
// 对于三角形的方向进行编写
// 定义通用的参数,@_代表对应的.trange(L/R/T/B,@w, @bg)都会先表用此选择器,再调用自己,目的是抽离相同的参数
// 这些内容在 trangle.less中
.trangle(@_, @w, @bg) {
width: 0px;
height: 0px;
overflow: hidden;
}
.trangle(R, @w, @bg) {
border-width: @w;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent @bg;
}
.trangle(L, @w, @bg) {
border-width: @w;
border-style: dashed solid dashed solid;
border-color: transparent @bg transparent transparent;
}
.trangle(B, @w, @bg) {
border-width: @w;
border-style: solid dashed dashed dashed;
border-color: @bg transparent transparent transparent;
}
.trangle(T, @w, @bg) {
border-width: @w;
border-style: dashed dashed solid dashed;
border-color: transparent transparent @bg transparent;
}
// 使用
@import './trangle.less';
.trangle1 {
.trangle(B, 40px, red);
}
arguments参数
.border(@1, @2, @3){
border: @arguments;
}
.box {
.border(1px, solid, black)
}
less计算
可以进行加减乘除
.box {
width: (100 + 100px); //是200px
}
继承(extend)
- 没有参数形式,灵活度不高
@import "./extend/extend.less";
* {
margin: 0px;
padding: 0px;
}
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
// .inner:extend(.center) {
.inner {
// &:extend(.center); // 一个公共对象
&:extend(.center all); // 多个公共对象
&:nth-child(1) {
width: 100px;
height: 100px;
background-color: orange;
}
&:nth-child(2) {
width: 50px;
height: 50px;
background-color: red;
}
}
}
sass
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。