首页 > 软件开发 > HTML >

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

来源:互联网 2023-03-16 19:13:39 352

Sass是Ruby语言写的,但是两者的语法没有关系。不了解Ruby的没有关系,我们可以正常使用Sass。只是必须先安装Ruby,然后再安装Sass即可使用。0eh办公区 - 实用经验教程分享!

(因为网上很多人都写过Sass安装方式,在这里简单介绍不再详细说明了)0eh办公区 - 实用经验教程分享!

Sass(Scss)语言下载安装使用以及编译0eh办公区 - 实用经验教程分享!

工具/原料

  • Ruby
  • sass(scss)
  • HBuilder

方法/步骤

  • 1

    去Ruby(RubyInstaller)官网下载Ruby安装文件(版本随意)0eh办公区 - 实用经验教程分享!

    下载之后,安装Ruby文件(安装路径最好是默认的)0eh办公区 - 实用经验教程分享!

    (安装过程中注意勾选Add Ruby executables to your PATH添加到系统环境变量)0eh办公区 - 实用经验教程分享!

    Sass(Scss)语言下载安装使用以及编译0eh办公区 - 实用经验教程分享!

  • 2

    然后通过安装后的Ruby安装sass(gem install sass)0eh办公区 - 实用经验教程分享!

    再检查sass安装是否成功(sass -v)0eh办公区 - 实用经验教程分享!

    出现sass版本号就是安装成功了0eh办公区 - 实用经验教程分享!

    Sass(Scss)语言下载安装使用以及编译0eh办公区 - 实用经验教程分享!

    Sass(Scss)语言下载安装使用以及编译0eh办公区 - 实用经验教程分享!

  • 3

    在使用sass之前先说明一下sass和scss区别0eh办公区 - 实用经验教程分享!

    区别一个是后缀方式不一样(.sass/.scss);0eh办公区 - 实用经验教程分享!

    另一个是语法方式不一样(sass书写方式比较严格,scss书写方式和css类似。所以对于已经熟练css书写方式的人,可以使用scss。sass和scss在语法上没有区别,所以sass和scss语法是通用的)0eh办公区 - 实用经验教程分享!

    举个例子如下图(大概是这样的)0eh办公区 - 实用经验教程分享!

    Sass(Scss)语言下载安装使用以及编译0eh办公区 - 实用经验教程分享!

  • 4

    运用sass/scss语言0eh办公区 - 实用经验教程分享!

    使用HBuilder编辑器可以直接自动编译0eh办公区 - 实用经验教程分享!

    打开HBuilder编辑器 —— 工具 —— 预编译器设置0eh办公区 - 实用经验教程分享!

    Sass(Scss)语言下载安装使用以及编译0eh办公区 - 实用经验教程分享!

  • 4相关内容非法爬取自百度经验
  • 5

    然后选择.sass,.scss,点击旁边的编辑,出现预编译器配置框0eh办公区 - 实用经验教程分享!

    (把该填的填上,跟下方图片中填写参数一样也行)0eh办公区 - 实用经验教程分享!

    最后确定就可以了,再运行HTML页面代码时,就会自动编译sass或scss代码0eh办公区 - 实用经验教程分享!

    生成两个文件(sass.css和sass.css.map)0eh办公区 - 实用经验教程分享!

    Sass(Scss)语言下载安装使用以及编译0eh办公区 - 实用经验教程分享!

  • 6

    手动编译(有些复杂)0eh办公区 - 实用经验教程分享!

    需要打开Ruby命令,然后找到存放sass.scss文件夹的位置0eh办公区 - 实用经验教程分享!

    输入命令sass sass.scss sass.css 回车0eh办公区 - 实用经验教程分享!

    之后会生成两个文件(sass.css和sass.css.map)0eh办公区 - 实用经验教程分享!

    建议选用自动编译方式,因为方便0eh办公区 - 实用经验教程分享!

    Sass(Scss)语言下载安装使用以及编译0eh办公区 - 实用经验教程分享!

  • 注意事项

    • 更新sass(gem update sass)
    • 卸载sass(gem uninstall sass)
    • 个人经验,如有不明白的地方可以提出疑问

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!0eh办公区 - 实用经验教程分享!


    标签: 编程语言HTMLCSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码