基础sass

2017-09-09 11:16:29来源:CSDN作者:u012841667人点击

分享

一、安装
参考:http://www.jianshu.com/p/5bfc9411f58f
参考:https://www.w3cschool.cn/sass/sass_installation.html
sass依赖于ruby,首先安装ruby,对于window电脑安装如下(mac自带有ruby):
1)官网下载相应的ruby安装包
2)安装过程中,除了记得勾选“add Ruby executables to your PATH”之外,其它都是一键点到底
3)安装完成之后可再次使用ruby -v检测是否安装成功

ruby安装包中集成了gem包管理工具,类似于nodejs下的npm,因此我们不需再下载gem,直接打开命令行来使用gem

gem改源:放在rubygem.org上的资源文件位于国外站点,由于某些原因,在国内访问可能会出现连接失败等问题,所以我们先把gem的连接源改到国内的一些镜像资源上

1)取消默认的绑定源
gem sources –remove https://rubygems.org/
2)绑定国内网站
gem sources -a http://gems.ruby-china.org/
3)gem sources -l查看current resources,以验证换源是否成功

sass的安装
1)gem install sass
2)sass -v 查看版本

gem的一些常用的命令
1)如果果断时间需要更新ruby程序的话,可以使用
gem update
2)安装特定版本的sass
gem install sass –version=版本号(例如3.3.0)
3)列出本地安装的所有ruby程序包
gem list
4)删除特定版本的sass
gem uninstall sass –version=版本号
5)删除本地安装的sass
gem uninstall sass

二、编译
sass有两种文件类型:第一种以xxx.sass结尾的文件,不使用花括号和分号;第二种以xxx.scss结尾的文件,和xxx.css文件一样使用花括号和分号。
编译test.scss生成test.css:sass test.scss test.css

–watch模式:sass监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本
sass –watch test.scss:test.css

–style取值有以下四种:
sass –style compact –watch test.scss:test.css
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台