2020-11-16学习总结： sass配置

一、安装和使用

1.安装

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以使用。只是必须先安装Ruby，然后再安装SASS。

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

gem install sass

然后，就可以使用了。

2.使用

在文件的根目录下的控制台输入

sass test.scss test.css

可以把我们写的.scss文件转换为我们需要使用的.css文件。

二、基本用法

1. 变量

SASS允许使用变量，所有变量以$开头。

$blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

2. 嵌套

SASS允许选择器嵌套。比如，下面的CSS代码：

div h1 {
　　　　color : red;
　　}

可以写成：

div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

3.混合

使用@mixin命令，定义一个代码块。

@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

使用@include命令，调用这个mixin。

div {
　　　　@include left;
　　}

less基础配置和使用基本相同。

除了在控制台配置以外，还可以在koala里进行转换。
如下图：

1.点击加号选择目标路径文件夹
2.选择scss文件或sass文件,less文件，点击右下角comple按钮，提示成功即转换成功，站点文件夹显示.css文件。

由于本人水平有限，博客错误之处，烦请指正！