前言Sass是一个CSS预处理器，可以帮助我们减少CSS重复代码，节省开发时间。扩展CSS3，增加规则、变量、mixins、选择器、继承、内置函数等特性，生成格式良好的CSS代码，易于组织和维护。Sass文件的后缀是.Scss。一、Sass安装npm安装1.1我们可以使用npm来安装Sass，这是最常用的安装方式。首先查看npm是否已经下载。下面的命令可以检查npm是否已经下载。如果已下载，会出现版本号6.12.1npm-v1.2。我们一般使用淘宝npm镜像自定义的cnpm，命令行工具替换默认的npm：只需安装下面的命令，就会自动下载安装一个包。npminstall\-gcnpm\--registry\=https://registry.npm.taobao.org1.3然后我们就可以通过cnpm命令来使用这个包了，安装完成。cnpminstall-gsass2.如何使用sass2.1首先，你需要创建2个文件夹。可以随意命名文件夹，然后启动如下命令进行监控。sass--watchsass:css//（sass:css为文件夹名，可自行设置）2.2在.scss文件中写入内容，另一个css文件夹中会自动出现一个css文件。写代码的时候命令窗口不能关闭，导致无法执行css文档代码。2.3以下为.scss文件代码：$a:#fff;$b:#000;body{color:$a;背景：$b；宽度：500px；height:100px;}在.css文件中会出现如下代码：body{color:#fff;背景：#000；宽度：500px；height:100px;}/*#sourceMappingURL=a.css.map*/3.Sass变量3.1Sass变量使用$符号：变量用于存储一些信息，可以重复使用。Sass变量可以存储如下信息：stringnumbercolorvaluebooleanvaluelistnullvalue3.2下面的例子设置了四个变量：myFont、myColor、myFontSize和myWidth。一旦声明了变量，我们就可以在代码中使用它：$myFont:Helvetica,sans-serif;$我的颜色：红色；$我的字体大小：18px；$我的宽度：680px；正文{字体系列：$myFont；字体大小：$myFontSize；颜色：$我的颜色；}#container{宽度：$myWidth；}将上述代码转换为CSS代码，如下：body{font-family:Helvetica,sans-serif;字体大小：18px；红色;}#container{宽度：680px;}3.3Sass变量的作用域只能在当前层级有效。如下图，h1的样式是里面定义的绿色，p标签是红色。$我的颜色：红色；h1{$myColor:green;//仅在h1中有用，局部作用域color:$myColor;}p{颜色：$myColor;}将上述代码转换为CSS代码，如下：h1{color:green;}p{颜色：红色；}四。Sass嵌套规则和属性4.1Sass嵌套CSS选择器类似于HTML嵌套规则。让我们嵌套导航栏的样式如下：nav{ul{margin:0;填充：0；列表样式：无；}li{显示：内联块；}a{显示：块；填充：6px12px；文字装饰：无；}}例子中，ul、li、a选择器都嵌套在nav选择器中将上述代码转换为CSS代码，如下所示：navul{margin:0;填充：0；列表样式：无；}navli{display:inline-block;}nava{显示：块；填充：6px12px；文字装饰：无；}4.2Sass中有很多嵌套的属性。在Sass中，我们可以使用嵌套的属性来编写它们，这样会省去很多麻烦。下面sass代码如下：font:{family:Helvetica,sans-serif;尺寸：18px；权重：粗体；}文本：{对齐：居中；转换：小写；溢出：隐藏；}将上面的代码转换成CSS代码如下：font-family:Helvetica,sans-serif;字体大小：18px；字体粗细：粗体；文本对齐：居中；文本转换：小写；文本溢出：隐藏；总结：以上就是sass的基本介绍。Sass还有更深入复杂的方法。也可以去sass官网了解更多。作者：唐清丽日期：2020-1-6微信：lenat666
