1. Use variables

1. Variable declaration and reference:

$light-color:#fff;

border:1px solid $light-color;

Once a variable is declared, it can be referenced directly

2. Don’t differentiate between middle and underscore lines

Light_color is the same variable as light_color.

Second, selector nesting rules

3. Selectors can be nested directly
#content {' 'article {'' h1 {color: #333} '•' p {margin-bottom: 1.4em} ' '} 'aside {background-color: #EEE}' '}Copy the code
The parent selector’s selection identifier &
article a {` `color: blue; ` `&:hover { color: red }` `}Copy the code

Hover attribute is added directly to the parent selector

5. Groups, children, siblings, and other selectors can be nested
.container h1, .container h2, .container h3 { margin-bottom: .8em }
Copy the code

.

Article {' ~ article {border-top: 1px dashed # CCC} '> section {background: #eee}' 'dl > {' •' dt {color: # 333} ` • ` dd} {color: # 555 ` `} ` ` nav + & {margin - top: 0} ` `}Copy the code
6. Attributes can also be nested
nav {` `border: {` `style: solid; ` `width: 1px; ` `color: #ccc; ` `} ` `}Copy the code

3. Import the CSS file

7. Sass local files

Sass local files start with an underscore (_),

Import local files without the suffix, themes/_night-sky.scss

8. Default variable values! default

! Important is the highest level of permission, so use this style as long as it exists

! Default If local files are assigned, use! The default value

$fancybox-width: 400px ! default;Copy the code
Nested imports

Import directly into the selector, which only works locally

// aside {background: blue; color: white; }Copy the code
.blue-theme {
    @import "blue-theme"
}
Copy the code

4. Silent comments

After being parsed to CSS, it will not be displayed in CSS files, /* */

Five, the mixer

@mixin and @include

Define with @maxin+ name and reference with @include+ name

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
Copy the code
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
Copy the code
11. Applicable rules for mixer

Mixers are suitable for use where naming is easy, in which case a mixer is used if the naming is straightforward and there is no confusion.

12. Contents of the mixer

Mixers can contain not only properties, but also selectors directly

@mixin no-bullets { list-style: none; li { list-style-image: none; list-style-type: none; margin-left: 0px; }}Copy the code

If the mixer contains only selectors, it is appropriate to call it at the top of the document, for example to clear the native styles

13. Mixer with parameters

Mixers can also take arguments and pass them with @include

@mixin link-colors($normal, $visited) {color: $normal; &:hover { color: $hover; } &:visited { color: $visited; }}Copy the code
{include link-colors(blue, red, green); } //Sass produces: a {color: blue; } a:hover { color: red; } a:visited { color: green; }Copy the code

Use selector inheritance to optimize compact CSS

13. Extend @extend

One class directly uses the style of another class

If the object to be inherited is complex, only the style of the complex object is inherited, not its own style

The difference between inheritance and mixer

(1) The mixer generally does not have the problem of cascading styles;

Inheritance may have the problem of cascading styles. At this time, the one with the highest weight shall prevail. If the weight is the same, the one with the last appearance shall prevail.

Inheritance does not change the style of the object being inherited

(2) Inheritance generates less code than mixer because inheritance is generally a repeating selector, not a repeating style;

Mixers are typically repetitive and produce a lot of code

14. Do not use descendant selectors to inherit

When using descendant selectors to inherit, the number of selectors will be out of control

.foo .bar { @extend .baz; }
.bip .baz { a: b; }
Copy the code
<! Inheritance can get complicated quickly --> <! -- Case 1 --> <div class="foo"> <div class="bip"> <div class="bar">... </div> </div> </div> <! -- Case 2 --> <div class="bip"> <div class="foo"> <div class="bar">... </div> </div> </div> <! -- Case 3 --> <div class="foo bip"> <div class="bar">... </div> </div>Copy the code

\