scss基本用法及详解及进行模块化开发

      scss的基本用法：

1、基本功能（常用）

      (1)、导入：@import，可单独导入，也可同时导入多个 （文件可加后缀（允许scss和sass），也可不加（如果没有后缀，则会找到相同名字并且后缀即拓展名为.scss或者.sass的文件））

             <1>、导入单个  @import "../colorTool/colors";

             <1>、导入多个  @import "../variableTool/quantity", "../methodTool/func";

      (2)、嵌套：

              <1>、规则：嵌套时，内层样式将他的外层作为父级选择器，嵌套功能避免了重复输入父级元素，同时让复杂的scss结              构变得利于管理。

              <2>、元素嵌套：如果嵌套时给某个元素设置hover属性，及可用&来代替父级元素。这就是元素嵌套！

              <3>、元素嵌套写法：.go-back{ cursor: pointer;font-size: 16px;.back-icon{vertical-align: sub; }&:hover{color: #2d8cf0;}}            执行编译后：.go-back{ cursor: pointer; font-size: 16px; } .go-back .back-icon{ vertical-align: sub; }

                               .go-back:hover{ color: #2d8cf0; }

              <4>、属性嵌套：为了便于管理类似（font-weight，font-size）等类的属性，同时也为了避免了重复输入，Sass 允许将             属性嵌套在命名空间中

              <5>、属性嵌套写法：.accc{ font: { family: fantasy; size: 30em; weight: bold; }  }。执行编译后.

            accc {font-family:     fantasy;font-size: 30em;font-weight: bold;}

      (3)、注释：scss支持css的多行注释（/* */），也可以单行注释（//），多行注释编译为css会被打包到文件