遇见Sass（Sass的学习笔记）

首先菜鸟教程的中文文档：https://www.runoob.com/sass/sass-tutorial.html

其次，如果大家编写的Sass保存不能自己生成css，可以参考：https://blog.csdn.net/qq_36509946/article/details/112285042

如果想了解Less,可以参考：https://blog.csdn.net/qq_36509946/article/details/112235454

接下来，开始学习

一、什么是Sass?

    Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

    Sass 是一个 CSS 预处理器。

    Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

    Sass 完全兼容所有版本的 CSS。

    Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

    Sass 生成良好格式化的 CSS 代码，易于组织和维护。

    Sass 文件后缀为 .scss。

二、变量（Variables）

    这个相信会写js小可爱一看就懂，只是有可能短暂性不适应这种写法而已

    $ 相当于 js中的var  es6中的let,cost

    $ 后面就相当于我们声明了一个变量，然后在需要的时候，调用变量即可-----------------当然，在less里语法也是一样的，只是将$换成@即可

    对比示例：

    sass代码：

$width:10px;
$height:$width + 10px;
#height{
    width:$width;
    height: $height;
}

三、嵌套（Nesting）

    可以把这种嵌套关系理解为写html标签页面，一层一层嵌套的thml标签就相当于一层一层嵌套的样式-------写法和Less一样

    对比示例：

    sass代码：

#header{
color: #000;
.navigation{
    font-size: 12px;
}
.logo{
    width: 300px;
    height: 300px;
    .logImage{
        display: block;
        width: 100%;
    }
}
}

四、混入（@mixin 与 @include ）

    

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

这种方法就类似于我们在js中声明了一个函数，然后在需要的地方调用就好了-------和Less有略微的差距

@mixin     可以看作是声明一个函数，@mixin后面跟的是函数名，函数还可以传参数

@include   可以看作是调用一个函数，@include后面跟的是函数名

    对比示例：

    sass代码：

// 1.没有参数的调用
@mixin bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a{
  color: #cccccc;
  @include bordered;
}

// 2.有参数的调用
@mixin bord($borderWidth,$borderColor){
  border: $borderWidth solid $borderColor;
  }
.post a{
  color: rebeccapurple;
  @include bord(2px,#ffff00);
}

五、@extend 与 继承 

    如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

     即：如果两个标签大多数样式都一样，只有一点点不一样的时候，可以用到继承

    @extend 后面跟上class或id样式即可----@extend .button-basic/#button-basic

    对比示例：

    sass代码：

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

还有一些sass的函数、导入等，就不一一做解释了，可以参考菜鸟教程：https://www.runoob.com/sass/sass-tutorial.html