1. 安装:

Sass和Compass都是基于Ruby编程语言的命令行工具。要使用它们,你首先需要在电脑中安Ruby,并对电脑的命令行操作有一个基本的理解。Sass和Compass可以安装在Windows、Mac OS和Linux系统中。

在Windows中安装Ruby:在命令行窗口中输入ruby -v并按下回车键。如果电脑中没有安装Ruby,命令行将显示' is not recognized as an internal or external command, operable program or batch file。如果电脑中已经安装了Ruby,那么将打印出已经安装好的Ruby版本号。你安装的Ruby版本应该不低于1.8.7(如果你安装的Ruby版本为1.8.6或者更低,请按照下面的指示重新安装Ruby。进入网址http://rubyinstaller.org/downloads/,下载最新版本的Ruby安装程序并运行。根据安装程序的提示按照步骤进行安装。第三个窗口将询问你将Ruby安装在什么位置,在点击安装之前选中两个复选框。现在,重新启动你的命令行窗口,然后输入ruby -v并按下回车键来确认Ruby已经安装完成。

在Windows系统中安装Sass和Compass:Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来轻松地安装Sass和Compass。要安装最新版本的Sass和Compass,你需要输入下面的命令:

$ gem install sass

$ gem install compass
在每一个安装过程中,你都会看到如下输出:
Successfully installed sass-3.1.0
1 gem installed
Installing ri documentation for sass-3.1.0...
Installing RDoc documentation for sass-3.1.0...
安装完成之后,你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中:
$ sass -v
Sass 3.1.0 (XXX NAME ME)
$ compass -v
Compass 0.11.0
Copyright (c) 2008-2011 Chris Eppstein
Released under the MIT License.

2. 编译Sass: 命令行编译及编译格式

#单文件转换命令 sass style.scss style.css #单文件监听命令 sass --watch style.scss:style.css #文件夹监听命令 sass --watch sassFileDirectory:cssFileDirectory。

Sass编译四中格式:

  1. nested(嵌套)
  2. compact(紧凑)
  3. expanded(扩展)
  4. compressed(压缩)

实例,紧凑合适输出:sass --watch sass-lzf:css --style compact。

3. 开始使用Compass:要在一个新项目中使用Compass,打开你的终端窗口并运行下面的命令:$ compass create my-project。

4. 编译Compass:按须编译 compass compile [项目路径] 监听编译 compass watch [项目路径] 如不写后面的项目路径,则会监听整个项目文件的变化,进行实时编译 停止监听文件变化:Ctrl + C

  例:  compass watch --output-style compact

转载于:https://www.cnblogs.com/l000/p/8507437.html

关于Sass与Compass的一些笔记相关推荐

  1. 【Sass】+【Compass】学习笔记

    这两天一直在学习sass和compass,看完了一些教程后决定做一些实践操作,权当笔记记录一下. COMPASS:compass-style.org 安装compass:gem install com ...

  2. opensuse13.2安装 sass和compass

    首先要先安装ruby 和 gem 如果使用sudo zypper install ruby 安装后 当安装sass时会报错 /System/Library/Frameworks/Ruby.framew ...

  3. rub、sass和compass的安装

    长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境 ...

  4. compass reset和layout [Sass和compass学习笔记]

    reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset ...

  5. sass和compass基础用法

    一.基本命令 sass都是通过gem安装,以下是一些基础的命令 移除ruby的镜像地址 gem sources --remove https://rubygems.org/添加淘宝的镜像 gem so ...

  6. Sass与Compass——回顾

    compass 是sass的一个工具库 compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能, 安装: compass是用 ruby语言开发的,所以安装它之前必须安装 ...

  7. 【Sass中级】使用Sass和Compass制作雪碧图

    "Image Spriting"的工作原理是一堆的图像(称为"sprites",精灵)合并成一张大的图像(国内称为雪碧图),以达到减少HTTP的请求数.然后通过 ...

  8. sass玩转颜色总结笔记

    变量: $color:#f00; 1.变浅和加深颜色,sass使用HSL标准来变浅或加深颜色 lighten($color,10%); darken($color,30%);      2.颜色互补 ...

  9. SASS+Compass基本使用,结合JavaScript实现随机点名小系统

    SASS+Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over,效果请看(5),代码解释请看源码. (1) ...

最新文章

  1. web.config配置
  2. 二维数组存放多个字符串_二维数组中输出多个最值及其下标。(仅供参考)
  3. 设计模式---接口隔离模式之门面模式(Façade)
  4. python类的空间问题及类之间的关系
  5. ajax和rxjs,javascript – RxJS 5 Observable和Angular2 http:调用ajax一次,保存结果,随后的ajax调用使用缓存结果...
  6. 自动化数据增强:实践、理论和新方向
  7. 分布式系统原理_终于有架构大牛把分布式系统概念讲明白了,竟然用了足足800页...
  8. android之隐藏状态栏、图标、布局
  9. php openoffice,php实现openoffice转pdf的方法
  10. Unity Opencv摄像头实时美颜(二)
  11. 小米笔记本 java_分享下我的小米笔记本pro安装黑苹果(Mojavae)的经历
  12. Android混淆篇 ijkplayer混淆
  13. 联想服务器管理系统,联想服务器的系统监控软件easyManage
  14. C. Minimum Ties (构造)
  15. ESP8266学习笔记(3)——GPIO接口使用
  16. Windows触控手势
  17. 《第六堂棒球课》:MLB棒球创造营·棒球名人堂
  18. RFC1661中文 ppp协议
  19. c free()函数了解
  20. python6翻了_Python-6.BeautifulSoup网络爬虫

热门文章

  1. 【报告分享】中国移动游戏市场年度综合分析2021-易观智库(附下载)
  2. 计算机网络课程实训致谢,计算机毕业实习报告:毕业实习报告致谢语怎么写
  3. 计算机应用基础试题300,《计算机应用基础》考试试题(300道附答案)
  4. 【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
  5. 基于STM32的温度控制系统仿真
  6. socks 编程中的 strncpy_s 坑
  7. Oracle VM VirtualBox安装Win10系统
  8. 编程新技术实务实验三:Android手机拨号器开发
  9. 墨迹天气-模仿主页面ui
  10. 安装软件显示服务器地址,怎样查看安装软件访问的服务器地址