Sass/Scss 基础篇

Sass/Scss 基础篇

总结Sass学习到的内容

---

• 应用Sass/Scss前，环境配置

  1. 首先下载Ruby (http://rubyinstaller.org/downloads)
  2. 通过命令下载sass gem install sass
  3. VScode配置 下载插件 Live Sass Compiler
  4. VScode配置 配置工作区中的setting.json

     "liveSassCompile.settings.formats":[
         // 扩展
         {
             "format": "compact",//可定制的出口CSS样式（expanded，compact，compressed，nested）
             "extensionName": ".min.css",//编译后缀名
             "savePath": null//编译保存的路径
         } 
     
     ],
     "liveSassCompile.settings.generateMap": false, //不生成map文件
     "liveSassCompile.settings.excludeList": [
         "**/node_modules/**",
         ".vscode/**"
         **    // 只是编译当前的sass文件
      ],
     "liveSassCompile.settings.autoprefix": [
         "> 1%",  //">1%"是指 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。
         "last 3 versions"  //"last 3 versions"是指 每个浏览器的最后3个版本。
         或
         "ie >= 6",  //ie6以上
         "firefox >= 8",
         "chrome >= 24",
         "Opera>=10"
     ]
     

• Sass与Scss的区别

  Sass编译写法偏向于Python 没有大括号{}以及分号；
  
  Scss编译写法偏向于CSS 有大括号和分号

• 编译方法

  1. 命令编译
     
     <Sass文件PATH> : <编译后的CSS文件的PATH> (单文件)
     
     sass/ : css/ (多文件)
     
     sass --watch 自动监测代码变化，自动编译
  2. GUI编译 （VScode的自动编译 上面已配置）
  3. 自动化编译 Grunt和Gulp自动化 <cm: 后期要把这部分补上>

• 编译出的样式

  1. 嵌套 -- nested 大括号不单都占行
  2. 展开 -- expanded 大括号单都占行
  3. 紧凑 -- compact 每项只占一行
  4. 压缩 -- compressed 全部一行 （后期推荐使用此方法，减轻文件所占内存）

---

Sass/Scss 基础知识

• 默认变量声明：$btn-primary-color : #fff !default;
  
  想要改变默认值要在默认语句前面定义

• 注释： //不在编译后CSS文件中显示 /* */在编译后CSS文件中显示

• 数据类型：
  
  数字，字符串，颜色，布尔值，空值，值列表（用空格或逗号分开）

• 字符串:
  
  有引号字符串"header-1"
  
  无引号字符串 sans-serifbold
  
  但是在使用插值的时候，无论调用的是否是无引号的字符串，都会被编译成无引号的字符串

• 值列表：
  
  nth：访问值列表的某一项（第几项）
  
  append： 添加
  
  join： 连接多个列表
  
  @each：遍历值列表中的所有项目

• 运算：
  
  加 减 乘 除
  
  乘法运算时： 20px * 2 后面的数字不能带单位
  
  除法运算时：
  
  在代码中"/"被认为是除法的情况：

  1. 算式中有变量
  2. 除法算式被()包围
  3. 不只有除法运算时

  当进行颜色运算时，十六进制#xxxxxx 当成十进制数字运算

---

Sass/Scss 常用标准方法--重要

• 嵌套：

  -- 父类子类嵌套

  1. 选择器嵌套
  2. 属性嵌套
  3. 伪类嵌套
     
     注：尽量避免使用选择器嵌套，避免选择器太具体。否则对于后期维护，以及代码可读性都有很差的体验

• 混合宏：@mixin （重点）

  -- 相当于用于被调用的小函数，用于通过同样的算法，自动生成各自的样式

  • 特点：
    1. 可带参数
    2. 调用方法 @include
    3. 可传一个不带值的参数--变量
    4. 传一个带值的参数--常量
  • 缺点：
    
    不动自动合并相同样式的代码

• 扩展/继承：@extend

  -- 相当于CSS中堆叠样式,在父类样式的基础上再添加或改变样式

• 占位符：%xxx

  -- 不被调用时，不会产生CSS代码，可以节省空间

• 插值：Interpolation

  -- 与JS中join方法很像，主要是拼接功能

  • 可以用在调用继承以及调用占位符的时候，拼接选择器，拼接占位符的名，以及可以用于拼接属性 例：margin-top
  • 不能用于拼接变量&xx，混合宏的函数名 会报错

问题探讨

• 混合宏 VS 继承 VS 占位符 （优劣对比）

  混合宏： 如果你的代码中涉及到变量，建议使用混合宏来创建相同代码。
  
  继承： 不需要变量时，并且基类(父类)在HTML中被使用时用继承
  
  占位符： 基类(父类)不在HTML被使用时，用占位符。