sass笔记携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情前言最近在

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

前言

最近在学习，遇到sass,以前也用过，也知道，但是没有用出花，没有用出自己的风格，看了一下，这个东西真好，值得好好学习一下，写一些别人一下看不懂的样式，这不是前端人的追求吗？

我对sass的记忆还是严格的缩紧来对应选择器的层级，sass是css的预处理语言，scss是兼容css又可以有编程思想的语言。

sass可以理解为编程语言，所以有变量的概念 sass的变量以刀了符号来表示，和js变量声明不同，sass变量声明之间是:冒号分割，分号结束定义变量刀了 --color-primary的值为#409EFF

$--color-primary:#409EFF;

后面的变量覆盖前面的变量

sass的块级作用域和es6一致,大括号里有该变量时，以该变量为主，大括号里变量不能在括号外使用定义了变量，直接可以写在属性里直接用了,将body的背景色设置成了蓝色，所有同样色的地方都使用这个变量，等那一天产品突然喜欢绿色，可以随时给他戴个绿色，改一下变量值就都生效了

body{
    background-color: $--color-primary;
}

可以在某个选择器内部继续写其子元素的样式，可以自动转换为父类选择器，

#content article h1 { color: #333 }
#content article p { margin-bottom: 15px }
#content aside { background-color: #EEE }

利用sass ,可以写成下面的格式，可读性强,层级关系明显，简练

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 15px }
  }
  aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 15px }
#content aside { background-color: #EEE }

混合器就是js里的函数，js函数是为了逻辑代码复用，css里是为了样式代码复用，例如

@mixin red-border {
  
 li{
      border:1px solid red;
 }
}

当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则

ul.plain {
  color: #444;
  @include red-border;
}

sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子如下代码:

ul.plain {
  color: #444;
}
ul.plain li {
 border:1px solid red
}

时间有限，知识太多了，剩下的后面学了在记录，这个东西真的好。