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

属性値を設定したい場合は、文字列挿入を使用してセレクターを構築することもできます。
@mixingenerate-sizes($class,$small,$medium,$big){
.#{$class}-small {font-size:$small;}
.#{$class}-medium{ font- size:$medium}
.#{$class}-big{ font-size:$big;}
}
@include gencerate-sizes("header-text",12px,20px,40px);
コンパイル済みcss １つ目これにより、Sass 変数の補間を簡単に削除できます。 -#{$size};
}
.login-box{
@include set-value(big);
}
ulous Me in in in error style.scss(5行目:未定義変数: "$ margin-".)
したがって、 #{ }構文はどこでも利用できるわけではなく、ミックスインで
を呼び出すことはできません }
$flag:"status";
.navigation{ D @include update-#{$ flag}}
上記のコードは、CSS にコンパイルされるときにもエラーを報告します。
エラー style.scss (LINE7: Invalid CSS AFTER "... nclude Updated-": Expected "}" ,was"#{$flag};"
幸いなことに、@extend で補間を使用できます。例:

}
.selected- status{
font-weight:bold;
}
$flag:"status";
.nacigation{
@extend $updated -# {$fla g};
@extend .selected-#{$flag};
}
コンパイル済みcss
.navigation{
margin-top:20px;
background:#f00;
.selected-status, .navigation{
Font-weight:bold;
ccotz' by Sass 方法は２つあります
１. CSS風のコメントメソッドで、「/*」で始まり「*/」で終わる
２. JavaScript風のコメントメソッドは、「/」を使います/"
//プレースホルダーを定義する
%mt5 {
margin-top: 5px;
}
/*プレースホルダーを呼び出す*/
.box {
@extend %mt5;
}
コンパイル済みcss
.box{
margin-top:5px;
}
/*プレースホルダーを呼び出す*/

データ型
SassとJavaScriptの言語型にも独自のデータ型があります。
数値: 1、2、13、10px など
文字列: 引用符で囲まれた文字列または引用符で囲まれていない文字列 ("foo"、'bar'、baz など)
色: 青、#04a3f9、rgba( 255,0、 0,0.5);
ブール値: true、false など;
空の値: null;
値リスト: スペースまたはカンマで区切られています (1.em 1em 0.2em Helvetica、Arial、sans -serif)。

SassScrip は、Unicode 範囲などの他の css プロパティ値 (プロパティ値) もサポートしています。重要な発言。ただし
Sass はこれらの属性値を特別に扱うことはなく、常に引用符で囲まれていない文字列として扱います。


String
SassS は 2 つの文字列タイプの CSS をサポートしています:
引用符で囲まれた文字列 ("Lucida Grande"、'http://sass-lang.com' など);
引用符で囲まれていない文字列 (引用符で囲まれていない文字列) (sans など) -セリフボールド。
#{ } 補間ステートメント (interpolation) を使用すると、引用符で囲まれた文字列は引用符で囲まれていない文字列にコンパイルされます,
これにより、ミックスイン内でセレクター名を引用符で囲むのが便利になります。
@mixin firefox-message($selector){
body.firefox-message($selector){
content:"こんにちは、Firefox ユーザー!";
}
}
@include fire fox-message(".header");
コンパイル:
body.firefox .header:before(content"hi,Firefox users!";)
値リスト
in me in in in in� body.firefox .header:before(content "こんにちは、Firefox ユーザー!" ;
Font-face: Helvetica, Arial, sans-serif
上記のようにスペースまたはカンマで区切られた一連の値。
Sassのリスト関数(Sass list function)は値リスト関数を与える(Sassのアップグレードについて説明します)
1.nth関数(nth関数)は値リストの項目に直接アクセスできます;
2.join関数(ジョイン関数))複数の値リストを結合できます。
3.append 関数は値リストに値を追加できます。 4.@each ルール (@each ルール) は値リスト スタイルの各項目に値を追加できます。
値リストには別の値リストを含めることができます。たとえば、1px 2px, 5px 6px は、1px 2px と 5px 6px の 2 つの値リストを含む値リストです。
内側と外側の値リストが同じ分離方法を使用する場合、内側の層を括弧で囲む必要があるため、(1px 2px) (5px 6px) と書くこともできます。
値のリストが CSS にコンパイルされるとき、CSS ではこれが許可されていないため、Sass は括弧を追加しません。
() を使用して、CSS に直接コンパイルできない空のリストを表すことができます。たとえば、font-family: () をコンパイルすると、Sass はエラーを報告します。
値リストに空の値リストやnull値が含まれている場合、1px 2px () 3pxや1px 2px null 3pxのようにnull値はコンパイル時にクリアされます。

追加

CSSでできる演算のうち、今のところ実行できるのはcalc()関数だけですが、Sassでは演算は基本的な機能の一つにすぎません 様々な数学的な計算が可能です。 (1)加算
加算演算はSassにおける演算の一種で、変数や属性で行うことができます。例:
.box{
width: px +8in;
}
cssをコンパイルする
.box{
width; 788px;
}
異なるタイプのユニットを運ぶと、Sassでの計算でエラーが報告されます
例えば：
. box{
width:20px +1em;
} または、「互換性のない単位: 'em' と 'px'」というエラー
.content{
width:$full-width - $sidebar-width;
}
コンパイルされたCSSは以下の通りです .content{ width:760px} 同様に、動作中に異なるタイプのユニットに遭遇した場合もコンパイルでエラーが報告されます
$full -width:960px;
.content{
width:$full -width - 1em;
}
コンパイラは「互換性のない単位: 'em' と 'px'」エラーを報告しました。

乗算

Sassの乗算演算は、前に紹介した加算や減算の演算とは少し異なりますが、複数の単位(em、px、%など)もサポートできます
例: .box{
width: 10px * 2px ;
}
コンパイル中に「20px*px は有効な CSS 値ではありません。」というエラーメッセージが報告されます
上記の例は次のように変更できます: .box{ width:10px *2;
}
コンパイル済み css
.box{
width:20px;
}
割り算
dth:100px / 2;
}
()を追加するだけです:
.box{
width:(100px / 2)
}
コンパイルします
.box{
width:50px;
}
}
}
.box{
width:100px / 2 + 2in;
}
コンパイルしたcss
.box{
width:242px;
}
sassの除算演算では、変数を除算する際に、 「/」記号も自動的に除算として認識されます。 th；100px；
}
.list{
width: $width / $nums;
}
コンパイル済みcss
.item{
width：100px;
}
.list{
width:100px;
}

変数計算

Sassでは要素に数値を使うだけでなく、計算に変数を使うこともできます
例:
$content-width:720px;
$content-width:220px;
$ gutter:20px;
.container{
width:$conter- width + $sidebar- width + $gutter;
margin: 0 auto;
}
コンパイル済みcss
.container{
width:960px; margin: 0 自動。 }
数値演算

Sass演算では数値演算がより一般的であり、数値には先ほど紹介した加算、減算、乗算、除算が含まれます。
例:
.box{
width:((220px + 720px)-11*20)/12;
}
コンパイルされたcss
.box{
width:60px;

Color演算

すべての算術 すべて操作はカラー値をサポートしており、区分的に実行されます。つまり、赤、緑、青の各色セグメントは個別に計算されます。
think: css is: p{ color:#050709;
}
算術演算は数値と色の値をまとめて演算することもできますし、分割して演算することもできます。
p{
color:#010203 * 2;
}
計算式は、01 * 2 =02、02 *2 = 04、03*2 = 06です
p{
color:#020 306;

キャラクター操作
Sass では、文字列は加算記号「+」を使用して連結できます。 例えば
$content:"Hello" + "" +"Sass!";
.box:before{
content:"#{$content}";
}
コンパイルしたcss
.box:before{
content: " Hello Sass!";
}
変数内で文字列連結操作を実行することに加えて、+ を使用して文字列を直接連結することもできます。また、つまり、引用符で囲まれた文字列は + 記号の左側にあります）、
結果は引用符で囲まれた文字列になります。 同様に、引用符で囲まれていない文字列が引用符で囲まれた
文字列に追加される場合 (引用符で囲まれていない文字列は + 記号の左側にあります)、結果は引用符で囲まれていない文字列になります。