Sass/Scss学习

Sass/Scss区别：sass不需要{}和；而scss需要

//sass:
$color=red
.box
    color:$color

//scss
$color:red;
.box{
    color=$color;
}

个人建议使用scss,更符合书写习惯，代码也更清晰

sass需要编译成css文件然后使用

编译规则有以下几种：

nested：嵌套缩进的css代码

expanded：展开的多行css代码

compact：简洁格式的css代码

compressed：压缩后的css代码

声明

$作为声明符，紧接变量名，然后赋值。

$color:red;

默认值
在声明后面加入!defualt

$color:red !default;

覆盖默认值
在默认变量声明之外再声明一个变量，声明部分前后，当有其他声明时，默认值被忽略。

$color:blue;
$color:red !default;

$color:red !default;
$color:blue;

嵌套

选择器嵌套

//html
<header>
    <nav>
        <a></a>
    </nav>
</header>
//css
nav a{}
header nav a{}

//scss
nav{
    a{
        //...
        header &{
            //...
        }
    }
}

属性嵌套

//css
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

//scss
.box{
    b
}