强大优雅的sass层叠样式--看完马上能用

原文转载：https://muitlog.com/2019/12/31/2019123102.html

为什么很多前端都说很讨厌写css，因为它属性样式多，繁琐易出错，技术含量不高，写起来费时间等...我想这是造成前端不喜欢写样式的原因，那有没有解决这个问题的方法呢，毕竟样式还是要写的，于是就有了一个叫sass的层叠样式语言。sass的运行原理是用过ruby环境，在本地服务器编译，返回一个 .css的文件。

sass是css的扩展语言，保留了css的特征，弥补了css的缺陷，css更加强大，优雅，多功能，在使用sass过程时，你可以嵌套，引用，定义变量，加入参数等等，下面就来介绍sass的安装和用法，看完你马上就能用，从此不再被css拖累。

安装：

1. 因为sass基础ruby语言开发，所以首先确认电脑有有没有安装了ruby，如果还没有，可以点击ruby下载安装。

2. 下载安装好之后，需要查看有没有安装成功，需要打开CMD输入以下命令：

ruby -v //如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

3. Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件，所以我们要gem源,用以下命令来查看gem源。

gem sources -l

4. 如果发现没有任何东西，需要安装gem源:

gem sources -a http://rubygems.org/

5. 查看是否添加成功：

gem sources -l   *** CURRENT SOURCES *** http://rubygems.org/

6. 然后就可以安装sass系统了。

gem install sass gem install compass//sass可以结合compass使用。

安装成功后就可以使用了:

1.在D:盘中创建项目文件untitled2， 再创建sass文件夹 创建 test.scss 文件 。

2.启动rubyCMD，找到存放 test.scss 文件夹的位置 ，输入命令：（进入到sass文件夹内）。

一下代码把test.scss文件转换为css格式的文件，文件夹内生成如下图两个文件