In Sass, we can use "@for" to achieve loop operation

CSS, Sass, Scss, and the difference between sass and scss

CSS refers to Cascading Style Sheets

Sass (Syntactically Awesome StyleSheets), is a CSS preprocessing language written by the buby language. It has a strict indentation style like html. It is very different from the CSS writing specification. It does not use curly brackets and semicolons. So it is not widely accepted. Sass is an auxiliary tool to strengthen CSS, which is an extension of CSS. It adds variables, nested rules, mixins, extend, and inline on the basis of CSS syntax. Imports) and other advanced features, these extensions make CSS more powerful and elegant. Using Sass and Sass's style libraries (such as Compass) helps to better organize and manage style files, and develop projects more efficiently. The suffix is ​​.sass.

SCSS (Sassy CSS), a CSS preprocessing language. SCSS is a new syntax introduced by Sass 3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. In other words, any standard CSS3 style sheet is a valid SCSS file with the same semantics. SCSS requires the use of semicolons and curly braces instead of line breaks and indentation. SCSS is not sensitive to blank symbols. In fact, it has the same syntax as css3, and its suffix name is .scss.

 

The relationship between sass and scss

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。 两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。 而scss则和css的规范是一致的。

Insert file

@import "foo.scss"; // will import the file foo.scss 
 @import "foo"; // will import the file foo.scss 
 @import "http://foo.com/bar"; // insert an external file 
 @ import "foo.css"; // Equivalent to the import command of css.

 

Mixer (avoid repeating a pattern repeatedly)

// Use the @mixin command to define a code block. 
　　@mixin left { 
　　　　float : left ; 
　　　　margin-left : 10px ; 
　　} 
    // Use @include command to call this mixin. 
　　div { 
　　　　@include left;
　　 } 
　　
　　// The power of mixin is that you can specify parameters and default values. 
　　@mixin left ($ value: 10px) { 
　　    float : left ; 
　　    margin-right : $ value ; 
　　} 
    // When using, add parameters as needed: 
　　div { 
　　　　@include left (20px);
　　 }

In Sass, we can use "@for" to implement a loop operation. Among them, the @for loop in Sass has 2 ways.

方式1：@for $i from 开始值 through 结束值

方式2：@for $i from 开始值 to 结束值

 

 

@for $i from 1 through 3
{
    .item-#{$i}
    {
        width:(20px * $i);
    }
}

The compiled CSS code is as follows:

.item-1
{
    width:20px;
}
.item-2
{
    width:40px;
}
.item-3
{
    width:60px;
}

 

analysis:

If you change "@for $ i from 1 through 3" to "@for $ i from 1 to 3", the compiled CSS code is as follows:

.item-1
{
    width:20px;
}
.item-2
{
    width:40px;
}

Example 2:

@for $i from 1 through 3
{
    .border-#{$i}
    {
        border:#{$i}px solid red;
    }
}

The compiled CSS code is as follows:

border-1
{
    border: 1px solid red;
}
 
.border-2
{
    border: 2px solid red;
}
 
.border-3
{
    border: 3px solid red;
}