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学习