0
点赞
收藏
分享

微信扫一扫

less和sass学习


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的开发,变得简单和可维护。

参考

  • ​​less学习​​
  • ​​sass学习​​


举报

相关推荐

0 条评论