sass结合compass使用(图文)
来源:互联网 发布:淘宝的台式机能用多久 编辑:程序博客网 时间:2024/06/05 09:26
Sass依赖Ruby,所以,首先得先安装个Ruby
Sass的安装步骤:
1.安装Ruby的时候,勾上 Add Ruby executables to your PATH 选项(添加环境变量)
2.安装好了Ruby之后,在开始菜单中找到Ruby,打开“Start Command Prompt With Ruby”
命令行中输入 gem install sass ,回车确认之后,等待一段时间。
由于墙的原因,国内基本都是安装失败,继续3,如果安装成功,直接跳到4
3.安装失败,采取下面的办法(淘宝镜像)
命令行依次输入
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org
gem sources -l
确保只有 ruby.taobao.org,接着输入
gem install sass
等待一段时间,安装成功。
ps:可以用sass -v 查看sass是否安装成功
4.安装compass
命令行输入
gem install compass
等待一段时间,安装成功。
ps:可以用compass -v 查看compass是否安装成功
5.使用sass
项目sass目录中创建两个文件
base.scss和config.rb
config.rb配置如下:
<span style="white-space:pre"></span># 引入compass<span style="white-space:pre"></span>require 'compass/import-once/activate'<span style="white-space:pre"></span># 配置路径<span style="white-space:pre"></span>http_path = '/'<span style="white-space:pre"></span>css_dir = '../styles'<span style="white-space:pre"></span>sass_dir = '../sass'<span style="white-space:pre"></span>sourcemap = true<span style="white-space:pre"></span>cache = false
ps:配置信息注意路径
6.使用compass
在当前目录下(sass目录),Shift + 鼠标右键,选择 "在此处打开命令窗口(W)"
输入compass watch
在项目styles目录中自动创建了两个文件 base.css 和 base.css.map
当你修改 base.scss文件并保存的时候,base.css文件也相应地改变了
以上,OVER
更多关于sass的信息请参考SASS
PS:csdn吃了好多图片,就辛苦下看看文字吧。
- sass结合compass使用(图文)
- sass / compass 使用笔记
- 使用compass编辑sass
- Sass&Compass安装和使用
- sass & compass总结(一)
- Sass compass
- sass + compass
- PHPStrom使用SASS,SCSS和Compass
- 在实战中使用Sass和Compass
- SASS基本语法及搭建并结合COMPASS高效工作
- 【Sass中级】使用Sass和Compass制作雪碧图
- Sass和Compass学习笔记(1)
- 大讲台浅谈sass与compass特性及使用
- Sass Compass compile command
- sass-compass 安装
- 安装Sass和Compass
- CSS之Sass Compass
- sass and compass
- Web Service的一些接口
- 建造者模式
- 苏州增值电话业务 供应吸费手机 年赚百万
- eclipse 与tomcat的配置注意两点
- 非线性隔振器2
- sass结合compass使用(图文)
- 自定义 Android 对话框 (AlertDialog) 的样式
- [CS@Nets][编译原理]一个栈式计算机的加法语言编译器
- 南京揭秘响一声电话吸费 声讯电话平台
- 15年省赛和东北区域赛总结
- Unix类ls的小程序
- R软件学习笔记—Legend
- CentOS 编译安装 PyCrypto
- 威海高收费电话加盟 2014好项目 电话群呼器