在Sass中，我們可以使用“@for”來實現循環操作

CSS、Sass、Scss，以及sass和scss的區別

CSS 指層疊樣式表 (Cascading Style Sheets)

Sass (Syntactically Awesome StyleSheets)，是由buby語言編寫的一款css預處理語言，和html一樣有嚴格的縮進風格，和css編寫規范有着很大的出入，是不使用花括號和分號的，所以不被廣為接受。 Sass 是一款強化 CSS 的輔助工具，是對 CSS 的擴展，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、繼承(extend)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目， 其后綴是.sass。

SCSS (Sassy CSS)，一款css預處理語言，SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，並且繼承了 Sass 的強大功能。也就是說，任何標准的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。SCSS 需要使用分號和花括號而不是換行和縮進。SCSS 對空白符號不敏感，其實就和css3語法一樣，其后綴名是分別為 .scss。

 

sass和scss的關系

sass和scss其實是一樣的css預處理語言，SCSS 是 Sass 3 引入新的語法，其后綴名是分別為 .sass和.scss兩種。 SASS版本3.0之前的后綴名為.sass，而版本3.0之后的后綴名.scss。 兩者是有不同的，繼sass之后scss的編寫規范基本和css一致，sass時代是有嚴格的縮進規范並且沒有‘{}’和‘；’。 而scss則和css的規范是一致的。

插入文件

 @import "foo.scss"; //都會導入文件 foo.scss
 @import "foo"; //都會導入文件 foo.scss
 @import "http://foo.com/bar";  // 插入外部文件
 @import "foo.css"; // 等同於css的import命令。

 

混合器 Mixin (避免不停地重復一段樣式)

// 使用@mixin命令，定義一個代碼塊。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
    //使用@include命令，調用這個mixin。
　　div {
　　　　@include left;
　　}
　　
　　// mixin的強大之處，在於可以指定參數和缺省值。
　　@mixin left($value: 10px) {
　　    float: left;
　　    margin-right: $value;
　　}
    // 使用的時候，根據需要加入參數：
　　div {
　　　　@include left(20px);
　　}

在Sass中，我們可以使用“@for”來實現循環操作。其中，Sass中的@for循環有2種方式。

方式1：@for $i from 開始值 through 結束值

方式2：@for $i from 開始值 to 結束值

 

 

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

編譯出來的CSS代碼如下：

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

 

分析：

如果將“@for $i from 1 through 3”改為“@for $i from 1 to 3”，則編譯出來的CSS代碼如下：

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

舉例2：

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

編譯出來的CSS代碼如下：

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