Sass@rule_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Sass@rule_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:32:55

オリジナル

1296 人が閲覧しました

@import
Sass は、すべての CSS3 @ ルール と、「ディレクティブ」とも呼ばれるいくつかの Sass 固有のルールをサポートします。
Sass は、CSS @import ルールを拡張して、SCSS および Sass ファイル をインポートします。インポートされたすべての SCSS および Sass ファイルは マージ され、単一の CSS ファイルが出力されます。また、インポートしたファイル内で定義されている変数やミックスインをメインファイルでも使用することができます。
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);

ログイン後にコピー

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

rrrええ

を通じて紹介することもできます@import 複数のファイル 。例:

rrree

は、round-corners と text-shadow の 2 つのファイルを導入します。

インポートする必要がある SCSS または Sass ファイルがありますが、それを CSS ファイルにコンパイルしたくない場合は、そのファイルの前に アンダースコア を追加できます。コンパイルを避けるためのファイル名。これにより、Sass に CSS ファイルにコンパイルしないよう指示されます。その後、ファイル名の前にあるアンダースコアを省略して、通常どおりファイルをインポートできます。

たとえば、_colors.scss というファイルがあるとします。この方法では、_colors.css ファイルは生成されません また、次のようにすることもできます:

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

ログイン後にコピー

を実行して、

_colors.scss ファイルをインポートします。

注意: 下線のあるファイルと下線のないファイルは、同じディレクトリに同時に存在できません。たとえば、_colors.scss は color.scss と共存できません。

ネストされた @import

ほとんどの場合、最上位ファイルで @import を使用するだけで十分ですが、CSS ルールや @media ルールに @import を含めることもできます。

インポートされるスタイルファイル `example.scss` に次のようなコードが含まれているとします:

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

ログイン後にコピー

次に、次のように引用します:

@import "colors";//不用加下划线

ログイン後にコピー

コンパイルされた CSS:

.example { color: red;}

ログイン後にコピー

@media Sass の
@media ディレクティブは、CSS 使用ルールと同じくらい単純ですが、別の機能があります。 は CSS ルールにネストできます。 JS のバブリング機能に似ていますが、スタイル内で @media ディレクティブを使用すると、外側にバブリングします。来看一简单例：

#main { @import "example";}

ログイン後にコピー

编译出来：

#main .example { color: red;}

ログイン後にコピー

@media も可嵌套@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 時間，还プラグイン

#{}:

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

ログイン後にコピー

コンパイル済み CSS:

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

ログイン後にコピー

@extend を使用できます。 Sass の
@extend は、選択範囲を拡張するために使用されますデバイス または プレースホルダー 。例:

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 }

ログイン後にコピー

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

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

ログイン後にコピー

拡張セレクター:

@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 }

ログイン後にコピー

@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
@debug 在 Sass 中是用来调试的，当你的在 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