SCSS

(これはCSS Layoutマスターノートをエンコードしていません.)

variables

_variables.scssを作ってください.
styles.scssをインポート!
variablesで$title、$bgなどを指定します.
style.scssで自由に使えます.

Nesting

.box {
margin-top: 20px;
}

.box h2 {
color: blue;
}

.box button {
color: red;
}

.box: hover{
background-color:green;
}

Nestingを使用して、上記のコードを以下に示すことができます.
html構造を知るのはずっと簡単です!可読性の高いコードになります!

.box{
  marin-top: 20px;
  &:hover{
    background-color:green;
  }
  h2{
    color: blue;
  }
  button{
    color: red;
  }
}

Mixins

scss機能の再利用を支援します.

が反応して独自のタグ(コンポーネント)を生成した場合、mixinはscssで独自の設計テンプレートを作成するプロセスと考えられる.

mixinという名前のファイルを作成したら!

@mixin link($color){
  text-decoration: none;
  display: block;
  color: $color;
}

前述したように、
次のように使用します.

@import "_mixins"

a {
  margin-bottom: 10px;
  &:nth-child(odd){
    @include link(blue);
  }
  &:nth-child(even){
    @include link(red);
  }
}

複数の応用に同様であるが,異なる障害物を与える場合に非常に有用である.

mixinを使用して上記のコードを記述することもできます...
私はあなたがどうしてプログラミング言語のように変えることができると言ったのか知っています.

extends

同じコードを繰り返したくない場合に使用します.

mixinは、状況に応じて同じコードを異なる符号化したい場合に用いられる.

名前の通りextendは、他のコードを拡張したり再利用したりするときに使用できます.

%を使用!

%button{
  border-radius: 7px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 5px 10px;
  background-color: peru;
  color: white;
  font-weight: 500;
}

@import "_buttons"

a{
  @extend %button;
  text-decoration: none;
}

button{
  @extend %button;
  border: none;
}

Mixin @content

$minIphone: 500px;
$maxIphone: 690px;
$minTablet: $minIphone + 1;
$maxTablet: 1120px;

@mixin responsive($device) {
  @if $device == "iphone" {
    @media screen and (min-width: $minIphone) and (max-width: $maxIphone) {
      @content;
    }
  } @else if $device == "tablet" {
    @media screen and (min-width: $minTablet) and (max-width: $maxTablet) {
      @content;
    }
  } @else if $device == "iphone-l" {
    @media screen and (max-width: $minIphone) and (max-width: $maxIphone) and (orientation: landscape) {
      @content;
    }
  } @else if $device == "ipad-l" {
    @media screen and (min-width: $minTablet) and (max-width: $maxTablet) and (orientation: landscape) {
      @content;
    }
  }
}

@import "_mixins";

h1 {
  color: red;
  @include responsive("iphone") {
    color: yellow;
  }
  @include responsive("iphone-l") {
    font-size: 60px;
  }
  @include responsive("tablet") {
    color: green;
  }
}

awesome scss mixins
awesome scss mixins