sass安装及基本语法

一.安装

①先下载安装Ruby
安装注意勾选Add Ruby executables to your PATH添加到系统环境变量
②运行cmd命令:

ruby -v
	//如安装成功会打印
	ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

③因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源

gem update --system //该命令请翻墙一下
gem -v
3.0.3

/删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//打印是否替换成功
gem sources -l
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com

④//sass安装如下

gem install sass

//安装完成之后
sass -v  查看版本

二.概念/功能

1.Sass是css预处理器，
扩展了css3，增加了规则、变量、混入、选择器、继承、内置函数等。
提供控制指令、自定义输出格式、易于组织和维护。

2.Sass与Scss的区别
sass后缀名为sass，是sass的老式语法，不使用大括号和分号进行缩进；
scss后缀名为scss,使用大括号和分号进行缩进，是sass的新式语法。
建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

3.Sass/Scss和纯Css对比
Css没有语句，无法编程，只是单纯的描述。

三.基本语法

1.sass中定义变量用$ ，例如：$width: 5rem;
直接使用即调用变量：

#main {
  width: $width;
}

2.变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}

编译为

#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

3.注释
/* */ 多行注释
// 单行注释
注：多行注释会被输出到编译后的css文件，单行注释不会。

四.编译命令：

1.将scss文件编译为css文件：
sass input.scss output.css
2.监听scss单个文件：
sass --watch input.scss:output.css
3.监听scss文件夹：
sass --watch scss:dist/css