sass grammar

Sass description:

As we all know, cssis not a programming language. He could not like jsand pythonthat have the ability to deal with logic, and even import other cssfiles in style can do. And Sassin order to solve cssthese problems. He allows you to use variables, nested rules  mixins, import and many other features, and is fully compatible csssyntax. SassFiles can not be directly recognized pages, finished Sassafter, but also need specialized tools into cssto use.

Sass file extension:

SassThere are two file extension, one scss, one sass. Different name suffix corresponding syntax is not the same. Here we use the scssextension. Including mentioned later Sassgrammar, it is also scssgrammar extension.

Sass basic syntax:

Comment:

Support /* comment */and // 注释in two ways.

Nesting:

SassSyntax allows nesting. For example, #mainthe next there is a class .header, then we can write the following form:

#main{
    background: #ccc;
    .header{
        width: 20px;
        height: 20px;
    }
}

 

Write them more intuitive. To see that this .headeris #mainunder.

Refers to the parent selector &( ):

Sometimes, nested sub-selectors, you need to use the parent selector, then this time can &be expressed. Sample code is as follows:

a{
    font-weight: bold;
    text-decoration: none;
    &:hover{
        color: #888;
    }
}

 

Define the variable:

Yes, you heard wrong. In Sassthe variables can be defined. For some of the more common values, we can store up by variable later when you want to use it directly on it. Define variables using $symbols. Sample code is as follows:

$mainWidth: 980px;
#main{
    width: $mainWidth;
}

 

Operations:

In Sasssupport operations. For example, now has a total width of the containers are 900, to put an average of three boxes inside, then we can set their width through the variable. Sample code is as follows:

$mainWidth: 900px;
.box{
    width: $mainWidth/3;
}

 

@import syntax:

In cssthe @importonly import cssfiles, and has a great influence on the performance of the site. And Sassin @importthe full realization of the set is its own mechanism. He can simply copy the code of the specified file to the local import. Sample code is as follows:

@import "init.scss";

 

@extend syntax:

Sometimes we have a selector, you may need another selector style, then we can extendbe directly assigned selector style join. Sample code is as follows:

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

 

@mixin syntax:

Sometimes some style code. We may take a lot of places. Then we can define him as i mixin. When you need to use a direct reference to it. Sample code is as follows:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

 

If you want to use the rest of the mixintime, it can @includebe included. Sample code is as follows:

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

 

@mixinYou can also use parameters. Sample code is as follows:

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

 

Then later in includetime, we need to pass a parameter. Sample code is as follows:

p { 
    @include sexy-border(blue, 1px); 
}

 

A more detailed tutorial:

A more detailed tutorial can refer to: http: //sass.bootcss.com/docs/sass-reference/.