搜索

首页 >web前端 >html教程 >强悍的CSS工具组合：Blueprint, Sass, Compass_html/css_WEB-ITnose

强悍的CSS工具组合：Blueprint, Sass, Compass_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:55:501192浏览

掌握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代码  

  1.   
  2.   
  3.       
  4.         
  5.       
  6.   
  7.   
  8.   
  9.     
      
  10.         Header  
  11.     
  
  •     
      
  •         Left sidebar  
  •     
    •   
  •     
      
  •         Main content  
  •     
    •   
  •     
      
  •         Right sidebar  
  •     
    •       
  •     
      
  •         Footer  
  •     
    •   
  •       
  •   
  •   

    •  

    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:

     

    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.   
    2.   
    3.     
    4.     
    5.     
    6.     
    7.   
    8.   
    9.   
    10.     
        
    11.         Header  
    12.     
      13.   
    13.     
        
    14.         Left sidebar  
    15.     
      16.   
    16.     
        
    17.         Main content  
    18.     
      19.   
    19.     
        
    20.         Right sidebar  
    21.     
      22.       
    22.     
        
    23.         Footer  
    24.     
      25.   
    25.       
    26.   
    27.   

     

    注意上面没有任何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文件。

    声明：
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    上一篇：Jsoup 爬取页面的数据和 理解HTTP消息头_html/css_WEB-ITnose下一篇：codeforces Round #261(div2) D解题报告_html/css_WEB-ITnose

    相关文章

    查看更多