邂逅Sass和Compass之Compass篇

本文主要讲解Compass的内容,众所周知Compass是Sass的工具库,如果对Sass不甚了解的同学可以移步 邂逅Sass和Compass之Sass篇 Sass本身只是一个“CSS预处理器”,Compass在它的基础上,封装了一系列的模块和模板,补充了Sass的功能。

1.Compass的安装

和Sass一样,Compass也是用Ruby语言开发的,所以在安装Sass之前必须先安装Ruby,安装Ruby的过程就不再赘述,安装好Ruby后可以直接在命令行输入下面的命令

sudo gem install compass

windows在cmd中输入,但是需要省略前面的sudo。

正常情况下,Compass(连同Sass)就安装好了。

2.Compass初始化一个项目

接下来,要创建一个属于我们自己的Compass项目,假定它的名字叫做learn-compass-init,那么在命令行输入

compass create learn-compass-init

在当前的目录下就会生成一个learn-compass-init子目录(提示:windows玩家可以在需要创建的文件中按住shift+鼠标右键选择在此处打开命令行窗口)。

进入刚刚创建的子目录

cd learn-compass-init

你会看到如下结构,其中config.rb文件,是项目的配置文件。还有两个子目录sass和stylesheets,前者存放我们需要编写的Sass源文件,后者存放编译后的css文件

3.Compass编译一个项目

了解Sass的都知道,我们编写的后缀名为scss的文件只有编译成css文件,才能用在我们的网站上,所以Compass提供了一系列的编译命令。 在项目的根目录运行如下命令

compass compile

会将Sass子目录中的后缀名scss文件编译成css文件,并保存在stylesheets子目录中。

有人会说修改一次scss文件就需要执行一遍compass compile太过麻烦,所以compass还提供了自动编译命令如下

compass watch

运行该命令后,只要scss文件发生修改,就会自动编译成stylesheets子目录中对应css文件。

默认状态下,编译出来的css文件会带有大量的注释,但是我们的只需要压缩后的css文件,这时就需要使用如下命令

compass compile --output-style compressed

4.Compass中的模块

Comapss采用模块结构,不同的模块提供不同的功能,我们在开发中可以按需来引入模块,下面我将着重讲述一下各个模块的主要功能。

Compass内置了六大模块,其中包括如下

-   reset
-   css3
-   layout
-   typography
-   utilities
-   helpers

Reset模块:是浏览器的重置模块,减少浏览器的差异性,即重置浏览器间的差异性。

Layout模块:提供了页面布局的控制能力,比如讲一个容器内的子元素横向纵向占满。

值得注意的是,只有Reset模块和Layout模块是需要显式指定引入的,即只要@import "compass" 就可以引入其他模块。

css3模块:提供了跨浏览器的css3的能力,相信你用过以后再也不会因为加浏览器前缀而头疼不已。

Helpers模块:内含一系列的函数,跟Sass中的函数列表很像(用的很少但是功能很强大)。

Typography模块:修饰文本的样式,垂直韵律。

Utilities模块:可以说Compass将没有办法放到其他模块的内容都放在了该模块中。

其实Compass还提供了Browser Support的方法:它主要用于配置Compass默认支持哪些浏览器,对于指定的浏览器默认支持到哪一个版本,一旦修改就会影响其他六个模块的输出,需要针对不同的浏览器做不同的适配。

关于各个模块使用办法以及特色我将会下面的文章中一一讲述。

时间: 2024-11-05 06:27:22

邂逅Sass和Compass之Compass篇的相关文章

邂逅Sass和Compass之Sass篇

对于一个从后台转到前端的web开发者来说,最大的麻烦就是写CSS,了解CSS的人都知道,它可以开发网页样式,但是没法用它编程,感觉耦合性相当的高,如果想要方便以后维护,只能逐句修改甚至重写相当一部分的CSS.随着后台人员大量的涌入前端这个行业,CSS又焕发了新的春天,人们开始为CSS加入编程元素,也就是“CSS预处理器”.它的基本思想就是用一门专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.下面我们结合官方文档和阮一峰老师的用法指南,再次系统的总结一下Sass的主要用法. 1.S

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal

sass语法一(变量篇)

文件后缀名 sass有两种后缀名的文件:一种后缀名为sass,不使用大括号和分号:另一种是我们这里使用的scss文件,这种和我们平时使用的css文件格式差不多,使用大括号和分号. //后缀名为sass的文件 body background: #eee font-size: 14px //后缀名为scss的文件 body { background: #eee; font-size: 14px; } 导入 sass的导入(@import)的规则和css不同,编译时会将@import的scss文件的内

分享15款很实用的 Sass 和 Compass 工具

Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易. 在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScri

【Sass初级】开始使用Sass和Compass

转自:http://www.w3cplus.com/preprocessor/beginner/getting-started-with-sass-and-compass.html 如果你的朋友.同事或网友有跟你说过Sass或者Compass,或者两者,那太棒了.现在怎么办?在这篇初学者指南中,我首先带领大家使用Sass和Compass.我将告诉大家如何完成安装和创建一个测试项目.怎么使用Sass编译CSS,甚至还会告诉大家有关于Sass中的"mixin". 安装Sass和Compas

CSS——sass & compass

好的代码习惯:应该是注释占用整个篇幅的2/3. 慕课网学习笔记:(http://www.imooc.com/learn/364) 1.理论基础: sass_Syntactically Awesome StyleSheets sass如同锤子,compass如同锤子,而css如同锤子和钉子完美应用的产品. sass和compass的好处: 使用sass和compass可以写出更优秀的css: 解决css编写过程中的痛点问题,如精灵图合图问题: 有效组织样式.图片.字体等项目元素. 2.sass的安

译:Grunt编译sass&compass和压缩js的工作流程

原文:Grunt workflow for compiling Sass & Compass and minifying Javascript 以前,我们安装Node,NPM和Grunt还包括建立的一个package.json文件和一个Gruntfile文件.在这篇让人兴奋的文章中,我们将会填补一切,你会领会到Grunt是多么的让人吃惊,体验一下他让人敬畏的力量,就像慵懒的沐浴在温暖的阳光下一样让人满意. 如果你还没有安装Node,NPM和Grunt 那就需要先安装好这些东西(真的不难也不可怕)

sass+compass起步

前言:Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organize

[已读]Sass与Compass实战

介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而grunt和FIS貌似都有自己的图片精灵方案(好吧,我都没用过)?所以,这本书也没什么必要看了→ →