【sass】安装及入门教程_安装sasssass": "1.26.8

一、基本介绍

sass是世界上最好的css扩展语言。在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数（如颜色加深，颜色淡化）用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。

• css编写时权重难以控制，嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。

• sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。

• html 结构

<div id="wrap">
    <div class="content">
        <div class="article">
            <p>
                <span>文字</span>
            </p>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9

• 使用css编写样式：

#wrap .content{

}
#wrap .content .article{

}
#wrap .content .article p{

}
#wrap .content .article p span{

}
1
2
3
4
5
6
7
8
9
10
11
12

• 使用sass编写样式：

#wrap{

    .content{

        .article{

            p{

                span{

                } 
            }
        }
    } 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二、安装教程

sass 基础语法教程链接：https://blog.csdn.net/qq_45677671/article/details/114579594

• 以前的 sass 需要依赖一个 ruby 的环境
• 现在的 sass 需要依赖一个 python 的环境
• 但是我们的 node 强大了以后，我们只需要依赖 node 环境也可以
• 需要我们使用 npm 安装一个全局的 sass 环境就可以了
• 安装全局 sass 环境：npm install sass -g
• 检查是否安装成功：sass --version

三、编译教程

• 有了全局的 sass 环境以后，我们就可以对 sass 的文件进行编译了
• sass 的文件后缀有两种，一种是 .sass 一种是 .scss
• 他们两个的区别就是有没有 {} 和 ;
• .scss文件

h1 {
    width: 100px;
    height: 200px;
}
1
2
3
4

• .sass 文件

h1 
	width: 100px
	height: 200px
1
2
3

3.1、单次编译

• 我们比较常用的还是 .scss 文件，因为 .sass 我们写不习惯，当然，如果你能写习惯也比较好用
• 我们先不管里面的的什么内容，至少这个 .scss 或者 .sass 文件浏览器就不认识
• 我们就要用指令把 这两种 文件变成 css 文件
• 编译命令：sass 被编译的文件 编译后的文件名
• 例如：sass index.scss index.css
• 这样我们就能得到一个 css 文件，在页面里面也是引入一个 css 文件就可以了

3.2、实时编译

• 上面的编译方式只能编译一次
• 当你修改了文件以后要从新执行一遍指令才可以
• 实时编译就是随着你文件的修改，自动从新编译成 css 文件
• 监视文件变化的命令：sass --watch 被编译的文件:编译后的文件
• 例如：sass --watch index.scss:index.css
• 然后你只要修改 index.scss 文件的内容，index.css 文件中的内容会自动更新

3.3、实时监控目录

• 之前的实时监控只能监控一个文件
• 但是我们有可能要写很多的文件
• 所以我们要准备 2 个文件夹，一个放 sass 文件 ，一个放 sass 编译后的 css 文件。文件夹名称就叫 sass 和 css
• 监视文件夹变化的命令：sass --watch 被编译的文件所在文件夹:编译后文件所在文件夹
• 例如：sass --watch sass:css
• 这样，只要你修改 sass 文件夹下的内容，就会实时的相应在 css 文件夹中
• 你新添加一个文件也会实时响应
• 但是你删除一个文件，css 文件夹中不会自动删除，需要我们自己手动删除