Sass使用

1. 什么是Sass ???   Sass是一个将脚本解析成CSS的脚本语言，也可以称为CSS扩展语言。

2. 安装：

　　第一步：先安装Ruby (sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby mac下自带Ruby无需在安装Ruby!)

　　　　　　安装过程中请注意勾选Add Ruby executables to your PATH 添加到系统环境变量，安装完成后测试安装成功，ruby -v

　　第二步：安装Sass和Compass(Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件)

gem install sass
gem install compass
(如mac安装遇到权限问题需加 sudo gem install sass)

　　　　　安装完成后cmd中测试：sass -v 或者compass -v

3. sass常用命令：

1 gem update sass    　　     //更新sass
2 sass one.scss       　　　　//显示 one.scss 文件转化的css代码
3 sass one.scss  one.css    //将显示结果保存成.css文件 或者 sass one.scss:one.css

4. sass有四种编译风格选项:

1 nested：嵌套缩进的css代码，它是默认值。
2 expanded：没有缩进的、扩展的css代码。
3 compact：简洁格式的css代码。
4 compressed：压缩后的css代码。

　　生产环境中一般使用第四种compressed

sass --style compressed one.scss one.css

　　sass还可以监听某个文件或目录，一旦文件有变动会自动生成编译后的脚本css文件

 //监听某个文件
 　　sass --watch one.scss:one.css
 //监听某个目录
 　　sass --watch app/sass:public/stylesheets

5. 如何将sass引入页面中？

　　将scss文件编译后的css文件直接用link 引入即可

posted @ 2018-11-12 15:39  桑甚姑娘  阅读(176)  评论(0)  编辑  收藏  举报