Sass安装

1.sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)

2.安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。如下图:

3.安装完成后需测试安装有没有成功,运行CMD输入以下命令:

4.如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。

gem update --system 

5.Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装SassCompass。要安装最新版本的SassCompass,你需要输入下面的命令:

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
//查看是否下载成功依旧是:
//sass -v
//compass -v

6.我们可以把以下代码放入vscode的setting.json中

"easysass.compileAfterSave": true,
"easysass.formats": [ //nested:嵌套缩进的 css 代码。
    //expanded:没有缩进的、扩展的css代码。
    //compact:简洁格式的 css 代码。
    //compressed:压缩后的 css 代码
    {
       "format": "expanded",
       "extension": ".css"
    },
    {
       "format": "compressed",
       "extension": ".min.css"
    }
],
//这个路径是编译后CSS的绝对路径
"easysass.targetDir": "G:/qianduanBJ/sass/css"

7.编译sass,如果是并列两个文件夹分别是sass和css,那么可以这样写:sass --watch sass:css

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
sass --watch app/sass:public/stylesheets

//编译格式
sass --watch input.scss:output.css --style compact

//编译添加调试map
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info

注意:      以上步骤只是通常情况下的安装和配置步骤,若您要了解更多,请到sass官网查看

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值