主要参考 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自然是配置文件

ok,当文件改变时 我们希望能及时自动编译，所以在项目文件中监视sass的change

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部署的更多相关文章

  1. SASS学习笔记1 —— 安装、编译和调试

    一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...

  2. java学习——平台的安装与部署

    Java 平台安装与部署 jre,jdk安装与部署 1)jre,jdk安装过程(略) 2)部署过程 新建(JAVA_HOME) 变量名:JAVA_HOME 变量值:E:\Program Files ( ...

  3. sass学习笔记 -- sass的四种编译方法

    sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...

  4. Nodejs学习之一 下载安装与部署nodejs

    1,下载nodejs 访问nodejs官网 www.nodejs.org/download/   下载与机器相匹配的版本   2,安装nodejs 下载下来的msi包一直点击下一步即可   3,部署环 ...

  5. kubernetes学习一：安装及部署第一个Web应用

    准备工作 首先准备Kubernets的环境,使用的是centos7.5 关闭防火墙: # systemctl disable firewalld # systemctl stop firewalld ...

  6. Mac安装compass失败的原因

    之前一直用的windows电脑,突然间切换成mac,各种不习惯,刚开始的时候连文件夹都找不到,悲催…… 还好,熟悉了两天之后,基本上也能够操作了. 然后就是安装各种开发软件,由于个人习惯了使用sass ...

  7. Sass学习之路：Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  8. ubuntu安装ruby，安装sass，安装compass

    安装ruby apt-get install ruby. 默认会安装1.9的. 不是自己想要的. 可以进行下面的处理. # sudo apt-get install python-software-p ...

  9. Sass学习之路(2)——Sass环境安装（windows版）

    因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳＿┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...

随机推荐

  1. 零样本学习 - （Zero shot learning，ZSL）

    https://zhuanlan.zhihu.com/p/41846072 https://zhuanlan.zhihu.com/p/38418698 https://zhuanlan.zhihu.c ...

  2. ubuntu系统安装nginx出现的错误(依赖环境没有安装完)

    报错信息: error: the HTTP image filter module requires the GD library. 编译参数:(或源安装) ./configure --prefix= ...

  3. Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

    Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...

  4. 图解PCIE原理（从软件角度）

    1  PCIE基本概念 1.1   PCIE拓扑架构图 1.2 PCIE Switch内部结构图 1.3  PCIE协议结构图 2 PCIE枚举原理 2.1 Type0&Type1配置头空间 ...

  5. zookeeper综述

    zk概念 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.他主要用来解决分布式应用中的数据管理的一 ...

  6. JSON的String字符串与Java的List列表对象的相互转换

    1.JSON的String字符串与Java的List列表对象的相互转换 在前端: 1.如果json是List对象转换的,可以直接遍历json,读取数据. 2.如果是需要把前端的List对象转换为jso ...

  7. 使用tar+lz4/pigz+ssh更快的数据传输

    使用tar+lz4/pigz+ssh更快的数据传输 -- | :41分类:Linux,MySQL | 前面一篇介绍了如何最大限度的榨取SCP的传输速度,有了这个基础,就可以进一步的使用压缩来加速传输速 ...

  8. html-loldemo

    百度版lol百科小样 <!DOCTYPE html> <html lang="en"> <head> <title>英雄联盟百科&l ...

  9. IE下使用jquery失效的问题（转载）

    1,然后各种调试,最后发现:把ie把关了,再打开$.get().会调用,再第二次调用的用的时候发现又不行了.于是我推断是ie缓存的问题,把ie缓存清除后,果然可以了.但是客户不可能知道清理缓存.所以只 ...

  10. 成功抓取csdn阅读量过万博文

    http://images.cnblogs.com/cnblogs_com/elesos/1120632/o_111.png var commentscount = 1; 嵌套的评论算一条,这个可能有 ...