记录一篇 如何使用sass快捷开发css

首先呢，说一说什么是sass
Sass (英文全称：Syntactically Awesome Stylesheets）
Sass 是一个 CSS 预处理器。是 CSS的 扩展语言
优点
1、减少 CSS 重复的代码
2、节省开发时间
3、完全兼容所有版本的 CSS
4、有规则、变量、混入、选择器、继承、内置函数等等特性
5、Sass 会生成良好格式化的 CSS 代码， 易于组织和维护

安装sass

执行npm的安装操作

npm install -g sass //采用全局安装的方式

当安装完，打开我们的终端执行如下代码，检验我们是否安装成功

C:\Users\Administrator>sass --version
1.26.5 compiled with dart2js 2.7.2

输入 sass --version
返回 1.26.5 compiled with dart2js 2.7.2
返回的是版本号，代表我们安装成功了

使用sass

sass安装成功了，我们就要使用sass，去找一找，到底是如何帮助我们提高开发效率的。
先给大家看一个小demo的实现过程，方便大家对后续的学习有一定知识上的认可。
(demo中会有初级讲解)
sass文件以.scss结尾 example ===> index.scss

$color1:#000; //变量的命名与赋值（变量名以$开始） key：value
$color2:#f00;
$num:2;
div{
   
    width: 100px;
    height: 100px;
    margin: 50px+100px; //sass中可以执行一些计算
    padding:(20px/$num);
}
div.box1{
   
    background:$color1;//调用变量值
}
div.box2{
   
    background:$color2;
}

之前有说sass文件不会被浏览器直接识别，依旧会被便以为css文件，浏览器才会识别
sass的编译有两种方式
方式一：不保留原文件

sass index.scss // 执行完之后 index.scss文件就没了，会出现一个新的css文件

方式二：保留原文件

sass index.scss index.css // 执行完之后 index.scss会保留下来，并且会出现一个名为index.css的css文件

实际开发的时候看项目需要
诸如 react /vue 脚手架 都可以写sass，借助sass-loader，并且会自动帮我们编译。
编译好之后会生成两个文件，分别是 index.css 和 index.css.map
index.css 浏览器可以识别并且渲染出来的

div {
   
  width: 100px;
  height: 100px;
  margin:150px;
  padding:10px;
}

div.box1 {
   
  background: #000;
}

div.box2 {
   
  background: #f00;
}

/*# sourceMappingURL=index.css.map */

index.css.map 详细说明文件的信息

{
   
    "version": 3,
    "sourceRoot": "",
    "sources": [</