scss Start Basics

In one project, the style is an integral part of, and for a complete project is to have a reference tone. In the case of small changes in demand for the project, you can write things like these color values directly in the css. However, if you encounter a frequent change of leadership or party, it will become very miserable.

Therefore, the use of pre-compiled language in the project it is very efficient and simple. At present the project on the use of scss pre-compiled language.

First, distinguish between: Sass and SCSS is actually the same thing, we usually have to call Sass, The difference between the following two points:

Different file extensions, Sass is ".sass" suffix extension, and SCSS is ".scss" suffix extension
Different grammatical way of writing, Sass is indented strict grammar rules to write, without braces ({}) and semicolon (;), and SCSS grammar and writing our CSS syntax notation is very similar.　　This is the Chinese official website .

1, variable

We can put into a variable reference tone, or some commonly used to color. such as:

. 1 $ bg_color: #ededed; // background color 
2 $ text_color: # 333; // text color 
. 3 $ margin_bottom: 40upx; // bottom margin of each entry

2, the use of variable

.content {
    background-color: $bg_color;
    flex-direction: column;
    color: $text_color;
}

When the reference tone change, or change the overall style, I do not go one by one, directly change the value of a variable, then recompile it.

3, nested rules

The original wording:

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list {
    width: 400upx;
    color: #ff0;
}

.content .list image {
    width: 60upx;
    height: 60upx;
}

scss nested rule of writing:

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        width: 400upx;
        color: #ff0;
        
        image {
            width: 60upx;
            height: 60upx;
        }
    }
}

4, the parent identifier & selector

It may be mainly used for some pseudo class selector. Look at an example:

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        
        &:hover {
            background-color: #ff0;
            color: #fff;
        }
        
    }
}

After compilation:

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list:hover {
    background-color: #ff0;
    color: #fff;
}

another example:

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        
        a &:hover {
            background-color: #ff0;
            color: #fff;
        }
        
    }
}

Compiled:

.content {
    background-color: #ededed;
    flex-direction: column;
}

a .content .list:hover {
    background-color: #ff0;
    color: #fff;
}

It can be seen that the parent represented & overall selector.

5, the nested group selector directly look at the code

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        
        .name, .age, .sex {
            margin-bottom: 40upx;
        }
        
    }
}

Compiled:

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list .name,
.content .list .age,
.content .list .sex {
    margin-bottom: 40upx;
}

6, sub-combinations and selected with the selector layer composition:>, +, -

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        
        ~ .name {
            color: #ff0;
        }
        + .age {
            font-size: 40upx;
        }
        > .sex {
            margin-bottom: 40upx;
        }
        
    }
}

Compiled:

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list~.name {
    color: #ff0;
}

.content .list+.age {
    font-size: 40upx;
}

.content .list>.sex {
    margin-bottom: 40upx;
}

7, nested property

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        border: {
            style: solid;
            width: 2px;
            color: #f00;
        }
    }
    
    .title {
        border: 1px solid #4cd964 {
            left: 2px;
            bottom: 10px;
        }
    }
}

Compiled:

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list {
    border-style: solid;
    border-width: 2px;
    border-color: #f00;
}

.content .title {
    border: 1px solid #4cd964;
    border-left: 2px;
    border-bottom: 10px;
}

8, the default variable values! Default

$text_color: #333 !default;

Phrase means: If the variable is declared assignment, and it values its statement, otherwise use the default values.

This is generally used to deal with, whether scss file will be introduced variables of your life, and if so, with the introduction of, if not, use the default # 333; somewhat similar to the fallback behavior js variable declaration time.

9, within the rules introduced scss file

　　Illustration, called a _blue-theme.scsslocal file, as follows:

aside {
  background: blue;
  color: white;
}

The introduction of file:

.blue-theme {@import "blue-theme"}

Compiled:

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

10, mixer @mixin

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

use:

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

Compiled:

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

Mixer can contain not only property, but also contain rules.

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

use:

ul.plain {
  color: #444;
  @include no-bullets;
}

Compiled:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

11, pass parameters to the mixer

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

use:

a {
  @include link-colors(blue, red, green);
}

Compiled:

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

When you @include mixer, sometimes it may be difficult to distinguish between what is the meaning of each parameter, the parameter is between what kind of order. To solve this problem, scssit allows the syntax $name: valuespecified value for each parameter form. This form of transmission parameters, parameter order will not have to care about, and only need to ensure that no missing parameters:

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

12, default parameter values

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

13, using the selector inheritance to streamline css, use: @extend

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

Not only inherited .error own, it also inherited and related

// .seriousError .error inherited from the style 
.error A {   // applied to A .seriousError 
  Color: Red; 
  font -weight: 100 ; 
} 
h1.error { // applied to hl.seriousError 
  font-size:. 1 .2rem; 
}

Understanding of these even simple entry, at least have to get your css saves time and effort much better, Tell me what you want in-depth study on Internet cafes and more. Behind learning to do summary.

Guess you like