Sass構文の基礎

一.sassファイルはブラウザで直接認識することはできません.cssファイルに編集し、コマンドラインに命令を入力する必要があります.

sass main.scss main.css

この命令はmain.scssファイルをmainにコンパイルする.cssファイルにあります.
二.ネストselector sass構文では、1つのselectorにネストして別のselectorを定義できます.たとえば、次のようにします.

.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}

コンパイル後、以下のcss定義に等価です.

.parent {
  color: blue;
}

.parent .child {
    font-size: 12px;
}

三.CSS属性値をネストし、属性値が共有するアルファベットの後に「:」記号を付けます.

.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

は、以下のcss定義に等しい.

.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}

四.定義変数sass構文では、$記号を使用して変数を定義します.たとえば、次のようにします.

$translucent-white: rgba(255,255,255,0.3);

五.Numbers,Strings,Boolean,nullなどのデータ型に加えてsass構文は集合(lists)と図(map)のデータ型を追加し,
listsデータは、カンマで区切るなど、スペースまたはカンマで区切ることができます.

$font-family:Helvetica, Arial, sans-serif;

スペースの区切り:

$standard-border: 4px solid black;

注意:listをカッコで囲んで、コレクションのセットを作成できます.
mapsはlistsとよく似ていますが、mapsのデータがキー値ペアである以外は、次のようになります.
(key1: value1, key2: value2); 注意:keyはlistまたは別のmapであってもよい
六.Maxin
定義Maxin:パラメータを定義し、パラメータにデフォルト値を設定できます.パラメータはlistまたはmapの形式で入力できます.たとえば、次のようになります.

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}

使用:selectorプロパティを定義する括弧に次の文を追加します.

 @include stripes($college-ruled-style...);

  ，       ：

$college-ruled-style: ( 
    direction: to bottom,
    width-percent: 15%,
    stripe-color: blue,
    stripe-background: white
);

七.string interpolation 
string interpolationでは、Mixinを定義するなど、文字列の間に変数として存在する別の文字列を挿入できます.

@mixin photo-content($file) {
  content: url(#{$file}.jpg); //string interpolation
  object-fit: cover;
}

使用:

.photo { 
  @include photo-content('titanosaur');
  width: 60%;
  margin: 0px auto; 
  }

は、次のcssファイルに等価です.

.photo { 
  content: url(titanosaur.jpg);
  width: 60%;
  margin: 0px auto; 
}

八.Maxinでは「&」selectorを使用できます.この記号は、Maxinがincludeされたselectorを表します.たとえば、Maxinを定義します.

@mixin text-hover($color){
  &:hover {
      color: $color; 
  }

}

 
   
  
 使用： 
   
   
  
.word { //SCSS: 
    display: block; 
    text-align: center;
    position: relative;
    top: 40%;
    @include text-hover(red);
  }
は、次のcssファイルに等価です.
   
   
.word{ 
    display: block;
    text-align: center;
    position: relative;
    top: 40%;
  }
  .word:hover{
    color: red;
  }
  
   
  
   
 .each    ：
  
   
  
   
$list: (orange, purple, teal);

//Add your each-loop here
@each $item in $list {
  .#{$item} {
    background: $item;
  }
}
  
  
  .for    ： 
   
   
   
@for $i from 1 through $total {
  .ray:nth-child(#{$i}) {
    background: blue;
   }
}
  
  
   .if    ： 
  
 
  
    ：
 
   
   
width: if( $condition, $value-if-true, $value-if-false);
  
  
    ：
 
   
   
@if($suit == hearts || $suit == spades){
   color: blue;
 }
 @else-if($suit == clovers || $suit == diamonds){
   color: red;
 }
 @else{
   //some rule
 }