掌握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>
<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">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
<div class="container">
<div class="span-24 last">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
Main content
</div>
<div class="span-4 last">
Right sidebar
</div>
<div class="span-24 last">
Footer
</div>
</div>
</body>
</html>
span-x表示内容跨x个网格，同时右边留有10像素的margin，例如span-4的宽度为4*40-10=150像素。注意当内容跨了第24个风格，需要定义last样式，last样式的作用就是设置right-margin为0。这样上面的例子就很清楚了，header和footer跨所有24个网格，左右侧栏各跨4个网格，中间内容跨16个网格。这里
是个更酷的例子，它完全使用blueprint内置样式。
blueprint使得布局变得很容易，但是它也有问题，那就是它大量使用基于表现的class名称（如span-x)，这完全违背cass名称应该基于语义的规则。我们暂且搁置这个问题，来看另外一个非常非常强大的工具。
Sass
Sass
是一个输出CSS的编程语言，没错，CSS也有编程语言。Sass基于Ruby语言，并且是Haml的一部分，所以要安装Sass就得安装Haml，当然还得安装Ruby。我不喜欢Haml，却非常喜欢Sass。通过下面的命令来安装Haml(同时也安装了Sass)，基于你使用的操作系统，你可能需要在命令加上sudo:
gem install haml
Sass是基于缩进的语言，来看一个例子：
table.hl
margin: 2em 0
td.ln
text-align: right
li
font:
family: serif
weight: bold
size: 1.2em
假设上面的内容保存在style.sass文件，运行命令：
sass style.sass style.css
会输出style.css文件，它的内容为：
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
可以看出Sass语法的优势，由于基于缩进，共同的前缀只需要写一次，而在CSS文件则需要重复多次，这对维护是个问题。当然，Sass可以做得更多，它还支持变量和Mixin。Mixin是可重用的样式，它甚至还可以带参数。Mixin的定义以”=“开头，变量定义以"!"开头。
=table-scaffolding
th
text-align: center
font-weight: bold
td, th
padding: 2px
=left(!dist)
float: left
margin-left = !dist
#data
+left(10px)
+table-scaffolding
上面的代码定义了两个Mixin，分别是table-scaffoding和left，其中left还接收一个dist参数。#data样式则包含了left Mixin和table-scaffolding Mixin定义的样式。它会输出如下CSS：
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
Mixin是Sass非常强大的一个特性，想想看你是不是在项目中看到很多重复的CSS定义，你不得不来回的拷贝复制。通过Sass你可以将这些公用的Sass定义成一个Mixin，然后在其它实际定义样式的地方包含它。你甚至还可以定义项目之间都通用的Mixin，把它们包含在一个单独的文件里，就像类库一样，需要时就引用。我们可以为Blueprint的样式转变成Sass的格式，并把它们做成Mixin，然后再定义基于语义的样式，它们包含这些Mixin，这样我们就可以在页面中使用语义样式名称了，而不需要使用Blueprint带的基于表现的样式。幸运的是，我们并不需要自己做这些事情，已经有另外的框架帮你做好了，那就我接下来要谈的Compass。Sass支持变量的运算，这有时非常方便，我们可以定义一些元素的宽度，定义为变量，其它元素的宽度由它们计算出来，当改变布局时，只需要修改几个变量的值就可以了。作为一门编程语言，Sass还支持控制条件和循环语句，虽然这在一般情况下很少用到。
Compass
Blueprint提供了一个非常健壮的CSS框架，但是却大量使用基于表现的class名称；Sass语言提供将基于表现的class名称转化成基于语义的class名称的基础设施，但本身不带任何样式；Compass
的作用就是将两者集成到一块，结合两者的优点。Compass还支持其它CSS框架的集成，这里就不说了。Compass也是基于Ruby语言的，使用下列命令来安装：
gem install compass
要开始一个新的Compass项目，使用：
compass -f blueprint project-name
选项-f表示和blueprint框架集成。进入到项目目录下，让我们基于Compass来实现一个三列布局。先写HTML文件：
<html>
<head>
<!-- Framework CSS -->
<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">
<!--[if lt IE 8]>
<link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css">
<![endif]-->
</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文件，将它的内容改成如下：
// 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，在工程目录下直接使用命令：
compass
就可将src目录下的sass文件转化成相应的css。现在打开刚才创建的HTML文件，应该可以看到正常布局的页面了。
在项目开发中，如果每次都需要手工调用compass命令去将sass文件转换成css文件，那就太麻烦了，compass提供命令
compass -w
它会自动监视src目录下sass文件的改动并自动将它转换成css文件。
分享到：
相关推荐
Melanie Swan著，英文原版，epub格式
区块链的应用
蓝图CSS 一个轻量级的布局库，用于构建可在任何地方工作的出色的响应式移动优先UI。 开源，使用CSS Grid和Flexbox构建。 在下载单个CSS文件。 文献资料 在此处查看。 变更日志 查看以查看有关更新和改进的详细信息...
CSS框架Blueprint应用 Css框架介绍 – Blueprint css框架 – 应用psd模板(Photoshop文件) 实现网页的快速设计 – 应用可视化工具实现div+css的快速开发 – 网站Css框架结构搭建
由于 HTML 是一种标准，并且所描述的是结构而非样式，因此 Blueprint 框架是完全作为 CSS 实现的。要使用 Blueprint，您在设计网页时要以 Blueprint 为指导，然后再设计或生成 HTML，以便将 Blueprint CSS 样式应用...
最新版div+css可视化开发工具，boks-v0.5.8，适用于blueprint css框架的开发，拖拉拽即可导出漂亮的网页架构。
Blueprint是一个CSS框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。
The goal of a reset stylesheet is to reduce browser inconsistencies in ... Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.
Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。
blueprint CSS 综述 pdf 文件 是一个CSS框架
NULL 博文链接：https://xshow.iteye.com/blog/547746
Blueprint是一款仿Chromebook Getting Started guide页面效果的Google风格的网格布局css画廊。网格布局采用masonry制作，css画廊的运动效果则由CSS 3D Transforms完成。
如果您没有或想要Blueprint Extensions，它也可以作为独立的mod很好地工作。 指示 持有有效的蓝图（不为空）时，按CTRL+ALT+S进行转换。 将生成一个包含一个或多个常量组合器的新蓝图，其中包含该蓝图项目和计数的...
Blueprint 框架 CSS 生成工具，先安装adobe air，再安装boks.air
Blueprint 是一个元构建系统，它可在 Blueprints 文件下阅读所需要建立的模块的描述，同时产出一个用于描述所需的命令行的 Ninja 清单。大多数构建系统用内置规则或者特定领域的语言来描述用于转换模块所建立的规则...
本文是对《Blockchain blueprint for a new economy 》前5章的翻译。因对整体行业认识局限性，有很多认识不足之处，以后会进行修订。
注意： Blueprint SDK Maker依赖于库。 请参阅该仓库以获取构建说明。 要生成独立的phar文件，请在php.ini中设置以下内容： ; http://php.net/phar.readonlyphar.readonly = Off如果您不需要生成phar ，请使用选项-...
css的blueprint框架。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
Blueprint-VerticalTimeline 是一个响应式的垂直时间轴布局，带有图标和示例媒体查询。 在线演示 标签：Blueprint
blueprint-css-v1.0.1-8 css样式框架，快速构建样式 和blueprint的需求中心软件wiki