ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码

sass sass的安装,编译,还有风格(1/3)

来源:网络整理     时间:2017-12-07     关键词:sass

本篇文章主要介绍了"sass sass的安装,编译,还有风格",主要涉及到sass方面的内容,对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下: 1.安装sass1.安装ruby因为sass是用ruby语言写的,所以需要安装ruby环境打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径[x] A...

1.安装sass

1.安装ruby

因为sass是用ruby语言写的,所以需要安装ruby环境

打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径

  • [x] Add Ruby executables to your PATH

安装完成之后继续下一步操作


2.安装sass

在cmd里通过gem安装sass

gem是ruby的包管理工具,类似于nodejs 的npm

gem install sass

这个时候如果不FQ的话是会出问题的,因为:

由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

安装好之后执行sass -v就可以看到sass的版本了

实在实在不行,就安装离线文件吧,但是失败率也很高

gem install ./.../sass-3.4.22.gem

2.编译sass文件的方式

1.命令行编译

可以通过cmd命令行执行sass方法来编译

例如:

sass scss/a.scss:css/a.css

sass 后面写要编译的sass文件的路径,‘:’后面写的是
要输出的目录及名字

  • 需要注意的是:必须有这个文件夹才能在里面生成css

这样的话写一句执行一次编译一次有些太麻烦

可以开启一个watch来监听文件变化来进行编译

sass --watch scss:css

--watch表示要监听 :前后的两个都是文件夹,表示scss文件夹的文件改变就编译到css文件夹


2.其他方式编译

除了命令行工具其实还可以用考拉、gulp等工具进行编译,但是ruby和sass是必须要安装的

考拉的方式就不多做介绍了,大家i自己去看一下

gulp的话呢是需要gulp-sass的模块来编译,使用方式类似于gulp-less

这里是网址,点击查看

3.sass四种风格

sass编译的格式

sass编译输出的css有四种格式

sass相关图片

sass相关文章