Sassの基礎(1)_html/css_WEB-ITnose

CSS はいくつかの非常に単純なステートメントの組み合わせです。単純なステートメントには必然的に繰り返しや冗長なものが多くなり、プログラミング言語変数や制御ステートメントなどの従来の
高度な機能がないため、CSS の作成は非効率になることがよくあります。検索と置換、および変更または書き込みのために大量のコピーが必要になります。 Sass は
を使用してこれらの欠点を補い、開発をより便利かつ迅速にし、管理を容易にします。
1. Sass と SCSS の違い。
Sass は拡張子として「.sass」を使いますが、SCSS は拡張子として「.scss」を使います
Sass は厳密なインデント文法で書かれています。中括弧 ({}) とセミコロン (;) を除いて、SCSS の構文は CSS 構文と非常によく似ています。色：$プライマリカラー$ font-stack：helvetica、sans-serif;
font: 100% Helvetica, sans-serif;
color: #333;
}

ページを使用するときは、引き続き .css ファイルを参照します。
Sass でコンパイルされたスタイルは、さまざまなスタイルで表示できます。
1. 入れ子の出力方法nested
例： nav {
ul {
margin: 0;
}
li { display: inline-block; }
display : block; 0;
パディング: 0;
list-style: none; }
nav li {
display: inline-block; }
text-decoration: none; }
2. 出力モードを展開します
例: nav {
margin: 0,

display: block;
padding: 6px 12px;
text-decoration: none; }
コンパイルスタイル:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
3. コンパクトな出力メソッドcompact
loglogue: margin: 0;
padding : 0;
list-style: none;
}
li { display: inline-block; }
a {
}
}
Compiled style:
nav ul { margin: 0; list-style: none ; }
nav li { display: inline-block; }
nav a { display: block; 6px 12px; text-decoration: none }
例: nav {
ul {
margin: 0;
li {display: inline-block; }

text-decoration: none;
}
}
コンパイルスタイル:
nav ul{margin:0;padding:0;list-style:none} nav li {display:inline-block}nav a{display: block ;padding:6px 12px;
text-decoration:none}
変数の宣言は "$" で始まります
$width:300px;
"$": 変数宣言子
width : 変数名
300 px 変数値
グローバル変数とローカル変数
セレクタ、関数、混合マクロ…の外で定義された変数がグローバル変数です
.block {
Color: $color;//グローバル変数の呼び出し
}
em {
$ color: red;//defineローカル変数
a {
color: $color;///ローカル変数を呼び出す
}
}
span {
color: $color;/// グローバル変数を呼び出す
}
コンパイル後:
// CSS
.block {
color: orange;
}

color: orange;
}

$color はグローバル変数、要素内で定義された変数、例えば $color:red; はローカル変数です。
いつ変数を宣言するか？
1. 値は少なくとも 2 回繰り返し出現します

2. 値は少なくとも 1 回更新される可能性があります

3. この値のパフォーマンスはすべて変数に関連しています (偶然ではありません)。
Sassには3種類のネストがあります:
ulousatch >> 属性ネストing
>> 疑似クラスの入れ子
color:red;
}
header nav a {
color :green;
}
sass
nav {
a {
header & {
color:green;
}
Nested-attribute Nesting
Sass は属性のネストを提供しており、css はいくつかの属性を持っています プレフィックスは同じです。
例えば、使用するスタイル:
.box{
border-top:1px Solid red;
border-bottom:1px Solid green;
}
Sassでは次のように書くことができます:
.box {
border: {
上: 1px ソリッドレッド;
下: 1px ソリッドグリーン;
}
}