Sass.vs.Less | 简介

了解 SASS

                 目前市场上三大 css 预编译语言之一

                    1. SASS

                    2. LESS

                    3. Stylus

            什么是 CSS 预编译语言

                  可以以语言的形式书写 css 样式

                  但不能直接在浏览器运行, 需要编译成 css 文件以后运行

                  需要一个 做 SASS 的工具, 安装在你的电脑上可以把 sass 书写的代码编译成 .css 文件

      把你写的 .sass 文件转换成 .css 文件去浏览器运行

sass 工具的安装

1. 依赖什么环境

                  很早之前, 依赖 rube 环境

                  中间, 依赖 python 环境

                  之后也可以 依赖 node 环境也能使用

2. 如何安装

                  因为 SASS 是一个依赖于 node 环境的前端工具

                  我们就可以使用 npm 安装

                  因为是要 安装在我的电脑上的, 一次安装多次使用

                  使用 npm 安装全局包

                  输入指令 $ npm install --global sass

                    MAC 指令 $ sudo npm install --global sass

 3. 检测安装

                  打开命令行, 目录无所谓

                  输入指令 $ sass --version

工具的使用

了解 sass 的文件形式

                1. .sass 后缀的文件

                2. .scss 后缀的文件

                区别:

                  1. 语法上没有区别

                  2. .sass 没有大括号的分号, 全部依靠缩进保持关系

                  3. .scss 文件就是你怎么写 css 就怎么写

编译成 css 文件

  1. 单文件编译

                  打开命令行，切换到你要编译的目录

                  输入指令 $ sass 文件 编译成哪一个文件

                  缺点: 每次修改源文件都需要重新编译

 2. 单文件实时编译

                  打开命令行

                  切换到你要编译的目录

                  输入指令 $ sass --watch 要编译的文件:编译成的文件

                  缺点: 只能同时监控一个 scss 文件

 3. 文件夹实时编译

                  能帮我们监控整个文件夹的变化

                    只要你监控的文件夹里面有任何一个 scss 或者 sass 文件发生变化

                    就会自动帮你进行编译

                  打开命令行

                  切换到你要监控的文件夹的目录

                  输入指令 $ sass --watch 要监控的文件夹:生成的文件存放的文件夹

map 文件的作用

                按照这个形式进行开发, 我要修改样式

                  修改哪一个文件 ? sass 文件

                  不能去修改 css 文件, 一旦修改 css 文件, 下次编译的时候, 就会被覆盖了

                  html 里面引入的是 css 文件

                  当我查看样式的时候, 映射到哪一个文件对应的行

              作用:

                  帮你把原本要映射在 css 文件的行数

                  直接映射在 sass 文件里面

                  前提: css 文件里面的映射源注释不要删除