sass的简介，安装，语法。

Posted 2020-10-30 maqingyuan

一，sass的简介

1，Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。

2，Sass已经经过其核心团队超过8年的精心打造。

3，有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。

 

二，sass的语法

1，使用变量

1. sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
2. sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width。为什么选择$ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突。

 2，变量声明

sass变量的声明和css属性的声明很像：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

3，变量引用

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

4，嵌套CSS 规则

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

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

5，父选择器的标识符&

article a {
  color: blue;
  &:hover { color: red }
}

 /* 编译后 */

article a { color: blue }
article a:hover { color: red }

sass官方地址：https://www.sass.hk/