2

注: これは、codeschool.com で受講しているオンライン コースの例です ...

したがって、_buttons.scss ファイルにはこのコードがあります

.btn-a {
   background: #777;
   border: 1px solid #ccc;
   font-size: 1em;
   text-transform: uppercase;
}
.btn-b {
   @extend .btn-a;
   background: #ff0;
}
.sidebar .btn-a {
   text-transform: lowercase;
}

そして、application.css の出力 CSS は次のとおりです。

.btn-a,
.btn-b {
   background: #777;
   border: 1px solid #ccc;
   font-size: 1em;
   text-transform: uppercase;
}
.btn-b {
   background: #ff0;
}
.sidebar .btn-a,
.sidebar .btn-b {
   text-transform: lowercase;
}

.sidebar .btn-bK さて、私が持っている質問については... application.css がセクションを取得する理由がわかりません。この例はプレースホルダー セレクターを導入するために使用されているため、理解することは非常に重要な概念だと思います。ご協力いただきありがとうございます。

4

2 に答える 2

2

クラスを拡張すると、基本的に、そのクラスが使用されているすべての場所にセレクターが追加されます。

.class {}
.wrapper .class {}

.extender {
  @extend .class;
}

生成:

.class,
.extender {}
.wrapper .class,
.wrapper .extender {}

この問題を回避する最善の方法は、プレースホルダー セレクターを使用することです。

%class,
.class {}
.wrapper .class {}

.extender {
  @extend %class;
}

生成するもの:

.extender,
.class {}
.wrapper .class {}
于 2013-09-19T21:16:28.193 に答える