Home > Developer > Web Develop
Mastering CSS is a basic requirement for every web developer, and while the CSS itself is not complex, how to write CSS that supports all major browsers (especially IE), and how to organize CSS in a large web site in an orderly fashion is a tricky issue. I'm more of a developer than a designer, but unfortunately I spend a lot of time dealing with the tricky issues of CSS, and it makes sense if there are tools that can help me deal with these problems. After a period of search and research, but also really found a few great tools, feel really brief encounter, share with you.
Blueprint CSS Framework
As I said just now, it is difficult to deal with the inconsistency of browsing compiler. Every start of a new project, we need to do something repetitive, such as the need to reset some elements of the padding and margin to 0, set the default style of some elements, define some common styles, etc., due to inconsistencies between the browser and become complex. With blueprint, you will not have to worry about these, blueprint has been very perfect for you to do these things. This is just a small part of what blueprint does, it also defines some form styles, plus it takes some plugins. Blueprint is also a grid-based (grid) layout framework. Before I saw blueprint, I didn't know that grid layout was so popular. Grid layout is to divide the browser content area into a fixed size of the grid, the location of elements in the page is aligned to the grid. Blueprint The default Settings page has a width of 950 pixels, and it is divided into 24 meshes, each with a width of 30 pixels and a distance of 10 pixels between each grid.
The layout is very easy under blueprint, so let's look at how to use blueprint to do a very common three-column layout:
HTML codeSpan-x indicates that the content spans X meshes, while the right side has a margin of 10 pixels, such as the span-4 width of 4*40-10=150 pixels. Note that when the content crosses the 24th style, the last style needs to be defined, and the last style is set Right-margin to 0. So the above example is clear, the header and footer across all 24 grids, the left-right column spans 4 meshes, and the middle content spans 16 meshes. Here's a cool example of using the blueprint built-in style entirely.
Blueprint makes the layout easy, but it also has a problem, which is that it uses a class name based on performance (such as Span-x), which completely violates the rules that Cass names should be based on semantics. Let's put this issue aside for a moment and look at another very, very powerful tool.
Sass
Sass is an output CSS programming language, yes, CSS also has a programming language. Sass is based on the Ruby language and is part of the Haml, so installing sass will have to install Haml and, of course, install Ruby. I don't like Haml, but I like sass very much. With the following command to install Haml (also installed with sass), based on the operating system you are using, you may need to add sudo to the command:
Ruby CodeSass is a language based on indentation, to look at an example:
Sass CodeAssuming that the above contents are saved in the Style.sass file, run the command:
Command codeWill output the Style.css file with the following contents:
CSS CodeYou can see the advantages of the SASS syntax, because of the indentation, the common prefix only need to write once, and in the CSS file needs to be repeated several times, which is a problem for maintenance. Of course, sass can do more, it also supports variables and mixin. Mixin is a reusable style, and it can even take parameters. The definition of mixin begins with "=" and the variable is defined with "!" Beginning.
Java codeThe above code defines two mixin, table-scaffoding and left, with the other being a dist parameter. #data样式则包含了left the styles defined by the mixin and table-scaffolding mixin. It will output the following CSS:
Java codeMixin is a very powerful feature of Sass, think about whether you see a lot of duplicate CSS definitions in the project and you have to copy them back and forth. With Sass You can define these common sass as a mixin and then include it in other places where you actually define the style. You can even define mixin that are common between projects, and include them in a separate file, just like a library, which is referenced when needed. We can convert blueprint styles into sass formats and make them mixin, and then define semantic-based styles that contain these mixin so that we can use the semantic style names in the page without using the expression-based style of the blueprint band. Fortunately, we do not need to do these things ourselves, there is another framework to help you do it, then I will talk about the compass. SASS supports the operation of variables, which is sometimes very convenient, we can define the width of some elements, defined as variables, the width of other elements are calculated by them, when changing the layout, only need to modify the value of a few variables can be. As a programming language, sass also supports control conditions and looping statements, although this is rarely used in general.
Compass
Blueprint provides a very robust CSS framework, but uses a large number of performance-based class names, while the Sass language provides an infrastructure that transforms performance-based class names into semantic-based class names, without any style; Compass The function is to integrate the two into one piece, combining the advantages of both. Compass also supports the integration of other CSS frameworks, which is not mentioned here. Compass is also based on the Ruby language and is installed using the following commands:
Command codeTo start a new Compass project, use:
Command codeThe option-F representation is integrated with the blueprint framework. Go to the project directory and let's implement a three-column layout based on Compass. Write the HTML file first:
HTML codeNote that there is no blueprint-related style name, we define a semantic-based ID for each section, and then they define the style, open the project directory under the Src/screen.sass file, and change its contents to the following:
Sass CodeThe first few lines of import compass provide the Sass style associated with blue, which contains a lot of mixin that can be used. #header, #footer的样式直接包含了column Mixin, the first parameter is the BLUEPRING_GRID_COLUMNS variable defined by compass, which defaults to 24, and the second argument is true, indicating that the element spans the last column. Left-sidebar and Right-sidebar occupy 1/4 of the entire width of the page, and the variable sidebar_columns represents the width of the sidebar occupied, which is calculated from the bluepring_grid_columns. The same main-content width is calculated. They all contain the column Mixin directly. Turn it into CSS and use the command directly in the project directory:
Java codeYou can convert the Sass file in the SRC directory to the appropriate CSS. Now open the HTML file you just created, you should see the normal layout of the page.
In project development, if you need to manually invoke the Compass command every time to convert the Sass file to a CSS file, that's too much trouble, Compass provides commands
Command codeIt automatically monitors changes to the Sass file in the SRC directory and automatically transforms it into a CSS file.
Powerful CSS tool Portfolio: Blueprint, Sass, Compass
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
