强悍的CSS工具组合：Blueprint, Sass, Compass

时间  2019-11-29
标签 强悍 css 工具 组合 blueprint sass compass 栏目 CSS 繁體版
原文   原文链接

掌握CSS是每一个Web开发者的基本要求，虽然CSS自己并不复杂，但怎样写出支持全部主流浏览器（特别是IE）的CSS，以及在大型网站中如何有序地组织好CSS结构倒是一个至关棘手的问题。我更多的是一个开发者，而不是一个设计师，却不幸花了大量时间处理CSS这些棘手问题，若是能有一些工具能帮我处理这些问题，那将颇有意义。通过一段时间的搜索和研究，还真发现了几个很棒的工具，感受真是相见恨晚，与你们分享之。css

 

Blueprint CSS Frameworkhtml

 

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

 

 

在blueprint下布局很是容易，咱们来看如何使用blueprint来作很是常见的三列布局：github

 

Html代码   收藏代码
  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名称应该基于语义的规则。咱们暂且搁置这个问题，来看另一个很是很是强大的工具。浏览器

 

 

Sasssass

 

Sass 是一个输出CSS的编程语言，没错，CSS也有编程语言。Sass基于Ruby语言，而且是Haml的一部分，因此要安装Sass就得安装Haml，固然还得安装Ruby。我不喜欢Haml，却很是喜欢Sass。经过下面的命令来安装Haml(同时也安装了Sass)，基于你使用的操做系统，你可能须要在命令加上sudo:app

 

Ruby代码   收藏代码
  1. gem install haml  

 

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

 

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

 

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

 

Command代码   收藏代码
  1. sass style.sass style.css  

 

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

 

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

 

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

 

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

 

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

 

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

 

Command代码   收藏代码
  1. gem install compass  

 

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

 

Command代码   收藏代码
  1. compass -f blueprint project-name  

 

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

 

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文件，将它的内容改为以下：

 

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.   
  8. +blueprint-typography("body")  
  9. +blueprint-scaffolding("body")  
  10.   
  11. +blueprint-utilities  
  12. +blueprint-debug  
  13. +blueprint-interaction  
  14.   
  15. #container  
  16.     +container  
  17.   
  18. #header, #footer  
  19.     // true表示是最后一列  
  20.     +column(!blueprint_grid_columns, true)  
  21.   
  22. // sidebar占整个页面的1/4，也就是跨6列  
  23. !sidebar_columns = floor(!blueprint_grid_columns / 4)  
  24. #left-sidebar  
  25.     +column(!sidebar_columns)  
  26. #main-content  
  27.     +column(!blueprint_grid_columns - 2 * !sidebar_columns)  
  28. #right-sidebar  
  29.     +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代码   收藏代码
  1. compass  

 

就可将src目录下的sass文件转化成相应的css。如今打开刚才建立的HTML文件，应该能够看到正常布局的页面了。

 

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

 

Command代码   收藏代码
  1. compass -w  

 

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程