sass安装使用 学习笔记

目录

Sass介绍

为什么使用Sass

Sass安装使用

文件监听

两种编译格式

---

Sass介绍

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

参考sass官网：Sass教程 Sass中文文档 | Sass中文网

为什么使用Sass

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用， 且不方便维护。Sass可以解决这个问题，举例说明：

$bg-color:#2233fd; //将颜色定义为变量，如果需要修改，直接修改变量值就可以了
body {
    background-color: $bg-color; //在此处引入变量
}

Sass安装使用

1.用npm全局安装sass

npm install - g sass

2.新建Sasstest项目文件夹 。文件夹中新建index.html和main.scss文件。此处注意sass文件的后缀名是scss

index.html

    
    
    
    
    



    
hello

mian.scss

$font-color: rgba(85, 186, 208, 0.7);
h1 {
    color: $font-color;
}

3.在终端输入下面命令，将sass文件编译成css文件

sass main.scss main.css

 此时在项目文件夹中会多出main.css文件和main.css.map文件。

map 就是一个信息文件，里面储存着位置信息。

编译成功的符合css格式的css文件，如下

 页面如下

文件监听

监听sass文件的变化，自动生成对应的css文件

1.单个文件监听

例如监听main.scss文件，自动生成与之对应的main.css文件

sass -- watch main.scss main.css

 2.多个文件监听，即监听某个文件夹下的全部sass文件

例如监听css文件夹中的全部sass文件(我写了两个 main.scss和test.scss)，使生成的css文件全部到style文件中

sass -- watch css:style

两种编译格式

default 编译排版格式和compressed 编译排版格式。不同的编译格式得到的代码其实是一样的，只是排版格式不同。compressed格式时 css 文件相对较小。

下面是main.scss文件，用此文件举例。

1.default 编译排版格式。此处注意文件路径。

sass css/main.scss:style/main.css

2.compressed 编译排版格式。此处注意文件路径。

sass css/main.scss:style/main.css  --style compressed