剽悍的CSS工具组合：Blueprint, Sass, Compass(z)

2012-10-25

强悍的CSS工具组合：Blueprint, Sass, Compass(z)掌握CSS是每个Web开发者的基本要求，虽然CSS本身并不复杂，

强悍的CSS工具组合：Blueprint, Sass, Compass(z)
掌握CSS是每个Web开发者的基本要求，虽然CSS本身并不复杂，但怎样写出支持所有主流浏览器（特别是IE）的CSS，以及在大型网站中如何有序地组织好CSS结构却是一个相当棘手的问题。我更多的是一个开发者，而不是一个设计师，却不幸花了大量时间处理CSS这些棘手问题，如果能有一些工具能帮我处理这些问题，那将很有意义。经过一段时间的搜索和研究，还真发现了几个很棒的工具，感觉真是相见恨晚，与大家分享之。

Blueprint CSS Framework

刚才说过了，处理浏览噐的不一致性是很困难的事情。每开始一个新项目，我们都需要做一些重复的事情，比如需要将一些元素的padding和margin重置为0，设置某些元素的默认样式，定义一些通用的样式等，这些由于浏览器之间的不一致而变得复杂。有了blueprint ，你就不用再担心这些啦，blueprint已经非常完美的为你做好这些事情了。这还只是blueprint做的一小部分事情，它还定义了一些form的样式，另外它带一些插件。blueprint还是一个基于网格(grid)布局的框架。在我看到blueprint之前还不知道网格布局已经这么流行了。网格布局就是把浏览器内容区域划分一些固定的大小的网格，网页中元素的定位都向网格靠齐。blueprint默认设置网页的宽度为950像素，并它分成24个网格，每个网格宽度为30像素，每个网格之间的距离为10像素。

在blueprint下布局非常容易，我们来看如何使用blueprint来做非常常见的三列布局：

Html代码
<html>
<head>
    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
    
</head>
<body>
<div href="css/blueprint/screen.css" type="text/css" media="screen, projection">
        <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
        
</head>
<body>
<div media="screen, projection" rel="stylesheet" type="text/css">
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css">

</head>
<body>
<div id="container">
    <div id="header">
        Header
    </div>
    <div id="left-sidebar">
        Left sidebar
    </div>
    <div id="main-content">
        Main content
    </div>
    <div id="right-sidebar">
        Right sidebar
    </div>
    <div id="footer">
        Footer
    </div>
</div>
</body>
</html>
<html>
<head>

<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css">

</head>
<body>
<div id="container">
        <div id="header">
                Header
        </div>
        <div id="left-sidebar">
                Left sidebar
        </div>
        <div id="main-content">
                Main content
        </div>
        <div id="right-sidebar">
                Right sidebar
        </div>
        <div id="footer">
                Footer
        </div>
</div>
</body>
</html>

注意上面没有任何blueprint相关的样式名，我们为每个部分定义了一个基于语义的id，接下来就是它们定义样式，打开项目目录下src/screen.sass文件，将它的内容改成如下：

Sass代码
// This import applies a global reset to any page that imports this stylesheet.
@import blueprint/reset.sass
// To configure blueprint, edit the partials/base.sass file.
@import partials/base.sass
@import blueprint
@import blueprint/modules/scaffolding.sass

+blueprint-typography("body")
+blueprint-scaffolding("body")

+blueprint-utilities
+blueprint-debug
+blueprint-interaction

#container
    +container

#header, #footer
    // true表示是最后一列
    +column(!blueprint_grid_columns, true)

// sidebar占整个页面的1/4，也就是跨6列
!sidebar_columns = floor(!blueprint_grid_columns / 4)
#left-sidebar
    +column(!sidebar_columns)
#main-content
    +column(!blueprint_grid_columns - 2 * !sidebar_columns)
#right-sidebar
    +column(!sidebar_columns, true)
// This import applies a global reset to any page that imports this stylesheet.
@import blueprint/reset.sass
// To configure blueprint, edit the partials/base.sass file.
@import partials/base.sass
@import blueprint
@import blueprint/modules/scaffolding.sass

+blueprint-typography("body")
+blueprint-scaffolding("body")

+blueprint-utilities
+blueprint-debug
+blueprint-interaction

#container
        +container

#header, #footer
        // true表示是最后一列
        +column(!blueprint_grid_columns, true)

// sidebar占整个页面的1/4，也就是跨6列
!sidebar_columns = floor(!blueprint_grid_columns / 4)
#left-sidebar
        +column(!sidebar_columns)
#main-content
        +column(!blueprint_grid_columns - 2 * !sidebar_columns)
#right-sidebar
        +column(!sidebar_columns, true)

前几行导入Compass提供和Blue相关的Sass样式，里面包含了很多Mixin，可以拿来用。#header, #footer的样式直接包含了column Mixin，第一个参数是compass定义的bluepring_grid_columns变量，默认为24，第二个参数为true，表示元素会跨最后一列。left-sidebar和right-sidebar占据整个页面宽度的1/4，变量sidebar_columns表示sidebar占据的列宽，它根据bluepring_grid_columns计算得到。同样main-content的宽度也是计算得到的。它们都直接包含了column Mixin。将它转化成css，在工程目录下直接使用命令：

Java代码
compass
compass

就可将src目录下的sass文件转化成相应的css。现在打开刚才创建的HTML文件，应该可以看到正常布局的页面了。

在项目开发中，如果每次都需要手工调用compass命令去将sass文件转换成css文件，那就太麻烦了，compass提供命令

Command代码
compass -w
compass -w

它会自动监视src目录下sass文件的改动并自动将它转换成css文件。

热点排行