sass学习之一：sass安装compass部署
主要参考 http://www.jianshu.com/p/5bfc9411f58f
--------------------------------------------
sass基于ruby 需ruby解释器
1. 安装ruby
下载地址 https://rubyinstaller.org/downloads/
选一个合适的版本下载并安装即可。安装中勾选第二项：
检测是否安装成功
ruby -v
2.sass安装及使用
利用ruby的gem命令
ruby安装好后，打开开始菜单 ，有 start Command Prompt width Ruby,打开 此命令面板，运行命令
gem install sass
运行 sass -v ，查看是否安装成功
ok， sass就安装完成
3. compass的安装及使用
浏览器只认识css文件，sass需要编译成.css文件才能被浏览器使用，有koala可视化工具或gulp等自动化工具配置编译.茴香豆的一百种写法只先研究一种好了。
gem install compass
运行 compass -v ，查看是否安装成功。
然后是怎样使用 compass？
到自己的工作目录下面，如d盘workspace下手动创建一个Sass-test文件夹，然后进入此目录（我用gitbash工具）
cd Sass-test //进入到 Sass-test 目录
compass create learn-compass //创建一个compass项目，learn为项目名称
会看到有
sass是源文件 stylesheets是编译后的css文件；config.rb自然是配置文件
cd learn-compass //进入到项目文件中
compass watch //监视compass的change
---至此 准备工作完成 做个小小demo-------------------------
1. 在learn-compass/sass文件夹中添加一个test.scss
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
点击保存，可看到命令命令面板内容有变化
在stylesheets目录下课看到编译后的test.css
2.在创建一个html，引入css文件
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheets/test.css">
</head> <body>
<nav>home</nav>
</body>
</html>
浏览器运行可看到效果
sass学习之一：sass安装compass部署的更多相关文章
- SASS学习笔记1 —— 安装、编译和调试
一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...
- java学习——平台的安装与部署
Java 平台安装与部署 jre,jdk安装与部署 1)jre,jdk安装过程(略) 2)部署过程 新建(JAVA_HOME) 变量名:JAVA_HOME 变量值:E:\Program Files ( ...
- sass学习笔记 -- sass的四种编译方法
sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...
- Nodejs学习之一 下载安装与部署nodejs
1,下载nodejs 访问nodejs官网 www.nodejs.org/download/ 下载与机器相匹配的版本 2,安装nodejs 下载下来的msi包一直点击下一步即可 3,部署环 ...
- kubernetes学习一：安装及部署第一个Web应用
准备工作 首先准备Kubernets的环境,使用的是centos7.5 关闭防火墙: # systemctl disable firewalld # systemctl stop firewalld ...
- Mac安装compass失败的原因
之前一直用的windows电脑,突然间切换成mac,各种不习惯,刚开始的时候连文件夹都找不到,悲催…… 还好,熟悉了两天之后,基本上也能够操作了. 然后就是安装各种开发软件,由于个人习惯了使用sass ...
- Sass学习之路：Sass、Compass安装与命令行
导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...
- ubuntu安装ruby，安装sass，安装compass
安装ruby apt-get install ruby. 默认会安装1.9的. 不是自己想要的. 可以进行下面的处理. # sudo apt-get install python-software-p ...
- Sass学习之路(2)——Sass环境安装（windows版）
因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳＿┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...
随机推荐
- C#指南，重温基础，展望远方！（4）表达式
表达式是在操作数和运算符的基础之上构造而成. 表达式的运算符指明了向操作数应用的运算. 运算符的示例包括 +.-.*./ 和 new. 操作数的示例包括文本.字段.局部变量和表达式. 如果表达式包含多 ...
- 解决chrome和firefox flash不透明的方法
透明flash在IE内核的浏览器下正常.在chrome和火狐下不透明了. 解决方法: <object height="377" width="712" c ...
- swipeRefreshLayout与webview滑动冲突
遇到这么个bug,webview使用swipeRefreshLayout时,下拉时事件不会被webview捕获,而是执行swipeRefreshLayout的刷新,网上一大堆一大堆的解决办法,都是什么 ...
- Atitit.ati str 字符串增强api
Atitit.ati str 字符串增强api 1. java StringUtils方法全览 分类: Java2011-11-30 17:22 8194人阅读 评论(2) 收藏 举报 javas ...
- error: Semantic Issue: Interface type cannot be statically allocated
转自:http://hongmin118.iteye.com/blog/1333524 error: Semantic Issue: Interface type cannot be statical ...
- hdu 3304 Interesting Yang Yui Triangle
hdu 3304 Interesting Yang Yui Triangle 题意: 给出P,N,问第N行的斐波那契数模P不等于0的有多少个? 限制: P < 1000,N <= 10^9 ...
- List 通过 Collections.binarySearch 进行记录筛选
1. Collections.sort(list, new Comparator<TreeDto>() { @Override public int compare(TreeDto a2, ...
- jquery为动态添加元素绑定点击事件
on()方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素) $("#mainbody").on("click",".link&qu ...
- SPI—读写串行 FLASH
SPI协议简介SPI 协议是由摩托罗拉公司提出的通讯协议(Serial Peripheral Interface),即串行外围设备接口,是一种高速全双工的通信总线.它被广泛地使用在 ADC. LCD ...
- 怎样用Google APIs和Google的应用系统进行集成(5)----怎样把Google Tasks的JSON Schema转换成XML的Schema(XSD)？
前面说了一些Google API的介绍,可是在实际的开发其中,我们可能须要把Google RESTful API返回的JSON数据转换成XML数据输入到第三方系统,这在企业应用集成里面很的常见. 那么 ...