sass - 同様のコードをコンパスsass関数の関数に変換する方法は？

Question

scssファイルにいくつかの一般的な変数を追加したいと思います。たとえば、margin-bottom：10pxのmgb10などです。パディング用のpdl20-左：20px;
私の方法は非常に愚かです。sass関数を使用してコードを改善する方法。

Answer 1

bookcaseyはOPの質問に素晴らしい答えを出しましたが、正しい質問がされたとは確信していません。これが、サンプルコードで描いたシナリオの問題と@extend、おそらくそれが正しい選択ではない理由です。

ここでこれらの小さな男から始めましょう、彼らは私たちがかなり頻繁に使用する可能性が高いもののように見えます：

%mgt10 { margin-top: 10px }
%mgb10 { margin-bottom: 10px }
%mgl10 { margin-left: 10px }
%mgr10 { margin-right: 10px }

私たちはコーディングを開始し、それらを頻繁に使用することになります。

.body { @extend %mgt10; @extend %mgb10; @extend %mgr10; @extend %mgl10; font: 12px/1.4 sans-serif }

.error { @extend %mgt10; color: red; padding: 10px; }

.cool-button { @extend %mgt10; border: 1px solid }

hr.awesome { @extend %mgt10; color: blue }

これは私たちの短いSassファイルが生成するものです（316バイト）：

.body, .error, .cool-button, hr.awesome {
  margin-top: 10px; }

.body {
  margin-bottom: 10px; }

.body {
  margin-left: 10px; }

.body {
  margin-right: 10px; }

.body {
  font: 12px/1.4 sans-serif; }

.error {
  color: red;
  padding: 10px; }

.cool-button {
  border: 1px solid; }

hr.awesome {
  color: blue; }

あなたは実際にあなたのCSSをそのように書くことはないでしょう？ @extendこの場合、は実際に必要な数よりもはるかに多くのセレクターを生成しているため、あなたに不利に働いています（そして、特定のクラスを拡張するセレクターが多くなり、拡張されるクラスの行数が少なくなるほど悪化します-30個のセレクターを想像してください延長%mgt10、50はどうですか？）あなたはDRYを極限まで追求し、その結果、Sass側の読みやすさとCSS側の簡潔さをあきらめました。

別のルートを試してみましょう：

$default-gutter-size: 5px;

@function gutter($width, $size: $default-gutter-size) {
    @return $width * $size;
}

.body { margin: gutter(2); font: 12px/1.4 sans-serif }

.error { margin-top: gutter(2); color: red; padding: gutter(2); }

.cool-button { margin-top: gutter(2); border: 1px solid }

hr.awesome { margin-top: gutter(2); color: blue }

基本的に同じCSSを取得しますが、余分なセレクターがすべてなくても、省略形を使用できます（追加のボーナスとして、本当に必要な場合はマージンではないものに関数を使用できます）（228バイト） ：

.body {
  margin: 10px;
  font: 12px/1.4 sans-serif; }

.error {
  margin-top: 10px;
  color: red;
  padding: 10px; }

.cool-button {
  margin-top: 10px;
  border: 1px solid; }

hr.awesome {
  margin-top: 10px;
  color: blue; }

誤解しないでください。@extendすばらしいですが、1または2だけでなく、かなりの数の属性を持つクラスを拡張する場合に最適です。CSSプリプロセッサの使用の一部は、最良の結果を得るためにどの機能をいつ使用するかを知ることです。

Answer 2

@forこれは、ディレクティブを使用してすべてのプレースホルダーセレクターを生成するSassミックスイン（Scssに変更できます）です。

=shorthander($property: margin, $shorthand: mg)
  @for $i from 0 through 4
    $multiple: $i*5
    %#{$shorthand}#{$multiple}
      #{$property}: $multiple*1px

+shorthander()
+shorthander(margin-top, mgt)
+shorthander(margin-right, mgr)
+shorthander(margin-bottom, mgb)
+shorthander(margin-left, mgl)

div
  @extend %mgt20

デモ