1. mixer
If there are several small similar style (for example, the same color and font), then use a variable to unify handle this situation is a very good choice for your entire site. But when your style has become more complex, you need to reuse large chunks of code style large segment of independent variables is no way to deal with this situation. You can achieve a large segment style through the reuse of sass mixer.
Mixture @mixin identifier defined. CSS @ looks like other identifiers, such as @media or @ font-face. This identifier to a large section of styles give a name, so you can easily reuse by reference the name of this style. SASS bottom of this code defines a very simple mixer, the purpose of cross-browser rounded borders.
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}Then you can use this mixer in your style sheet by @include, placed anywhere you want. So call will @include style mixer extracted from their place in @include is called. If, as written below:
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成:
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}Properties border-radius-moz-border-radius and -webkit-border-radius in all .notice in rounded-corners from the mixer. This section describes the use of a mixer to avoid duplication. By using parameters, you can use the mixer to your style universal style of pulled out, and then easily reused in other places. In fact, blender handy, you might accidentally overuse. A large number of reuse may lead to the formation of the style sheet is too large, leading to slow loading. So the first thing we will discuss mixer usage scenarios, to avoid abuse.
2. When using a mixer
A mixer, can be easily shared styles in different parts of the style sheet. If you find yourself constantly repeating some style, it should be pulled out of this style, constructed an excellent mixer, especially this style itself is a logical unit, for example, there is a group put together property sense.
To determine whether a set of attributes should be combined into a mixer, a rule of thumb is whether you get along with a good name for this mixer. If you can find a nice short name to describe these attributes modified form, such as rounded-corners fancy-font or no-bullets, it is often possible to construct a suitable mixer, if not, this time to construct a mixed It is not appropriate.
Mixer in some ways a lot like css class. All allow you to give a large segment of the style name, it may generate doubts in the choice of which to use when. The important difference is that the class name is applied in the HTML file, while the mixer is used in the style sheet. This means that the class name has semantic meaning, and not just a showcase of description to describe how to produce results after a css rules are applied.
In the previous example, .notice is a semantic class names. If you notice an html element has a class name, it indicates that the use of the html element: a reminder to show users information. rounded-corners of the mixer is to demonstrate that describes the ultimate visual style that contains it css rules, especially border angle of visual style. Mixers and classes with the use of write clean html and css, because the use of semantic class name can also help you avoid repeating mixer. To keep your html and css readability and maintainability, in the process of writing styles have to bear in mind the difference between the two.
Sometimes the only property on the mixer is not enough, the good news is, sass css rule also allows you to put in a mixer