Sass&compass Study Notes (i)

Variables can be used in 1.sass

The variable name begins with a $ symbol and can contain all the characters that can be used as CSS class names, including underscores and Medium Dash. visible, the underscore is also a character that can be named, which is different from many other languages. Examples of use of variables:

{    color: $company-blue;}  {    background-color: $company-blue;}

In this example, we define a $compay-blue variable that holds the #1875e7 color, so when you need to change the value of the color, you only need to $compay-blue the value. 2. use nesting to quickly write multi-level selectors take a look at the following section of code:

{float: Right}  {float: left;}  {color: #111}{font-weight: bold;}

When we write the style of the hierarchy selector, many of the parent classes are duplicated. If nested with sass, you can write the following form to make the code more concise:

{    float: right;     li {        float: left;         A {            color: #111;         } {font-weight: bold;            }                     }}

the &.current above is equivalent to Li.current. If Li changes to another element tag in the future, the current class within this element still hits the style here. 3. Using mixed @mixin For example, when we write the overall layout of the page, the traditional CSS code is as follows:

{    float: right;}  {    float: left;     Margin-right: 10px;}  {    margin-top: 1em;}  {    float: left;     Margin-right: 10px;}

We found that the Float:left and margin-right in the above code were used in two places, so it was repeated two times. If you do it with sass, you can write it in the following form:

{Li {float: left; margin-right: 10px;}　　 { @include horizontal-list; Float: right;}　　 { @include horizontal-list; Margin-top: 1em;}

More convenient is the combination of the mixer and the variable, which is the strength of the mixer, that is, the ability to determine the style used according to the parameters, so that the mixer is more reusable. For example, if you want to modify the spacing between each entry in the horizontal list, how to use the mixer to implement it quickly, see the following code:

the default value for the {///$spacing is 10px, and this value is used if no parameter is passed; Li {float: left; 　　margin-right: $spacing;　　}{ @include horizontal-list;//use $spacing default value, i.e. 10px; Float: right;}　　 { @include horizontal-list (20px);//Give $spacing a new value of 20; Margin-top: 1em;}

4. use selectors to inherit @extend to avoid duplicate attributes in the example above, use theThe mixer is able to effectively avoid duplication in a handwritten style sheet. However, because the rules are mixed into other classes, it is not possible to completely avoid duplicates in the output style sheet. Because the output of the CSS file size is important, so sass introduced another slightly more complicated way, so that the output of the CSS completely avoid duplication. Selector inheritance means that a selector can reuse all the styles of another selector without repeating the style attributes. Take a look at the following example, which is a warning message for a form error:

 #f00; # FDD;　　}.error.intrusion {font-size:1. 2em; Font-weight:bold;}.　　Baderror {@extend. Error; Border-width:3px;}

In the code above, with the selector inheritance, you can let. Barerror inherit the parent class. Error, which is the reuse of all the styles of the parent class. The resulting CSS file is compiled as follows:

{ Border: 1px #f00; background: #fdd;}　　 { font-size: 1.2em;  Font-weight: bold;}  { border-width: 3px;}

5. using a placeholder selector (class name prefix%) in selector inheritance In the above example, it is meaningful to define both the error and the Baderror class, because both need to be used in HTML, but sometimes the parent class does not need to be used in HTML. The placeholder selector was introduced in Sass 3.2, which supports not compiling the parent class that is not used in the output HTML while inheriting with the selector, such as the Sass Code, as follows:

{ margin: 0; padding: . 5em 1.2em; text-decoration: none; cursor: pointer;}　　 { @extend%button-reset; Color: White; background: #blue;}　　 { @extend%button-reset; Color: White; background: red;}

The placeholder, as the name implies,The selector that inherits the%button-reset occupies the%button-reset in the output CSS .location, the CSS code for compiling the output is as follows:

 .save,. Delete  { margin :  0 ;  padding : . 5em 1.2em ;  Text-decoration :  none ; :  pointer ;} .save  { color :  white ;  background :  #blue ;} .delete  { color :  white ;  background :  red ;} 

The placeholder selector saves the usual styles in one place without affecting any one of the class names, so you can use them with confidence. Of course, if a placeholder selector is not inherited, the style will not be compiled into CSS to reduce the useless style of the stylesheet in the production environment, making it smaller.

Sass&compass Study Notes (i)