掌握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来做非常常见的三列布局：

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
  4. <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
  5. <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
  6. </head>
  7. <body>
  8. <div class="container">
  9. <div class="span-24 last">
  10. Header
  11. </div>
  12. <div class="span-4">
  13. Left sidebar
  14. </div>
  15. <div class="span-16">
  16. Main content
  17. </div>
  18. <div class="span-4 last">
  19. Right sidebar
  20. </div>
  21. <div class="span-24 last">
  22. Footer
  23. </div>
  24. </div>
  25. </body>
  26. </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:

  1. gem install haml

Sass是基于缩进的语言，来看一个例子：

  1. table.hl
  2. margin: 2em 0
  3. td.ln
  4. text-align: right
  5. li
  6. font:
  7. family: serif
  8. weight: bold
  9. size: 1.2em

假设上面的内容保存在style.sass文件，运行命令：

  1. sass style.sass style.css

会输出style.css文件，它的内容为：

  1. table.hl {
  2. margin: 2em 0;
  3. }
  4. table.hl td.ln {
  5. text-align: right;
  6. }
  7. li {
  8. font-family: serif;
  9. font-weight: bold;
  10. font-size: 1.2em;
  11. }

可以看出Sass语法的优势，由于基于缩进，共同的前缀只需要写一次，而在CSS文件则需要重复多次，这对维护是个问题。当然，Sass可以做得更多，它还支持变量和Mixin。Mixin是可重用的样式，它甚至还可以带参数。Mixin的定义以”=“开头，变量定义以"!"开头。

  1. =table-scaffolding
  2. th
  3. text-align: center
  4. font-weight: bold
  5. td, th
  6. padding: 2px
  7. =left(!dist)
  8. float: left
  9. margin-left = !dist
  10. #data
  11. +left(10px)
  12. +table-scaffolding

上面的代码定义了两个Mixin，分别是table-scaffoding和left，其中left还接收一个dist参数。#data样式则包含了left Mixin和table-scaffolding Mixin定义的样式。它会输出如下CSS：

  1. #data {
  2. float: left;
  3. margin-left: 10px;
  4. }
  5. #data th {
  6. text-align: center;
  7. font-weight: bold;
  8. }
  9. #data td, #data th {
  10. padding: 2px;
  11. }

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语言的，使用下列命令来安装：

  1. gem install compass

要开始一个新的Compass项目，使用：

  1. compass -f blueprint project-name

选项-f表示和blueprint框架集成。进入到项目目录下，让我们基于Compass来实现一个三列布局。先写HTML文件：

  1. <html>
  2. <head>
  3. <!-- Framework CSS -->
  4. <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
  5. <link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css">
  6. <!--[if lt IE 8]>
  7. <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css">
  8. <![endif]-->
  9. </head>
  10. <body>
  11. <div id="container">
  12. <div id="header">
  13. Header
  14. </div>
  15. <div id="left-sidebar">
  16. Left sidebar
  17. </div>
  18. <div id="main-content">
  19. Main content
  20. </div>
  21. <div id="right-sidebar">
  22. Right sidebar
  23. </div>
  24. <div id="footer">
  25. Footer
  26. </div>
  27. </div>
  28. </body>
  29. </html>

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

  1. // This import applies a global reset to any page that imports this stylesheet.
  2. @import blueprint/reset.sass
  3. // To configure blueprint, edit the partials/base.sass file.
  4. @import partials/base.sass
  5. @import blueprint
  6. @import blueprint/modules/scaffolding.sass
  7. +blueprint-typography("body")
  8. +blueprint-scaffolding("body")
  9. +blueprint-utilities
  10. +blueprint-debug
  11. +blueprint-interaction
  12. #container
  13. +container
  14. #header, #footer
  15. // true表示是最后一列
  16. +column(!blueprint_grid_columns, true)
  17. // sidebar占整个页面的1/4，也就是跨6列
  18. !sidebar_columns = floor(!blueprint_grid_columns / 4)
  19. #left-sidebar
  20. +column(!sidebar_columns)
  21. #main-content
  22. +column(!blueprint_grid_columns - 2 * !sidebar_columns)
  23. #right-sidebar
  24. +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，在工程目录下直接使用命令：

  1. compass

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

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

  1. compass -w

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

强悍的CSS工具组合：Blueprint, Sass, Compass的更多相关文章

  1. 强悍的 CSS 扩展语言 -- Sass

    <div class = 'testBorder'> <p> <input/> </p> </div> 假设上面这 3 个 DOM 元素有这 ...

  2. window 安装 sass compass 记录

    1.安装Ruby 安装sass 和compass 需要 Ruby 的环境,还区分xp 和win7-8 下版本区别 ruby 官网中文 ruby 官网英文 注意: xp: 下载 [xp不能下载包含64位 ...

  3. sass+compass+bootstrap三剑合璧高效开发记录

    1. 先搭建环境,下载node.js,rubyinstaller,安装, 安装rubyinstaller时,要选上include system path,这样就会自动将node.js执行添加到wind ...

  4. windows下的SASS/Compass的安装与卸载

    认识SASS/Compass SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. SASS与Compass的安装说明 SASS在Wind ...

  5. css预编译语言 sass scss（变量$var, css嵌套规则，@import规则，@extend，@mixin）

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  6. sass+compass起步

    前言:Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to ...

  7. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  8. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  9. 关于前端CSS预处理器Sass的小知识！

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

随机推荐

  1. 关于python内存地址问题

    遇到一个朋友,给我提了一个问题:python中的两个相同的值,内存地址是否一样? 当时印象里有这样一句话:Python采用基于值的内存管理模式,相同的值在内存中只有一份 于是张嘴就说是一样的 朋友说不 ...

  2. 笛卡尔遗传规划Cartesian Genetic Programming (CGP)简单理解(1)

    初识遗传算法Genetic Algorithm(GA) 遗传算法是计算数学中用于解决最优化的搜索算法,是进化算法的一种.进化算法借鉴了进化生物学中的一些现象而发展起来的,这些现象包括遗传.突变.自然选 ...

  3. webpack 打包

    React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知.那么webpack有哪些优势,可以成为最主流的React开发工具呢? webpack是什么 ...

  4. ios UnitTest 学习笔记

    一.运行第一个单元测试: 1.在Xcode 5中新建一个工程默认自带一个单元测试的文件夹,IDE自动生成了一个实现XCTestCase的.m文件,里面有一个失败测试(早期版本中实现的是SenTestC ...

  5. Daily Scrum - 11/30

    Meeting Minutes 现在有以下一些问题需要解决: 1.保存用户背诵情况的文件输出出了一些问题. 2.UWP开发Debug不太方便啊.老刘说他来加一个Log模块. 3.用户数据的同步有点麻烦 ...

  6. [福大软工] Z班 团队作业——UML设计 作业成绩

    团队作业--UML设计 作业链接 http://www.cnblogs.com/easteast/p/7745703.html 作业要求 1)团队分工(5分) 描述团队的每个成员分别完成了UML图的哪 ...

  7. Linux kernel 发布 5.0-rc1 版本

    Linux kernel 要发布 5.0 了.. 跟原因是 linus 认为 4.21的小版本号太多了... 邮件内容如下: https://lore.kernel.org/lkml/20190107 ...

  8. OneZero第二次站立会议（2016.3.22）

    会议时间:2016年3月22日 9:33~9:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论并修改. 会议内容:以下为会议插图 1.界面原型方面,小组成员对夏所画的 ...

  9. Entity Framework Plus

    ZZZ Project 这家外国公司,有很多关于.NET和数据访问的项目,有收费的,有开源的,我之前介绍过 Z.ExtensionMethods 一个强大的开源扩展库 就出自该名下,其他有 如下 1. ...

  10. idea的激活

    参考网址:https://blog.csdn.net/qq_34273222/article/details/78810799 侵删 1.进到文件夹中:C:\Windows\System32\driv ...