Sass@ルール

@importSassは、すべてのCSS 3の@ルール、およびいくつかのSass固有のルールをサポートし、「ディレクティブ(directives)」とも呼ばれています.SassはCSSの@importルールを拡張し、SCSSとSassファイルを導入できるようにします.導入されたSCSSファイルとSassファイルはすべて統合され、単一のCSSファイルが出力されます.また、インポートされたファイルで定義された変数やmixinsは、プライマリファイルで使用できます.Sassは現在のディレクトリの下に他のSassファイルを探します.Rack、Rails、またはMerb環境の場合はSassファイルディレクトリです.または:load_pathsオプションまたはコマンドラインで--load-pathオプションを使用して、追加の検索ディレクトリを指定します.@importはファイル名に基づいて導入されます.デフォルトでは、Sassファイルを探して直接導入しますが、いくつかの場合、CSSの@importルールにコンパイルされます.

ファイルの拡張子が.css.

ファイル名がhttp://で始まる場合.

ファイル名がurl()の場合.

@importにメディアクエリが含まれている場合.

このようなことがない場合、拡張子は.scssまたは.sass、この名前のSassまたはSCSSファイルが導入されます.拡張子がなければ、Sassは持っているものを見つけてみます.scssまたは.sass拡張子の同名ファイルを導入します.例:

1 @import "foo.scss";

または

@import "foo";

両者ともfooを導入する.scssファイル、

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

次のようにコンパイルされます.

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

1つの@importで複数のファイルを導入することもできます.例:

@import "rounded-corners", "text-shadow";

rounded-cornersとtext-shadowの2つのファイルが導入されます.
SCSSファイルやSassファイルを導入する必要がありますが、CSSファイルにコンパイルすることを望んでいません.この場合、ファイル名の前に下線を付けることができ、コンパイルを避けることができます.これはSassにCSSファイルにコンパイルしないように伝えます.そして、いつものようにこのファイルを導入することができ、ファイル名の前の下線を省略することもできます.
たとえば、_というファイルがあります.colors.scss. これでは生成されませんcolors.cssファイルです.そして、このようにすることもできます.

@import "colors";//      

導入するcolors.scssファイル.
注:同じディレクトリに下線と下線のない同名ファイルを同時に存在させることはできません.例えば、_colors.scssはできないscssが併存する.
ネスト@import
ほとんどの時間は、最上位ファイルで@importを使用するだけでいいですが、CSSルールと@mediaルールに含めることもできます.
導入するスタイルファイルを想定します.scss`ファイルには、このようなコードが含まれています.

.example { color: red;
}

次に、次のように参照します.

#main { @import "example"; }

コンパイルされたCSS:

#main .example { color: red;
}

 
 
 
 
@mediaSassの@media命令はCSSの使用規則と同じように簡単ですが、CSS規則にネストできる別の機能があります.JSの泡立ち機能に似ていますが、スタイルで@mediaコマンドを使用すると、外に泡立ちます.簡単な例を見てみましょう.

1 .sidebar {
2  width: 300px;
3  @media screen and (orientation: landscape) { 4  width: 500px;
5     }
6 }

コンパイル:

1 .sidebar {
2  width: 300px; 
3 }
4 @media screen and (orientation: landscape) {
5  .sidebar { 6  width: 500px;
7     }
8 }

@mediaは@mediaをネストすることもできます:

1 @media screen {
2  .sidebar { 3  @media (orientation: landscape) { 4  width: 500px;
5         }
6  } 7 }

次のようにコンパイルされます.

1 @media screen and (orientation: landscape) {
2  .sidebar { 3  width: 500px; 
4     } 
5 }

@mediaを使用する場合は、プラグイン#{}を使用することもできます.

1 $media: screen; 2 $feature: -webkit-min-device-pixel-ratio; 3 $value: 1.5; 4 @media #{$media} and ($feature: $value) {
5  .sidebar { 6  width: 500px;
7     }
8 }

コンパイルされたCSS:

1 @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
2  .sidebar { 3  width: 500px;
4     }
5 }

 
 
 
 
@extendSassの@extendは、セレクタまたはプレースホルダを拡張するために使用されます.例:

 1 .error {
 2  border: 1px #f00;
 3 }
 4 .error.intrusion {
 5  background-image: url("/image/hacked.png");
 6 }
 7 .seriousError {
 8  @extend .error;  9  border-width: 3px;
10 }

次のようにコンパイルされます.

1 .error, .seriousError {
2  border: 1px #f00;
3 }
4 .error.intrusion, .seriousError.intrusion {
5  background-image: url("/image/hacked.png"); 
6 }
7 .seriousError {
8  border-width: 3px; 
9 }

拡張セレクタ:
@extendはクラスセレクタを拡張するだけでなく、任意のセレクタを拡張することもできます.special.cool,a:hover,またはa.user[href^="http://"],たとえば:

1 .hoverlink {
2  @extend a:hover;
3 }
4 a:hover {
5  text-decoration: underline;
6 }

コンパイル:

1 a:hover, .hoverlink {
2  text-decoration: underline;
3 }

もう一つ複雑な点を見てみましょう

1 .hoverlink {
2  @extend a:hover;
3 }
4 .comment a.user:hover {
5  font-weight: bold;
6 }

コンパイルされたCSS:

1 .comment a.user:hover, .comment .user.hoverlink {
2  font-weight: bold;
3 }

複数の拡張
複数の場所のスタイルを継承するスタイルを設定すると、@extendを使用して複数のセレクタまたはプレースホルダのスタイルを継承できます.

 1 .error {
 2  border: 1px #f00;
 3  background-color: #fdd;
 4 }
 5 .attention {
 6  font-size: 3em;
 7  background-color: #ff0;
 8 }
 9 .seriousError {
10  @extend .error; 11  @extend .attention; 12  border-width: 3px;
13 }

コンパイルされたCSS:

 1 .error, .seriousError {
 2  border: 1px #f00;
 3  background-color: #fdd;
 4 }
 5 .attention, .seriousError {
 6  font-size: 3em;
 7  background-color: #ff0;
 8 }
 9 .seriousError {
10  border-width: 3px;
11 }

拡張単一セレクタ
%placeholderは@extend表示呼び出しを使用しないとスタイルコードが生成されないことを知っています.では、セレクタでプレースホルダを使用するのと同じです.たとえば、次のコードがあります.

1 #context a%extreme {
2  color: blue;
3  font-weight: bold;
4  font-size: 2em;
5 }

このコードは、呼び出さない前にコードを生成しません.@extend呼び出しが可能になってからのみコードを生成します.

1 .notice {
2  @extend %extreme; 3 }

コンパイルされたCSS:

1 #context a.notice {
2  color: blue;
3  font-weight: bold;
4  font-size: 2em;
5 }

extendはセレクタシーケンスを継承できません
%を使用して、セレクタのみを継承するために構築します.
 
 
@at-root@at-rootは文字通りルート要素から飛び出します.セレクタが多層をネストした後、セレクタを飛び出したい場合は@at-rootを使用します.簡単な例を見てみましょう.

 1 .a {
 2  color: red;
 3  .b {  4  color: orange;
 5  .c {  6  color: yellow;
 7  @at-root .d {  8  color: green;
 9             }
10  } 11  } 12 }

コンパイルされたCSS

 1 .a {
 2  color: red;
 3 }
 4 .a .b {
 5  color: orange;
 6 }
 7 .a .b .c {
 8  color: yellow;
 9 }
10 .d {
11  color: green;
12 }

 
 
 
 
@debug@debugSassではデバッグに使用され、Sassのソースコードで@debugコマンドを使用すると、Sassコードのコンパイルエラーが発生すると、コマンド端末から設定したプロンプトBugが出力されます.

@debug 10em + 12em;

出力:

Line 1 DEBUG: 22em

 
 
 
@warn@warn@debug機能と同様に、Sassのデバッグを支援します.次のようになります.

 1 @mixin adjust-location($x, $y) {
 2  @if unitless($x) {  3  @warn "Assuming #{$x} to be in pixels";  4  $x: 1px * $x;  5  }  6  @if unitless($y) {
 7  @warn "Assuming #{$y} to be in pixels";  8  $y: 1px * $y;  9  } 10  position: relative; left: $x; top: $y; 11 }

 1 @mixin adjust-location($x, $y) {
 2  @if unitless($x) {//unitless     ，       “  ”  3  @warn "Assuming #{$x} to be in pixels";  4  $x: 1px * $x;  5  }  6  @if unitless($y) {
 7  @warn "Assuming #{$y} to be in pixels";  8  $y: 1px * $y;  9  } 10  position: relative; left: $x; top: $y; 11 } 12 .botton{
13  @include adjust-location(20px, 30); 14 }

コンパイルされたCSS:

1 .botton {
2  position: relative;
3  left: 20px;
4  top: 30px;
5 }

 
 
 
 
@error
@errorと@warn,@debug機能は同じです.

 1 @mixin error($x){
 2  @if $x < 10 {  3  width: $x * 10px;
 4     }@else if $x == 10 {
 5  width: $x;
 6     }@else {
 7  @error "    #{$x}    10    ";  8  }  9 } 10 .test {
11  @include error(15); 12 }

コンパイル時:
15値を10以内に設定する必要がありますon line 7 at column 5