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>//cssnav a{}header nav a{}

//scssnav{    a{        //...        header &{            //...        }    }}

属性嵌套

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

//scss.box{    b}