sass3. Variable

前回の授業ではsassとscssを比較し、sassの特徴を簡単に理解しました.
今回はsassの特徴、すなわち文法について詳しくご紹介します
1.変数
:JavaScriptで変数を宣言してグローバル変数またはゾーン変数として使用するように、SASSでよく使用される部分(フォントの形状や色など)を変数として指定し、これらの変数の値のみを変更することで、CSSを簡単に制御できます.
SASSは変数の定義に$記号を使用します.

$font-first: NtSans, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color

上記のコードでは、$font-firstと$primary-colorという変数が使用されていることがわかります.
コードがcssにコンパイルされると、次のコードのように置き換えられることがわかります.

body {
 font: 100% NtSans, sans-serif;
 color: #333;
}

2.ネスト
HTML符号化では、ネストされた表現に多くのサブセレクタしか使用できません.
はい.たとえばnavラベルを使用してナビゲーションを作成する場合、ulとliというラベルセレクタ
はい、この2つのセレクタはnavのサブセレクタです.

  <nav>
   <ul>
   <li><a href="link1">Menu1</a></li>
   <li><a href="link2">Menu2</a></li>
   <li><a href="link3">Menu3</a></li>
   </ul>

CSSプロパティを上のHTMLタグ部分に適用してみましょう.

nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 5px 3px;
margin: 10px 20px;
text-decoration: none;
color: #999;
}
nav ul li a:hover {
border-bottom: 1px dotted #999;
}

上記のcssコードをsassで簡略化しましょう.

$default-color: #999;
$navhover-color: #ffb069;
nav {
   ul {
   list-style: none;
     li {
     display: inline-block;
       a {
         display: block;
         padding: 5px 3px;
         margin: 10px 20px;
         text-decoration: none;
         color: $default-color;
         &:hover {
         border-bottom: 1px dotted $navhover-color;
         color: $navhover-color;
         }
       }
     }
   }
}
 

これにより、サブ構造はカッコでネストできます.そして選択者の中で&
これは自分のことを言っているのです.上のコードでは&:hoverはnavul lia:hoverと同じです.
3.一部/インポート
文がかなり長く複雑になるので、文を分ける必要があります.このとき文を分ける
「部分化」といいます.分割されたSASS文の一部を1つの文にインポートし、コンパイル中に完全なCSSファイルに変換します.
分割を行う場合、最も重要なのはファイル名です.分割されたファイル名は、前に追加する必要があります(ベースライン参照).この部分が部分化されたファイルであることがわかりますしたがって、ファイル名の前に参照下図を追加すると、CSSファイルにコンパイルされません.
htmlから適切なcssファイルをロードする必要がなく、インポートする必要がある場合は、この機能を使用します.

@import "_var","_mixin","_function";

上記のコードに示すように、共通変数を宣言するファイルvar.scssを使用して、各cssプロパティのブラウザバージョン間mixinを一度にロードできます.scssは、値を変換したり、重複コードを減らしたりするfunctionです.scssファイルに分けて@importにロードします.また、これらのファイルは拡張子を省略したり、リアルタイムモニタリングシステムから削除したりすることができます.
4.ミキシング(mixin)
CSSのプロパティ、特にCSS 3のプロパティで使用されている部分については、ブラウザメーカーには独立したプレフィックス(Vendor Prefix)があり、混入はブラウザ固有のプレフィックスを処理したり、重複したプロパティを簡単に処理したりするのに役立ちます.これらの接頭辞は、「クロム」、「ハエ」、「炎狐」、「IEシリーズ」、「CSS 3」の順に並べたものが望ましい.mixinを使用して接頭辞のcssプロパティを定義した場合は、@includeでロードできます.
では、コードで例を理解しましょう.

  @mixin border-radius($radius) {
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     -ms-border-radius: $radius;
     border-radius: $radius;
    }
    
  .box {
   @include border-radius(10px);
  }

上記のコードに示すように、各ブラウザのborder-radius接頭辞を@mixinで整理し、@includeにロードする場合は、次の手順に従います.
@mixin読み込む名前(パラメータ){
-webkit-プロパティ:パラメータ;
-moz-プロパティ:パラメータ;
-o属性:パラメータ;
プロパティぷろぱてぃ:パラメータぱらめーた;
}
このように定義してロードするとき.
プログラム{@includeが読み込む名前(値);
変数の値は1つですが、複数のプロパティがあります.
変数名の後ろにある3つの点(...)追加

@mixin box-shadow($value...) {
 -webkit-box-shadow: $shadows;
 -moz-box-shadow: $shadows;
 box-shadow: $shadows;
}
.test{
 @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}