今天完成的事情：了解了什么是Sass，如何使用Sass

明天计划的事情：完成任务十一

收获：

1.什么是Sass?

Sass (全称：Syntactically Awesome Stylesheets) 是CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 文件后缀为 .scss。

2.如何使用Sass？

①Sass变量

变量用于存储信息，可以重复使用。声明了变量之后就可以在之后的代码中使用。变量使用$符号

如：$MyColor：pink；即声明了变量MyColor的值为pink

使用如                                                           就等于

body {                                                           body{

    color: $MyColor;                                           color: pink;

}                                                                    }

②Sass作用域

Sass 变量的作用域只在当前的层级上有效果，如在h1内声明的变量只在h1内有用。

如：                                                              就等于

$myColor: red;                                              h1{

h1 {                                                                    color: green;

    $myColor: green;                                      }

    color: $myColor;                                        p{

}                                                                          color: red;

p {                                                                   }

    color: $myColor;

}

使用 !global 关键词来设置变量是全局的

如在上面的例子中，将h1内的变量声明加上！global

h1{

    $myColor: green !global；

    color: $myColor

}

则p的颜色也会变为green

p {

    color: green;

}

③Sass嵌套

可以把同一个祖级的子级或孙级的代码嵌套在一起，如

等同于

很多 CSS 属性有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。也可以把他们嵌套在一起

等同于

④Sass  @import

@import 指令可以让我们导入其他文件中的内容。

如创建一个文件reset.scss：

再在其他的scss文件中用@import指令导入文件

就等同于

⑤Sass @mixin 与 @include

@mixin 指令创建一个可重复使用的样式。

@include 指令可以将创建的样式引入到文档中。

先使用@mixin指令创建

再使用@include指令引入

就等同于

也可以再一个@mixin指令中引入其他的

@mixin指令也可以接收变量

等同于

可以给变量设置一个默认值，在代码没有更改变量时，将使用默认值

如

等同于

如果不能确定有多少个参数，可以用...来设置可变参数

⑥Sass @extend 

@extend指令可以使一个选择器的样式从另一个选择器上继承

如

等同于