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 ファイルを導入するために下線を追加する必要はありません
。

なお、下線のあるファイルと下線のないファイルは同じディレクトリに同時に存在することはできません。 たとえば、_colors.scss は color.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の値を設定します