个人学习笔记-CSS/Sass比较使用

Sass选择器嵌套

/* CSS */
.content {}
body .content {}

/* SCSS */
.content {
    body & {}
}

/* CSS */
.content {}
.content_cover {}
.content_info_name {}

/* SCSS */
.content {
    &_cover {}
    &_info {
        &_name
    }
}

Sass属性嵌套

/* CSS */
.content {
    background-color: red;
    background-repeat: no-repeat;
    background-image: url(/img/icon.png);
    background-position: 0 0;
}

/* SCSS */
.content {
    background : {
        color: red;
        repeat: no-repeat;
        image: url(/img/icon.png);
        position: 0 0;
    }
}

Sass变量

// CSS
.content {
    color: red;
    border-color: red;
}

//SCSS
$color: red;
.content {
    color: $color;
    border-color: $color;
}

Sass混合(mixin)

// CSS
.content_1 {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.content_2 {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

//SCSS
@mixin radius($radius:5px) {  //这是默认值写法
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.content_1 {
    @include radius; //不传参用默认值
}
.content_2 {
    @include radius(10px);
}