Use Sass and Compass to write CSS and sasscompass

Use Sass and Compass to write CSS and sasscompass

Recently, I started to use Sass to write CSS Code. At the beginning, although I was not quite used to writing css in chained mode, this is a temporary stage.

If you do not know Sass, you can read previous articles to learn more. Sass mainly has the following features (mainly from here)

On the left side, it indicates the original scss certificate, and on the right side, it indicates the following:
1. Variables changes
Use$Start data

2. Nesting nest structure
It is clear that you know who is the child element, and you don't need to repeat the start of a large batch of duplicates as before.

3. Mixins
In fact, it is used like a function, but it can also contain numeric data.

Set parameter settings

4. Inheritance

Other common functions

1. @ import
You can split all parts of the website_head.scss,_body.scss,_foot.scssPlace the data in the base database. You can use the @ import function to import three logsmain.cssHere

As longmain.scssAdd

@import "base/head"; @import "base/body"; @import "base/foot";

_head.scss,_body.scss,_foot.scssThese cases won't be converted into css, and the case name should be replaced_Starting from the beginning!

2. Count

3. coloring

Lighten (red, 50%) // brightens 50% darken (blue, 50%) // fades 50%

 

For more functions, see Official comments

Other record!

More explicit css layout style

In the expanded partition Mode

sass --watch --style expanded style.scss:style.css

The css output from the outputs is as follows:

#main { color: #fff;  } #main p { width: 10em; } ...

In the compressed merge Mode

sass --watch --style compressed style.scss:style.css

The css output from the outputs is as follows:

#main{color:#fff; line-height: 19.5px;"> 

How to identify debug?

1. Firefox FireSass for Firebug

2. Renew again

sass --watch --debug-info style.scss:style.css

# Enable the debug mode (remember to compile the css output from the original deployment first)

You can see it in Firebug later.

You can also directly renew your http://sass-lang.com/try.html on the hosts.

In fact, sass/scss is just an example of making a response to css, but today we need to compile the css that matches the words in front of each browser, you still have to renew it yourself.@maxinSet-moz,-webkit,-o,-msWhat if you encounter gradient that needs to be customized with css3? Can I change the data size again? It will crash! Because I have tried it, and I will release it later! Because there is a larger Compass to help! Let's take a look at how powerful Compass is!

First, install Compass,

Gem update -- system # update gem install compass # install Compass

Create a Compass project

compass creat myproject

The setting will generate the above operators, and then you canconfig.rbSet the css, sass, images, and other information settings! Then, access

compass watch　　

At this time, you can start to renew yourscssThanks, after saving your memory, compass will immediately upload css to your preset resource. In this way, you can presscommand + cCancel. You can watch it again when you try again.

Let's take a look at the convenience of Compass.

reset css@import "compass/reset"; 

In this way, the css of the reset will be ready for you! Super convenient!

Common css3 coding angles

@import "compass/css3"; .box{ @include border-radius(5px); } 

As longimport "compass/css3"Then, you can use all the content of css3, such as border-radius, box-shadow, gradient... And so on. The usage is@includeIn fact, compass helps you prepare@mixin, You only need to use it. compass helps you generate css corresponding to each browser at the same time, the result of the above line:

-moz-border-radius: 5px; -webkit-border-radius: 5px;  -o-border-radius: 5px;  -ms-border-radius: 5px; -khtml-border-radius: 5px;  border-radius: 5px;

All css products are ready for you, so you don't need to write them all over again. css with so many different types will only be more complex, in particular, I do not like css attention, re-encoding, re-encoding, and re-encoding. I want to open css again, 1 ~ More than 2 thousand lines! Zookeeper is really tiring! In addition, the sass feature is the nested structure, which makes the whole css clear!

Css3 zookeeper

. Box {@ include background (linear-gradient (lighten (red, 20%), red);/* linear regression */}

All the schedulers can be processed in one row! Wherelighten(red, 20%)Is to use the sass highlight feature.

Sprite

I think... Sprite is the pain point of css designer! I think it's very difficult. I still need to calculate the seat level. When I change my seat level, I need to calculate the seat level again! Css again, and a change may trigger the whole body!

Wow ~ Now, Compass is all done for you! Compass is so big that it is possible to have enough data at once! As long as the images to be merged are placed under the same resource, compass will automatically generate another joint venture and set the base level at the same time.

@ Import "icons /*. png "; @ include all-icons-sprites; //" icons "next to" all-"indicates that the resource name is unknown. icons-sprite ,. icons-facebook ,. icons-twitter ,. icons-yahoo {background: url('icons-s0859518ac7.png ') no-repeat ;}. icons-facebook {background-position: 0 0 ;}. icons-twitter {background-position: 0-32px ;}. icons-yahoo {background-position: 0-64px ;}

More compass sprite tutorial and settings: http://compass-style.org/help/tutorials/spriting/

Other features: http://compass-style.org/reference/compass/

What about debug?

Output_style =: compressed # css when setting sass_options = {: debug_info => true} # debug

Startconfig.rbSet the parameters, add the above text, and re-generate css. Firebug can see that the style is shown in that line, and sass debug is not compatible with the security statement.

Sass & Compass

Let's take a look at this example of real-time projection film introduction!