CSS、Sass、Scss、およびsassとscssの違い

CSSはカスケードスタイルシートを指します

Sass（構文的に素晴らしいStyleSheets）は、buby言語によって記述されたCSS前処理言語であり、HTMLのような厳密なインデントスタイルを持っています。したがって、広く受け入れられていません。Sassは、CSSを拡張するための補助ツールであり、CSSの拡張に基づいて変数、ネストされたルール、ミックスイン、拡張、インラインを追加します。インポート）およびその他の高度な機能により、これらの拡張機能によりCSSがより強力でエレガントになります。SassとSassのスタイルライブラリ（Compassなど）を使用すると、スタイルファイルの整理と管理が容易になり、プロジェクトをより効率的に開発できます。サフィックスは.sassです。

CSS前処理言語であるSCSS（Sassy CSS）SCSSは、Sass 3で導入された新しい構文で、CSS3と完全に互換性があり、Sassの強力な機能を継承しています。つまり、標準のCSS3スタイルシートは、同じセマンティクスを持つ有効なSCSSファイルです。SCSSでは、改行やインデントの代わりにセミコロンと中括弧を使用する必要があります。SCSSは空白記号の影響を受けませんが、実際にはcss3と同じ構文です。

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 left { 
　　　　float：left ; 
　　　　margin-left：10px ; 
　　} 
    // @includeコマンドを使用して、このミックスインを呼び出します。
　　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 1〜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 1〜3
 { 
    .border-＃{$ i } 
    { 
        border：＃{$ i } px赤一色; 
    } 
}