Sass の基本 (8)_html/css_WEB-ITnose

@import
Sass は、すべての css @ ルールと、「ディレクティブ」とも呼ばれるいくつかの Sass 固有のルールをサポートしています。これらのルールには、以下で詳しく説明するように、Sass のさまざまな
関数があります。
@import
Sass は CSS の @import ルールを拡張して、SCSS と Sass
ファイルをインポートできるようにします。 インポートされたすべての SCSS および Sass ファイルはマージされ、単一の CSS ファイルに出力されます。 さらに、インポートされたファイルで定義された変数またはミックスインをメイン ファイルで使用できます。
@importはファイル名を元にインポートされます。 デフォルトでは、Sass ファイルを検索して直接インポートしますが、場合によっては @import ルールを使用して CSS にコンパイルされます: /
で始まる ファイル名が url() の場合
ローグアップインインで紹介されます。 拡張子がない場合、Sass は同じ名前で .scss または .sass 拡張子を持つファイルを検索してインクルードしようとします。 例:
@import "foo.scss";
または
@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);
一つの@で複数のファイルを導入することも可能輸入。例：
角丸ファイルとテキストシャドウファイルの２つを紹介します。

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

例えば、_colors.scssというファイルがあるとします。 この方法では、_colors.css ファイルは生成されず、次のようにすることもできます:
@import "colors"; // _colors.scss ファイルを導入するために下線を追加する必要はありません
。

ネストされた @import

ほとんどの場合、トップレベルファイルで @import を使用するだけで済みますが、CSS ルールや @media ルールに @import を含めることもできます。


@media

@media ディレクティブと CSS の使用ルールは単純ですが、CSS ルールにネストできる別の機能があります。 JS のバブリング関数に少し似ています。 簡単な例:
.
}
Compiled;
.sidebar{ width:300px; }
@media screen and (orientation: landscape){
.sidebar{
幅： 500px;
}
}
@media もネスト可能 @media:
@media screen{
.sidebar{ $media :screen;
$feature:-webkit-min-device- コンパイル済みCSS ：
@media screen and (-webkit-min-device-pixel-ratio;1.5){
.sidebar{
width:500px;
}
}

@extend

sassの@extendを使ってselectを拡張していますあるいはプレースホルダー、例:
.error{
border:1px }
. strictError{
background-color:#fdd;
}
.intrusion, .seriousError .intrusion{
background-image: url("/image /hacked.png");
}
@extend は単なる拡張クラス セレクターではなく、.special.cool、a:hover、a.user[href^="http:/" などの任意のセレクターを拡張することもできます。 /"] たとえば、
.hoverlink{
@extend a:hover;
}
a:hover{
text-decoration:underline;
}
コンパイル:
a:hover, .hoverlink{
.hoverlink{
@extend a:hover;
}
. comment a.user:hover{
font-weight:bold;
}
コンパイル済みCSS .comment a.user:hover, .comment .user .hoverlink{
font-weight:bold ;
}
複数の拡張
複数の場所のスタイルを継承したい場合は、 @extend を使用して複数のセレクターまたはプレースホルダーのスタイルを継承できます。
.error{
border:1px #f00;
background-color:#fdd;
}
.attention{
font-size：3em;
background-color:#ff0;
}
.seriousError{
@extend .error;
@extend .attention;
border-width：3px;
}
コンパイル済みcss
.error、seriousError{
border-width:3px;
}
拡張シングルセレクター
事前に知っていますその %placeholder は、@extend 表示呼び出しを使用しないとスタイル コードを生成しません。セレクターでプレースホルダーを使用する場合も同様です。たとえば、次のコード
#context a%extreme{
Font-weight:bold; extend 呼び出し後にコードが生成されます:
.notice{
@extend %extreme;
}
コンパイル済みCSS
#context a.nontice{
color:blue;
font-weight:bold;
font-size:2em;
}

@at-root

@at-root は文字通り要素から飛び出すことを意味します。複数のネストされたセレクターがあり、特定のセレクターをポップアウトしたい場合は、@at-root を使用できます。簡単な例を見てみましょう。 CSS
.a .b .c{
color: yellow; } .d{
Color; green;
}

@debug


を使う場合は @debug を使います。サス以来コードがコンパイルエラーになる可能性がある場合、コマンドターミナルはプロンプトを出力します 設定したバグ:
@debug 10em +12em;
と出力されます... Sassのデバッグ。例:
@mixinadjust-location($x,$y){
@if Unitless($x){
@warn "#{$x} をピクセル単位と仮定します";
$x: 1px *$x ;
}
@if Unitless($y){
@warn "#{$y} をピクセル単位と仮定します"
$y: 1px *$y:
}
position:relative; $ y;
}

@error

@errorと@warn、@debugの機能は全く同じです。
@ error "#{$x} の値を 10 以内の数値に設定する必要があります";
}
}
.texst{
@include error(15); } コンパイル時:
が必要です7行目5列目の「10以内の数値」に15の値を設定します