Sass(Scss)语言下载安装使用以及编译

 时间:2026-02-13 17:27:37

1、去Ruby(RubyInstaller)官网下载Ruby安装文件(版本随意)

下载之后,安装Ruby文件(安装路径最好是默认的)

(安装过程中注意勾选Add Ruby executables to your PATH添加到系统环境变量)

Sass(Scss)语言下载安装使用以及编译

2、然后通过安装后的Ruby安装sass(gem install sass)

再检查sass安装是否成功(sass -v)

出现sass版本号就是安装成功了

Sass(Scss)语言下载安装使用以及编译

Sass(Scss)语言下载安装使用以及编译

3、在使用sass之前先说明一下sass和scss区别

区别一个是后缀方式不一样(.sass/.scss);

另一个是语法方式不一样(sass书写方式比较严格,scss书写方式和css类似。所以对于已经熟练css书写方式的人,可以使用scss。sass和scss在语法上没有区别,所以sass和scss语法是通用的)

举个例子如下图(大概是这样的)

Sass(Scss)语言下载安装使用以及编译

4、运用sass/scss语言

使用HBuilder编辑器可以直接自动编译

打开HBuilder编辑器 —— 工具 —— 预编译器设置

Sass(Scss)语言下载安装使用以及编译

5、然后选择.sass,.scss,点击旁边的编辑,出现预编译器配置框

(把该填的填上,跟下方图片中填写参数一样也行)

最后确定就可以了,再运行HTML页面代码时,就会自动编译sass或scss代码

生成两个文件(sass.css和sass.css.map)

Sass(Scss)语言下载安装使用以及编译

6、手动编译(有些复杂)

需要打开Ruby命令,然后找到存放sass.scss文件夹的位置

输入命令sass sass.scss sass.css 回车

之后会生成两个文件(sass.css和sass.css.map)

建议选用自动编译方式,因为方便

Sass(Scss)语言下载安装使用以及编译

  • 如何利用VBA代码画猴子
  • 怎么玩区域链应用QunQun?
  • 测试网络流畅性方法
  • 网络建设应该注意什么?
  • Python编程:怎么设置tkinter按钮y轴内边距
  • 热门搜索
    雁鸣湖旅游度假村 韶山旅游景点 世界旅游胜地有哪些 旅游管理专业描述 婺源旅游网 杭州千岛湖旅游 福清旅游景点 旅游会展 江苏舜天海外旅游有限公司 鹤壁旅游景点大全