Sass/Scss

　　一、什么是Sass/Scss.

　　Sass和Scss是指的是同一个东西。Sass的语法更近ruby，而Scss更接近css代码。Sass/Scss是对css的扩展，但是scss/sass不能之间直接运行在浏览器中，需要编译成css.

　　

　　二、在命令行中安装Sass和使用

　　首先需要在电脑上安装node.然后使用npm安装Sass.　

　　npm install -g sass

　　常用的命令

　　sass main.scss main.css
　　sass --watch main.scss:main.css

　　三、Sass的语法

　　a、nesting(嵌套)　

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

　　编译后：

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}

　　属性嵌套：　　

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex:{
    direction: column;
    wrap: nowrap;
  }
  align-items: center;
  padding: 3rem 0;
  box-sizing: border-box;
}

　　编译后：

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  padding: 3rem 0;
  box-sizing: border-box;
}

　　伪类选择器的嵌套：

　　b、Variables(变量)

　　变量名字需要以$符号开始。

$main-color:#521751;
.sass-introduction {
  border: 0.05rem solid $main-color;
  background: #fae5ff;
  padding: 2rem;
  text-align: center;
  box-shadow: 0.2rem 0.2rem 0.1rem #ccc;
  width: 90%;
  box-sizing: border-box;
}

　　编译后：　　

.sass-introduction {
  border: 0.05rem solid #521751;
  background: #fae5ff;
  padding: 2rem;
  text-align: center;
  box-shadow: 0.2rem 0.2rem 0.1rem #ccc;
  width: 90%;
  box-sizing: border-box;
}

　　变量表示list　

$border-default:0.05rem solid $main-color;
$font-default:Arial, sans-serif;
body {
  font-family: $font-default;
  margin: 0;
}
.sass-introduction {
  border: $border-default;
  background: #fae5ff;
  padding: 2rem;
  text-align: center;
  box-shadow: 0.2rem 0.2rem 0.1rem #ccc;
  width: 90%;
  box-sizing: border-box;
}

　　变量表示map　

$colors: (main : #521751,secondary : #fa923f);
.documentation-links .documentation-link {
  text-decoration: none;
  color: map-get($colors,main);
  display: block;
  padding: 0.2rem;
}

　　　编译后　

.documentation-links .documentation-link {
  text-decoration: none;
  color: #521751;
  display: block;
  padding: 0.2rem;
}