Sass/SCSS（关系，安装，webstorm配置编译，使用，语法）

Sass/SCSS的关系，SCSS的安装，webstorm编译配置SCSS，SCSS使用（语法）

一、 Sass、SCSS

Sass：一种css预处理器和一种语言。Sass（预处理器）有两种不同的语法：

Sass : 一种缩进语法
SCSS : 一种 CSS-like 语法

Sass

Sass使用类似Ruby的语法，没有花括号，没有分号，具有严格的缩进，就像这样：

// 变量
!primary-color= hotpink

// 混入
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius

.my-element
    color= !primary-color
    width= 100%
    overflow= hidden

.my-other-element
    +border-radius(5px)

//@import
@import themes/dark
@import font.sass

* 注：变量的标志用 !，而不是 $；分配符是 = 而不是 : 。

SCSS

SCSS和Sass相比更加贴近CSS语法。Sass语法中的!和=换成了SCSS中的$和:。就像这样：

// 变量
$primary-color: hotpink;

// 混入
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

//@import
@import "themes/dark";
@import "font.sass";

* 注：变量的标志用 $ ，分配符是 : 。

总结：

Sass：

更短并且更易于书写。没有花括号，没有分号，甚至不需要@mixin 或者 @include, 一个字符就足够了：= 和 +
Sass 通过严格的缩进来强制 clean coding standards。因为一个错误的缩进就会破坏整个.sass文件，这使得整个代码总是clean 和格式良好的。缩进一个元素，意味着将它变为了之前元素的子元素。

SCSS：

易于阅读，因为它是有语义的，而不是用符号表示，没有用任何缩写。读到 @mixin，就知道这是一个 mixin 声明；看到 @include ，就是在引用一个 mixin。
Sass 通过严格的缩进来强制 clean coding standards。因为一个错误的缩进就会破坏整个.sass文件，这使得整个代码总是clean 和格式良好的。缩进一个元素，意味着将它变为了之前元素的子元素。

注意： Sass 没有大写，无论指的是语法或语言。但SCSS 一直是大写。

二、 SCSS的使用（安装，webstorm配置，SCSS语法）

安装：

1 . 安装SCSS先要安装ruby。因为Sass/SCSS依赖ruby环境。可以去官网下载：https://rubyinstaller.org/downloads/
2 . 安装完ruby之后，打开cmd，在命令行中输入gem install sass 命令。

查看 sass 版本 sass -v
更新 sass 版本 gem update sass

webstorm配置：

打开 webstorm 的 settings(设置) –>Tools(工具集)–>File Watchers(文件监听)–> +（新增）
配置：
Arguments（输出参数） :
（表示将编译好的 css 文件，输出到 scss 文件的父级 outcss 文件夹下。）

--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\outscss\$FileNameWithoutExtension$.css

Working directory （工作目录）:

$FileNameWithoutExtension$.css

SCSS语法：

①变量

普通变量：变量定义$

//SCSS
$color_pink:pink;
div{
color:$color_pink;

//css
div{
color:pink;
}

默认变量： !default

//SCSS
$color:pink !default;
div{
color:$color;

//css
div{
color:pink;
}

覆盖默认变量：在默认变量之前重新声明改变量

//SCSS
$color:skyblue;
$color:pink !default;
div{
color:$color;
}

//css
div{
color:skyblue;
}

特殊变量：变量定义 #{$variable}

//SCSS
$borderDirection: top !default; 
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default; 
//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

全局变量，多指变量……
http://www.w3cplus.com/sassguide/syntax.html

②混入 @mixin

- @mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开；
- 声明的@mixin通过@include来调用；

//无参数mixin

//SCSS
@mixin center-block {
    margin-left:auto;
}
.demo{
    @include center-block;
}

//css
.demo{
    margin-left:auto;
}

//有参数mixin

//SCSS
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

多组值参数……
http://www.w3cplus.com/sassguide/syntax.html

③嵌套 { { } } & ：

- 选择器的嵌套；（常用）
- 属性的嵌套。

选择器嵌套

//SCSS
 #top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css
 #top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
 #top_nav li{
  float:left;
}
 #top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
 #top_nav a:hover{
  color:#ddd;
}

属性嵌套（有些属性拥有同一个开始单词，如border-width，border-color都是以border开头）

//SCSS
 .fakeshadow {
  border: { style: solid;
    left: { width: 4px;
      color: #888;
    }
    right: { width: 2px;
      color: #ccc;
    }
  }
}

//css
 .fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

普通跳出嵌套（@at-root ; @at-root(without : …) ; @at-root(with : …)）……
http://www.w3cplus.com/sassguide/syntax.html

④导入 @import

- 导入SCSS文件：编译时会将@import的SCSS文件合并进来只生成一个CSS文件。
- 导入css文件：如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在

//被导入sass文件 a.scss：

body {
  background: #eee;
}

//需要导入样式的sass文件 b.scss：

@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 

//转译出来的 b.css 样式：

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

⑤继承 @extend

- 让选择器继承另一个选择器的所有样式

//SCSS
 h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css
 h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

⑥函数 @fuction

- 实际项目中使用最多的应该是颜色函数；
- 颜色函数中以lighten减淡和darken加深为最，调用方法为：
    + lighten($color,$amount)
    + darken($color,$amount)
    + 第一个参数是颜色值，第二个参数是百分比。

//SCSS
$baseFontSize: 10px !default;
$gray: #ccc !defualt;        

// 单位转换：px 转换成 rem 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}


//css
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

⑦注释

- /*可以被编译出来注释 */
- //不可以被编译出来的注释

关于@mixin，%，@function更多说明可参阅：

Sass揭秘之@mixin，%，@function
http://www.w3cplus.com/preprocessor/sass-mixins-function-placeholder.html
Sass基础——颜色函数
http://www.w3cplus.com/preprocessor/sass-color-function.html
Sass基础——Sass函数
http://www.w3cplus.com/preprocessor/sass-other-function.html

条件判断及循环（@if判断，三目判断，for循环，@each循环）……
http://www.w3cplus.com/preprocessor/sass-advanced-application.html
http://www.w3cplus.com/sassguide/syntax.htm

Sass/SCSS的关系，SCSS的安装，webstorm编译配置SCSS，SCSS使用（语法）

一 、 Sass、SCSS

二 、 SCSS的使用（安装，webstorm配置，SCSS语法）

安装：

webstorm配置：

SCSS语法 ：

一、 Sass、SCSS

二、 SCSS的使用（安装，webstorm配置，SCSS语法）

SCSS语法：