Sass/Scss 学习笔记

一、介绍

---

CSS预处理器是一个CSS的增强语法，让我们可以在 CSS 中使用变量、循环、嵌套等功能, 可以让我们的代码变通性更强，可读性、层级关系更加明显
CSS预处理器种类繁多，目前三种主流的css预处理器是Sass（Scss）、Less及Stylus

Sass/Scss、Less、Stylus介绍

• Sass/Scss：
  2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架。
  目前受LESS影响，已经进化到了全面兼容CSS的SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）。

  1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

• Less：
  2009年出现，受SASS的影响较大，但又使用CSS的语法，相对于Sacc其优点是简单上手和兼容CSS
  其缺点是比起SASS来，他的编程功能不够，不好用。他反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。

• Stylus：
  2010年产生，来自Node.js社区。
  主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS
  
  

二、环境搭建

---

Windows

1.先从官网下载Ruby，安装过程中请注意勾选Add Ruby executables to your PATH添加到系统  官网
  https://rubyinstaller.org/downloads/
2.ruby -v 如安装成功会打印版本信息
3.gem update --system //该命令请翻墙一下  升级版本，建议 2.6.x 以上
   gem -v
4.安装sass  
   gem install sass
   gem install compass
   sass -v

Mac

1.系统自带Ruby环境
2.安装sass  
   gem install sass
   gem install compass
   sass -v

安装后将sass文件转换成css文件

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

Vue里的Sass 环境搭建

1.安装nodejs，拥有nodejs环境
2.创建vue项目
3.在项目中安装sass环境，需要两个依赖 sass-loader， sass-loader依赖于node-sass,
  npm install -D node-sass sass-loader
4.在style标签上加上一个属性：lang=”scss” 就可以了
   <style lang="scss">
     .app{
       .....
     }
   </style>

安装环境参考:

https://www.sass.hk/install/

三、Sass/Scss学习

---

一、嵌套写法

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

#main {