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;
}

　　伪类选择器的嵌套：　

.documentation-links .documentation-link {
  text-decoration: none;
  color: map-get($colors,main);
  display: block;
  padding: $size-tiny;
  border: $border-default;
  &:hover,
  &:active {
    color: white;
    background: map-get($colors,secondary);
    border-color: map-get($colors,secondary);
  }
}

 

　　编译后　

.documentation-links .documentation-link {
  text-decoration: none;
  color: map-get($colors,main);
  display: block;
  padding: $size-tiny;
  border: $border-default;
}

.documentation-links .documentation-link:hover,
.documentation-links .documentation-link:active {
  color: white;
  background: map-get($colors,secondary);
  border-color: map-get($colors,secondary);
}

 

　　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;
}

　　变量的简单计算　

$size-default: 1rem;
.sass-introduction {
  border: $border-default;
  background:  lighten(map_get($colors,main),72%);
  padding: $size-default * 2;
  text-align: center;
  box-shadow: $size-tiny $size-tiny 0.1rem #ccc;
  width: 90%;
  box-sizing: border-box;
}

 

　　编译后　

.sass-introduction {
  border: $border-default;
  background:  lighten(map_get($colors,main),72%);
  padding: 2rem;
  text-align: center;
  box-shadow: $size-tiny $size-tiny 0.1rem #ccc;
  width: 90%;
  box-sizing: border-box;
}

 

　　c、Sass的内置函数　

$colors: (main : #521751,secondary : #fa923f);
.sass-introduction {
  border: $border-default;
  background:  lighten(map_get($colors,main),72%);
  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: #f7e1f6;
  padding: 2rem;
  text-align: center;
  box-shadow: 0.2rem 0.2rem 0.1rem #ccc;
  width: 90%;
  box-sizing: border-box;
}

　　sass中存在着大量的内置函数。

　　d、partial和import

　　sass中可以将共享的变量提取到一个单独的文件中，然后通过@import导入使用，编译后的css中不包含这些变量。

　　提取变量到variables.scss文件中　　　

$colors: (main : #521751,secondary : #fa923f);
$border-default:0.05rem solid map-get($colors,main);
$font-default:Arial, sans-serif;
$size-default: 1rem;
$size-tiny : 0.2rem;

 

　　在main.scss中导入就可以使用这些变量。　

@import "_variables.scss";

　　我们可以在main.scss中导入其他的scss文件，文件编译后会被合并到同一个scss文件中，这样可以只需要发一次http请求。而css文件的导入不会合并文件。

 

 

　　e、媒体查询　

html {
  font-size: 94.75%;
  @media (min-width: 40rem) {
    font-size: 125%;
  }
}

 

　　编译后　

html {
  font-size: 94.75%;
}
@media (min-width: 40rem) {
  html {
    font-size: 125%;
  }
}

　　f.inheritance　

.sass-section{
  border: $border-default;
  background:  lighten(map_get($colors,main),72%);
  text-align: center;
  width: 90%;
  box-sizing: border-box;
  @media (min-width: 40rem) {
    width: 30rem;
  }
}
.sass-introduction {
  @extend .sass-section;
  padding: $size-default * 2;
  box-shadow: $size-tiny $size-tiny 0.1rem #ccc;

}

.sass-details {
  @extend .sass-section;
  padding: $size-default;
  margin: 2rem 0;

}

　　编译后　　　

.sass-section, .sass-details, .sass-introduction {
  border: 0.05rem solid #521751;
  background: #f7e1f6;
  text-align: center;
  width: 90%;
  box-sizing: border-box;
}
@media (min-width: 40rem) {
  .sass-section, .sass-details, .sass-introduction {
    width: 30rem;
  }
}
.sass-introduction {
  padding: 2rem;
  box-shadow: 0.2rem 0.2rem 0.1rem #ccc;
}

.sass-details {
  padding: 1rem;
  margin: 2rem 0;
}

　　g、mixin

　　Sass中的混合相当自定义的函数。

@mixin display-flex(){
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin media-min-width($width){
  @media (min-width: $width){
    @content;
  }
}
.container {
  @include display-flex();
  flex:{
    direction: column;
    wrap: nowrap;
  }
  align-items: center;
  padding: $size-default * 3 0;
  box-sizing: border-box;
  @include media-min-width(40rem){
    padding: 3rem 0;
  }
}

　　里面的@content使下面的 padding: 3rem 0;

.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;
}
@media (min-width: 40rem) {
  .container {
    padding: 3rem 0;
  }
}