Reproduced SCSS and SASS and HAML and Coffeescript

Original link: http://hlee.iteye.com/blog/1236971

Asset Pipeline provides built-in functionality to compose CSS directly using Sass.

You may have this kind of doubt: what is Sass? Why should I care?

Sass (syntactically Awesome stylesheets) was originally a sub-function built into Haml.

Use indentation design to avoid making syntax error that is difficult to debug

Haml

To talk about Sass, we have to first talk about Haml this project. Haml full name is the HTML Abstract Markup Language, which is another way to provide web designers to compose HTML.

With Haml, you can quickly use its syntax to write solid, structured HTML.

Web designers often have a problem: if you forget to close a TAG when composing HTML, the entire layout in the browser can explode, and the Bug is hard to get caught.

Haml is mainly to allow developers to use indentation to compose HTML, easy to never forget the effect of closing the Tag. The following is an example of Haml:

HTML code

1. %h1= "Hello World"

The resulting HTML will grow like this.

HTML code

1. <H1>hello World</H1>

and

Haml Code

1. %ul{:id = "List",: class = "Menu"}
2. %li= "Item 1"
3. %li= "Item 2"
4. %li= "Item 3"

will produce such HTML

HTML code

2. <ul id="list" class="menu">
4. <li>item 1</li>
6. <li>item 2</li>
8. <li>item 3</li>
10. </ul>

Benefits of using Haml to compose HTML

Haml is a markup language that needs to be compile by using indentation writing. It allows you to:

The opportunity to write HTML tags that make the wrong structure
As long as a syntax error, the compilation will not succeed. With this feature, it is easy to block out HTML that would be difficult to debug in a browser because of a TAG structure error.

Easily adjust the layout
In the web design and development phase, to greatly adjust the HTML structure, the Web Designer is also very nerve-racking thing. Because of the large move of HTML, often sometimes caused by: "Cut to a tag" or "changed the beginning TAG, but forgot to turn off the tag" regret.

In Haml, none of these conditions will occur. Because Haml itself belongs to "block structure", "self-close" ". So no matter how it is moved and adjusted, it will almost never explode as long as it fits the indentation.

Disadvantages of using Haml to compose HTML

Why is the markup language so powerful not popular? Instead, it was originally a vice-function of the Sass Scarlet.

The reason lies in the Haml: Not only is the machine compile, it also needs to be compile by the human brain.

HTML itself is a fairly intuitive markup language.

While writing Haml, typography is quite relaxing. But people who take over the maintenance of Haml are usually miserable. Because "very not intuitive."

This is also the Haml of the opposition, the most critical place.

Most people cannot accept the maintenance of "anything" that is not intuitive, plus the need to learn special syntax in writing Haml. Without overwhelming benefits, the average person is not going to invest in technology rashly. This is the main reason why Haml is always a niche technology.

Sass/scss

Pull back to talk about Sass,sass was originally attached to a sub-function in the Haml area. This is why the Sass-convert directive must be installed Haml this gem to use.

Sass's principle is to allow developers to "indent" the way to write maintenance CSS, the same can avoid forgetting to close the TAG and the Big Bang embarrassing.

And because of the structural characteristics of CSS, resulting in Sass and Haml different fate. Most people oppose Haml, because Haml instead causes the HTML to read in the non-intuitive.

and Sass's grammar

Sass Code

1. . Content
2. Margin:2em 0
3. H1
4. Font-size:2em

Produce a

CSS Code

1. . content{
2. Margin:2em 0;
3. }
4. . Content h1{
5. Font-size:2em;
6. }

Instead, the maintenance of CSS has become intuitive.

Many developers who have contacted Sass/scss even think that the way to write a block is when the CSS should be designed when it is invented.

The way to write CSS now has one big drawback: as long as the structure involves nesting or multiple classes, the maintainer has to duplicate the style. Many people think this is a stupid and annoying design.

Built-in Killer features makes it easier to maintain CSS

Sass also offers other handy features such as variables, functions, math, inheritance, mixin ... and other functions.

It is a common thing for designers to change the color of the whole station or to provide more than two designs directly in the Web protyping.

But changing the color of the whole station is a very troublesome thing, because "Find + Replace All", there is no guarantee that the final result will be correct. It's quite possible that you changed all the colors in the CSS that were involved in the link, but found that in the process of replacing it, you accidentally changed the color of the border.

How good it is to use variables to specify the color of a particular style.

Variable (Variables)

Sass Code

1. $border-color: #3bbfce
2. $link-color: #3bbfcf
3. . Content
4. Border-color: $border-color
5. A
6. Color: $link-color

Css

HTML code

1. . content{border-color: #3bbfce;}
2. . Content a{color: #3bbfcf;}

Mathematical
When adjusting the width of the block, you also want to: each time you adjust the width, you can not press the computer every time, and then all manually modified ...

Sass Code

1. . Content
2. Width: (500px/2);

CSS Code

1. . content{width:250px;}

Built-function
When adjusting the color brightness, do you want to make the style darker by changing the CSS directly without having to open the palette again?

Sass Code

1. $color = Darken (# 20%)
2. . Content
3. $color
5. . content{#200;}

These are just a few of the basic features that Sass offers, but it's enough to make web designers stunning. In addition to writing maintenance is very intuitive, it is no wonder why Sass is only Haml in the secondary function, the subsequent momentum is much higher than the Haml itself.

SCSS

What is the difference between the SCSS and the Sass that they look like something similar?

So, Sass used the indentation, for web designers, is still quite not intuitive. And in practice can not directly paste the old CSS directly into the Sass. In fact, there is a certain degree of inconvenience. So Sass evolved and improved syntax, and Sass 3 was later called SCSS (Sassy CSS).

Its syntax with the original CSS syntax completely compatible, using {} to replace the original indentation.

For example, the original

Sass Code

1. . Content
2. Margin:2em 0
3. H1
4. Font-size:2em

Became a SCSS in the

SCSS Code

1. . content{
2. Margin:2em 0;
3. h1 {Font-size:2em}
4. }

In the writing, more incomparable intuitive, but also can put the old CSS directly into, completely no problem! SCSS has added a lot of feature functions about CSS3.

Take my favorite background gradient to be good, the original to do gradient, CSS must be written like this:

SCSS Code

2. #linear-gradient {
4. Background-image:-webkit-gradient (linear, 0% 0, 100% 100%, Color-stop (0, #ffffff), Color-stop (  100%, #dddddd));
6. Background-image:-webkit-linear-gradient (left Top, #ffffff, #dddddd);
8. Background-image:-moz-linear-gradient (left Top, #ffffff, #dddddd);
10. Background-image:-o-linear-gradient (left Top, #ffffff, #dddddd);
12. Background-image:-ms-linear-gradient (left Top, #ffffff, #dddddd);
14. Background-image:linear-gradient (left Top, #ffffff, #dddddd);
16. }

Because you have to support all the Browser.

But in the SCSS, a line is done!

SCSS Code

1. #linear-gradient {@include background-image (linear-gradient (left top, White, #dddddd));}

Summary

Why is Rails 3.1 encouraging the implementation of Sass? Because Sass/scss can greatly save the Web designer/developer to maintain the website program.

And in this chapter, I haven't actually talked about the focus of the Rails 3.1 really integrating Sass: "compass". "compass" is a set of SCSS Framework. It is the most powerful tool. Images

Reproduced SCSS and SASS and HAML and Coffeescript