search

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

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

WBOY
WBOYOriginal
2016-06-24 11:55:501168browse

掌握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  
  •       
  •     
  • grid, while leaving a margin of 10 pixels on the right. For example, the width of span-4 is 4*40-10=150 pixels. Note that when the content crosses the 24th style, you need to define the last style. The function of the last style is to set the right-margin to 0. So the above example is very clear, the header and footer span all 24 grids, the left and right side columns span 4 grids each, and the middle content spans 16 grids. Here is an even cooler example that uses blueprint built-in styles entirely.
    • blueprint makes layout easy, but it also has a problem, that is, it uses a lot of performance-based class names (such as span-x), which completely violates the fact that cass names should be based on semantics rules. Let's put this aside for now and look at another very, very powerful tool.

    Sass

    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 is an indentation-based language, let’s look at an example:

    Sass code

    table.hl

    margin: 2em 0

    td. ln

    text-align: right
    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

    The style.css file will be output, its content is:

    Css code

    table.hl {

    margin: 2em 0;

    }

    table.hl td.ln {
    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

    font-weight: bold
    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.

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Jsoup crawls page data and understands HTTP message headers_html/css_WEB-ITnoseNext article：Jsoup crawls page data and understands HTTP message headers_html/css_WEB-ITnose

    Related articles

    See more