compass

我准备向你们提出一个你们不可能拒绝的条件，有了compass,sass才迎来了它真正的辉煌。

compass 是什么？为什么要学习 compass ？

compass 是一个 sass 的库，compass 里面有很多封装好的 mixin ，有了它，我们就可以很快的写出完美的，兼容的 样式。

举个例子1：
我们要做一个横向排布包含导航链接的列表，类似这样：

首先，我们的 html 是这样的：

<ul class="nav"><li><a href="/">Home</a></li><li><a href="/services">Services</a></li><li><a href="/blog">Blog</a></li><li><a href="/contact">Contact</a></li>
</ul>

然后写 CSS ：

ul.nav {border: 0;margin: 0;overflow: hidden;padding: 0;
}
ul.nav li {display: inline;float: left;margin-left: 0;padding-left: 4px;padding-right: 4px;
}

OK，并不是很难，CSS 本身就是这样。
但是，如果我们有了 compass 以后，我们的工作是这样的：

ul.nav {@include horizontal-list;
}

难以置信的简单。
我们再来看一下使用了这个以后，编译后的 css 样式：

ul.nav {margin: 0;padding: 0;border: 0;overflow: hidden;*zoom: 1;
}
ul.nav li {list-style-image: none;list-style-type: none;margin-left: 0;white-space: nowrap;display: inline;float: left;padding-left: 4px;padding-right: 4px;
}
ul.nav li:first-child, ul.nav li.first {  // .first是针对低版本浏览器的padding-left: 0;
}
ul.nav li:last-child, ul.nav li.last {  // .last是针对低版本浏览器的padding-right: 0;
}

可以发现 compass 编译出来的 css 更健壮。
对于支持 :first-child 和 :last-child 的浏览器，我们略去了两边元素对外的内边距。而对低版本浏览器，我们可以使用 .first 和 .last 这两个类名。

举个例子2：
把文字处理成图片显示出来。

h1.mokayu {text-indent: -119988px;overflow: hidden;text-align: left;background-image: url('/images/mokayu-header.png');background-repeat: no-repeat;background-position: 50% 50%;
}

第一步是对默认的文字设置一个负值的缩进将其隐藏起来。然后通过 background 属性把文本转换成图片。
Compass 通过 replace-text 辅助器把这件事情变得更简单了：

h1.mokayu {@include replace-text('mokayu-header.png');
}

通过这两个例子，我们已经体会到了 compass 的威力了。

compass 详解

Compass 七大模块

Reset
Layout
CSS3
Helpers
Typography
Utilities
Browser

Compass 核心模块

Reset
Layout

为什么要将这两个模块单独拿出来说呢？
因为只要引入了 compass(@compass) 就默认引入了 compass 的其他五大模块

    CSS3    Helpers    Typography    Utilities    Browser

只有这两个模块需要单独引入。
@import "compass/reset"
@import "compass/layout"

Browser 用来配置compass默认支持哪些浏览器,对于特定浏览器,默认支持到哪个版本.
Browser 中的配置一旦修改,将影响其余6个模块的输出,因为需要针对不同的浏览器做不同的适配.

reset 是 compass 内置的，如果我们想修改为 normalize。
命令行使用 gem install compass-normalize
然后在 config.rb 配置文件中添加
require 'compass-normalize'
然后在 scss 文件中 @import "normalize";

如果说 reset 模块是 compass 中使用起来最简单的模块，那么，layout 模块则是 compass 中使用率最低的模块。Layout 模块用来实现页面布局控制的。

如果说 Layout 模块是 compass 中使用率最低的模块，那么，CSS3 模块肯定是主动使用率最高的模块。
CSS3 模块主要用于提供跨浏览器的 CSS3 能力。

Typography 模块主要用来修饰文本样式、垂直韵律等(Links、Lists、Text、Vertical Rhythm)

Utilities 模块是辅助工具类函数
helpers 类里面多是函数，utilities 里面多是 mixin，包含：

Color : 颜色相关的工具集合
Print : 打印控制的集合
Tables : table样式相关的集合(table model)
Geeneral : 通用的一般类的工具(跨浏览器的清除浮动)
Sprites : 精灵图合图相关的工具集合(重点)

最后，给你们分享一个干货：

《Sass 与 Compass实战》

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后：约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

sass + compass相关推荐

SASS+Compass基本使用，结合JavaScript实现随机点名小系统
SASS+Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over,效果请看(5),代码解释请看源码. (1) ...
使用Sass预定义一些常用的样式，非常方便（转）
SS预处理技术现在已经非常成熟,比较流行的有Less,Sass,Stylus,在开发过程中提升我们的工作效率,缩短开发时间,方便管理和维护代码,可以根据自己的喜好选择一款自己喜欢的工具开发,使用很接近 ...
css 预处理器 less sass
文章目录 1. less 1.1 less 的安装 1.2 less用法 1.2.1 命令行用法 1.2.2 变量 1.2.3 混合 1.2.4 嵌套 2. Sass 2.1 Sass简介 2.1.1 ...
web前端之sass简介
Sass简介大家都知道,js 中可以自定义发量,css 仅仅是一个标记语言,不是编程语言,因此不可以自定义发量.不可以引用等等. 面对这些问题,我们现在来引入 Sass,简单的说,他是 css 的升 ...
Less/Sass预处理器
Less,Sass预处理器教程 1.0 CSS预处理器的介绍 CSS预处理器基于CSS的另一种语言通过工具编译成CSS 添加了很多CSS不具备的特性能提升CSS文件的组织方式 CSS预处理器到底 ...
如何在div中将绝对定位的元素居中？
我需要在窗口中心放置一个div (带有position:absolute; )元素. 但是我遇到了问题,因为宽度未知 . 我试过了但是,由于宽度是响应性的,因此需要对其进行调整. .center { ...
2018前端常见问题整理
$HTML, HTTP,web综合问题 1.前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要 ...
2015-2016前端架构体系技术
一.框架与组件 **bootstrap等UI框架设计与实现伸缩布局:grid网格布局基础UI样式:元素reset.按钮.图片.菜单.表单组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组 ...
精选 GitHub 值得收藏的100个前端项目
作者:小明小明长大了博客:https://www.jianshu.com/p/72ca8192f7b8 引言整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者 ...

sass + compass

文章目录

compass

compass 是什么？为什么要学习 compass ？

compass 详解

sass + compass相关推荐

最新文章

热门文章