Sass & Compass Best Practices 3

——图片处理

前一篇文章中我们介绍了如何利用Sass来简化我们的代码,使我们的代码可复用且易维护。本文讲介绍如何使用Compass来管理我们用于样式的图片。

Compass的图片处理主要有以下功能:

  • 自动将一系列单个图片拼接生成一个Sprites;
  • 根据图片名,自动计算background-position并生成CSS代码;
  • 自动给图片加上防缓存机制。

下面我们就来看看如何具体实现这些功能。

Sass & Compass Best Practices 2

——简化代码

前一篇文章中我们介绍了如何利用Sass来组织我们的代码结构,本文中将会介绍如何利用Compass来简化我们的CSS代码,并且提高CSS代码的复用性。

在我们的CSS开发中,你是否遇到过以下的问题:

  • 为了浏览器的兼容性,同样的效果要写很多行,维护起来很麻烦;
  • CSS Selector需要有层级关系,但重复的写同样的父元素使代码看起来很冗余;
  • 不同的组件拥有同样的样式,但由于有一些细微的差别,导致很难复用,而一旦复用,由于CSS的特性,又不易阅读和维护。

这个时候就应该用到Sass的nest和@extend以及Compass的一些内建mixin了。

Sass & Compass Best Practices 1

——组织结构

在CSS开发中你有没有遇到以下问题:

  • 一个CSS文件几百上千行,要修改一个样式要找半天;
  • 为了不同浏览器的兼容性,同样的样式要写好几行代码;
  • 为了防止背景图片被缓存,每次更改背景图片都要修改图片名称和代码;
  • 当sprites修改以后,在代码中需要调试半天background-position才能适应新的sprites;
  • ⋯⋯

当你遇到其中一个或多个问题的时候,说明在CSS代码的管理和维护上出了问题。而这个时候,传统的CSS开发方式已经无法满足这些需求了,我们需要新的开发框架和工具,也就是:SassCompass