sass :@ function , @ mixin , placeholder , @ extends

最近のプロジェクトでは、カスタムフレームワークを作成する機会があり、その構造に取り組んでいる間、自分の関数を追加し、mixinsを作成しています.
ここで我々は行く.
関数は任意のsassデータ型の単一の値を返すコードのブロックです.
以下の関数は、私が常に使っているものです.ピクセルサイズをとり、レムに変換します.

@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return #{$rem-size}rem;
}
*I could easily just use numbers but
people in the past have had the 
habit of using px for all of their font sizes.

Mixinは関数と非常によく似ていますが、二つの間の主な違いは、CSSスタイルに直接コンパイルされるSASSコードのMIXINE出力ラインであり、関数はCSSプロパティの値になることができる値を返します.

@mixin font-size($size) {
  font-size: calculate-rem($size);
}
mixin is taking $size as an argument to pass into
the calculate-rem function to evaluate into rems

mixinを使用する場合、このように使用する必要があります.
別の方法として、この関数を直接クラスで使うこともできます.

.my-class {
    font-size: calculate-rem(16px);
}

プレースホルダはクラスセレクタに非常に似ていますが、ピリオド()開始時にパーセント文字(%)が使用されます.プレースホルダセレクタには、生成されたCSSでは表示されない追加プロパティがあり、それらを拡張するセレクタだけが出力に含まれます.

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

@ extendsでは、クラスをお互いにプロパティのセットを共有できます.クラスを拡張するセレクタは、拡張子のクラスの隣にセレクタを入れて、コンマ区切りのリストになります.

.foo {
  color: black;
  border: 1px solid black;
}

.bar {
  @extend .foo;
  background-color: red;
}

以上がコンパイルされます:

.foo, .bar {
  color: black;
  border: 1px solid black;
}

.bar {
  background-color: red;
}

PlaceHolderは@ Extensionsで使用されることを意図しています.したがって、通常、一組の属性が一握りの要素にわたって使用されることを認識している場合、プレースホルダを作成してプロパティを拡張できます.

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
.foo {
  @extend %icon;
  color: black;
  border: 1px solid black;
}

.bar {
  @extend %icon;
  background-color: red;
}

これは以下のようになります:

.foo, .bar {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.foo{
  color: black;
  border: 1px solid black;
}

.bar {
  background-color: red;
}

これは、これらのSASS機能についての簡単な説明です.私は、より進んだミックスとロジックで第2の部分をすることができる十分な要求で.私はあなたの人々は、この便利な場合は、任意の質問は、コメントや直接に到達する無料感じていると思います.
助けてくれ.