(1) 安装

(1) 安装ruby https://rubyinstaller.org/downloads/ ( 勾选配置环境变量 ) ，( ruby -v 查看版本)
(2) 安装sass 和 compass ( gem install sass，gem install compass ) ，( sass -v查看版本 )

(2) 变量 $

(1) 变量可以在规则块外也可以在规则块内
(2) 规则块内定义的变量，只能在规则块内使用 ---- 类似 es6 变量的块级作域
( 嵌套时，里层可以得到外层变量 )
(3) $a-b 和 $a_b 是相等的

$highlight-color: white;

$basic-border: 1px solid black;  --------- 用空格分割多个属性值、

$plain-font: "Myriad Pro"、Myriad; --------- 逗号分割的多个属性值，

(3) 嵌套

避免重复写选择器 #con article h1 { color: #333 }，#con article p { margin-bottom: 1.4em }

(4) 父选择器的标识符 &


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

编译后：

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

(5) @import

(1) sass的@import规则在生成css文件时就把相关文件导入进来，这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。
(2) 所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

(6) _xxx.scss ---------- 局部文件

(1) 以下划线开头命名的scss文件，不会单独打包成.css文件，被称为局部文件。
(2) sass局部文件的文件名以下划线开头，这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入
(3) @import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线
(4) 局部文件可以被多个不同的文件引用。

(7) !default 标签

(1) !default标签用于变量
(2) 含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

// index.scss文件

@import "_color.scss";       // 导入_color.scss文件
$color: red;                 // 定义color变量 
.mn {
    width: 400px;
    height:400px;
    color: white;
    background: $color;          // 最终显示的是red，而不是black
}

-----------------------------------

// _color.scss文件

$color: black !default;     // !default

(8) 静默注释 ------------- 以 // 开头

静默注释注释的内容不会出现在css文件中


body {
  color: #333; // 这种注释内容不会出现在生成的css文件中---------- 静默注释
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */

}

(9) 注释报错 ------------- @charset "utf-8"

error index.scss (Line 43: Invalid GBK character "\xE6")
解决办法：在scss文件开头加上 ------------- @charset "utf-8";
注意：一定要在scss文件的最开头

(10) 混合器 @mixin --- 主要用于样式展示层的重用

(1)你可以通过sass的混合器实现大段样式的重用。
(2) 混合器使用@mixin标识符定义
(3) 在你的样式表中通过@include来使用这个混合器
(4) 判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字


@mixin circle {              // 混合器 @mixin
    border-radius:50%;
    background:hotpink;
    border: 8px solid darkorange;
}

.mix {
    width:100px;
    height:100px;
    @include circle;       // @include使用混合器
}

(11) 混合器传参 $name: value

(1) $name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了
(2) 为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用
(3) 混合器只是sass样式重用特性中的一个。我们已经了解到混合器主要用于样式展示层的重用，如果你想重用语义化的类呢？这就涉及sass的另一个重要的重用特性：选择器继承。


@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

如果像下边这样调用：

@include link-colors(red) $hover和$visited也会被自动赋值为red。

(12) 选择器继承 @extend

(1) 选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现


//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上边的代码中，.seriousError将会继承样式表中任何位置处为.error定义的所有样式。

以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"。

(13) % 选择器占位符

(1) 它自身不会出现在编译后的CSS文件中, 只会出现在@extend了它的那些选择器中。
(2) 通过 @extend 调用

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  /*错误图标指定的样式... */
}

.info-icon {
  @extend %icon;
  /* 信息图标指定的样式... */
}

----------------------------------------------------------

编译出的CSS:

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /*错误图标指定的样式... */
}

.info-icon {
  /* 信息图标指定的样式... */
}


请注意，编译出来的CSS代码中将不再包括 .icon 了。

(14) #{} 插值语句

(1) 通过 #{} 插值语句可以在选择器或属性名中使用变量


$name: foo;
$attr: border;
p.#{$name} {                      // 选择器中使用变量 #{}
  #{$attr}-color: blue;          // 属性名中使用变量 #{}
}

-----------------------------

编译为:

p.foo {
  border-color: blue; }

(15) 继承的高级用法

-------- 最常用的一种高级用法是继承一个html元素的样式
-------- 尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承。

(16) 使用继承的最佳实践

(1)不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控
(实战) https://www.cnblogs.com/paul-3/p/5994887.html

(17) tree命令 -------- 目录树结构

(1) 使用tree命令导出windows的文件夹/文件的目录树

/F 显示每个文件夹中文件的名称。（带扩展名）
/A 使用 ASCII 字符，而不使用扩展字符。

tree /f > list.txt            // -- 将带扩展名的文件目录输出到list.txt文件中

(18) 如何组织sass目录 -------------- ！

(sass合理的目录结构) https://www.w3cplus.com/preprocessor/architecture-sass-project.html
https://www.zhihu.com/question/29239526
(1) 通常使用7-1模式的结构：7个文件夹，1个文件。
(2) vendors 是供应商的意思 -------- 这里指第三方库或框架
(3) utils 是工具的意思


// 通常使用7-1模式的结构：7个文件夹，1个文件。

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...                  # Etc…
|
|– layout/
|   |– _navigation.scss  # Navigation
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
|– themes/
|   |– _theme.scss       # Default theme
|   |– _admin.scss       # Admin theme
|   ...                  # Etc…
|
|– utils/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # Etc…
|
|
`– main.scss             # primary Sass file

Sass