Community

Articles Topics Q&A

Learn

Course Programming Dictionary

Tools Library

Development tools Website Source Code PHP Libraries JS special effects Website Materials Extension plug-ins

Leisure

Game Download Game Tutorials

English

简体中文 English 繁体中文 日本語 한국어 Melayu Français Deutsch

Login

singup

Home > Web Front-end > HTML Tutorial > Powerful CSS tool combination: Blueprint, Sass, Compass_html/css_WEB-ITnose

Powerful CSS tool combination: Blueprint, Sass, Compass_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:55:50

Original

1210 people have browsed it

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

    

Sass is a programming language that outputs CSS. Yes, CSS There are also programming languages. Sass is based on the Ruby language and is part of Haml, so to install Sass you must install Haml, and of course Ruby must be installed. I don't like Haml, but I like Sass very much. Install Haml (and also Sass) with the following command. Depending on your operating system, you may need to add sudo to the command:

Ruby Code

gem install haml

Sass code

table.hl

margin: 2em 0

td. ln

2. li
3. font:
4. family: serif
5. weight: bold
6. size: 1.2em
9. Assuming the above content is saved in the style.sass file, run the command:

Command code

sass style.sass style.css

Css code

table.hl {

margin: 2em 0;

}

1. text-align: right;
2. }
4. li {
5. font-family: serif;
6. font-weight: bold;
7. font-size: 1.2em;
8. }
11. You can see the advantages of Sass syntax. Because it is based on indentation, the common prefix only needs to be written once, while in the CSS file It needs to be repeated multiple times, which is a problem for maintenance. Of course, Sass can do more, it also supports variables and mixins. Mixins are reusable styles and can even take parameters. The definition of Mixin starts with "=", and the definition of variables starts with "!".

Java code

=table-scaffolding

th

text -align: center

1. td, th
2. padding: 2px
4. =left(!dist )
5. float: left
6. margin-left = !dist
8. #data
9. left(10px)
10. table-scaffolding
13. The above code defines two Mixins, table-scaffolding and left, where left also receives a dist parameter. The #data style includes the styles defined by left Mixin and table-scaffolding Mixin. It will output the following CSS:

Java code

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.     
      
14.         Left sidebar  
15.       
16.     
      
17.         Main content  
18.     
19. ;
20. Right sidebar
23. FOOTER
24. & lt;/div & gt;
25. & lt;/div & gt;
26. & lt;/body & gt;

Note that there are no blueprint-related style names above. We define a semantic-based id for each part, and then they are Define the style, open the src/screen.sass file in the project directory, and change its content to the following:

Sass code

1. // This import apps 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
8. blueprint-typography("body")
9. blueprint-scaffolding("body")
11. blueprint-utilities
12. blueprint-debug
13. blueprint-interaction
15. #container
16. container
18. #header, #footer
19. // true means it is the last column
20. column(!blueprint_grid_columns, true)
22. // The sidebar occupies 1/4 of the entire page, which means it spans 6 columns
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)

The first few lines import Compass to provide Blue-related Sass styles, which contain many Mixins that can be used. The styles of #header and #footer directly include column Mixin. The first parameter is the bluepring_grid_columns variable defined by compass. The default is 24. The second parameter is true, which means that the element will span the last column. left-sidebar and right-sidebar occupy 1/4 of the entire page width. The variable sidebar_columns represents the column width occupied by the sidebar, which is calculated based on bluepring_grid_columns. Similarly, the width of main-content is also calculated. They all directly include column Mixin. Convert it into css and use the command directly in the project directory:

Java code

1. compass

can convert the sass files in the src directory into the corresponding css. Now open the HTML file you just created and you should be able to see the normal layout of the page.

During project development, it would be too troublesome if you need to manually call the compass command every time to convert the sass file into a css file. compass provides the command

Command code

1. compass -w

It will automatically Monitor changes to sass files in the src directory and automatically convert them into css files.