Ignite UI for Angular
コンポーネント 使用開始

bem

#

variable bem--sep-elem public コードを表示 open_in_new

例

要素セパレーターを '__' から '-' に変更します。

$bem--sep-elem: '-';


@include b(block) {
   @include e(element) {
     background: blue;
   }
}


// 生成された CSS
.block-element { background: blue; }
#

variable bem--sep-mod public コードを表示 open_in_new

例

修飾子セパレーター を '--' から '---' に変更します。

$bem--sep-mod: '---';


@include b(block) {
   @include m(modifier) {
     background: red;
   }
}


// 生成された CSS
.block---modifier { background: red; }
#

variable bem--sep-mod-val public コードを表示 open_in_new

例

修飾子値セパレーターを '-' から '_' に変更します。

$bem--sep-mod-val: '_';


@include b(block) {
   @include m(modifier, value) {
     background: red;
   }
}


// 生成された CSS
.block--modifier_value { background: red; }
#

function bem-selector public コードを表示 open_in_new

完全 BEM セレクターを生成します。

例

ブロックを含みます。

$selector: bem-selector(block); // returns .block
例

要素とブロックを含みます。

$selector: bem-selector(block, $elem: elem); // returns .block__elem
例

ブロック、要素と要素修飾を含みます。

$selector: bem-selector(block, $elem: (elem, mod); // returns .block__elem--mod
例

ブロックとブロック修飾を含みます。

$selector: bem-selector(block, $mod: mod) // returns .block--mod
例

ブロックおよび複数のブロック修飾子を含みます。

$selector: bem-selector(block, $mods: (mod-1, mod-2)) // returns .block--mod-1.block--mod-2
例

ブロック修飾を続くブロック サブ要素を含みます。

$selector: bem-selector(block, $m: mod, $e: elem); // returns .block--mod .block__elem
パラメーター
名前 型 デフォルト 説明
$block *
String
- 文字列ブロックの名前。必須。
$elem
String|List
null サブ要素の名前。`$mod` が存在しない場合は、 $block と結合されます。$mod が存在する場合、それは `$block--$mod` の下にネストされます。
$mod
String|Map
null ブロック修飾。
$mods
List
null ブロック修飾のリスト。
#

function elem public コードを表示 open_in_new

BEM 要素セレクター文字列を返します。修飾子が指定されている場合は、要素セレクターに追加されます。

例
$selector: elem('button', 'icon') // returns '.button__icon'
$selector: elem('button', 'icon', 'big') // returns '.button__icon--big'
パラメーター
名前 型 デフォルト 説明
$block *
String
- ブロックの名前。
$elem *
String
- 要素の名前。
$mod
String
null 修飾の名前。オプション。
#

function mod public コードを表示 open_in_new

ブロックの BEM 修飾子セレクター文字列を返します。

例
$selector: mod('button', 'primary') // returns '.button--primary'
$selector: mod('card', 'outlined') // returns '.card--outlined'
パラメーター
名前 型 デフォルト 説明
$block *
String
- ブロックの名前。
$mod *
String
- 修飾の名前。
#

mixin bem-block public コードを表示 open_in_new

クラス セレクターとして展開します。このミックスインの主な目的は、 BEM ブロックの開始を明確に示すことです。

例
@include bem-block(block) {
   background: green;
}


// 出力
.block { background: green; }
パラメーター
名前 型 デフォルト 説明
$block *
String
- ブロックの名前。
エイリアス
#

mixin bem-elem public コードを表示 open_in_new

コンテキストに基づいて BEM 要素セレクターになります。 ブロックの中で、ルート レベルの `.block__elem` を作成します。 Mod または疑似セレクターの中に入れ子にされた `.block--mod .block__elem` を作成します。 $Mod を含む場合、ブロック セレクターに追加されます。複数の $mods はサポートしません。

例
@include bem-block(block) {
   @include bem-elem(element) {
     background: blue;
   }
}
// Return
.block__element { background: blue; }
パラメーター
名前 型 デフォルト 説明
$elem *
String
- サブ要素の名前。
$m *
String
- 修飾の名前。
$mod *
String
- `$m` のエイリアス。
エイリアス
#

mixin bem-mod public コードを表示 open_in_new

オプションの除外を含む複数のブロック修飾子のセレクターを生成します。

例
@include bem-block(card) {
  @include bem-mods(large, primary, (not: outline)) {
    // Applies to .card--large, .card--primary
    // but not when .card--outline is present
  }
}
パラメーター
名前 型 デフォルト 説明
$mods *
List
- 修飾子名のリスト。
$options *
Map
- オプションの構成マップ。
$options.not *
String|List
- :not() で除外する修飾子。
エイリアス
#

mixin bem-mods public コードを表示 open_in_new

block--modifier.[block--modifier...] .block__el になります。 このミックスインはブロックまたはブロック要素に 2 つ以上の修飾は同時に適用されるときに役に立ちます。

例
@include bem-block(block) {
   @include bem-mods(error, warn) {
     position: absolute;
   }
}
// Return
.block--error,
.block--warn {
    position: absolute;
 }
パラメーター
名前 型 デフォルト 説明
$mods *
List
- 修飾のリスト。
エイリアス
#

mixin bem public コードを表示 open_in_new

完全 BEM ルールを生成します。

例

ブロックを含みます。

@include bem(block) {
  background: blue;
};


// 出力
.block {
  background: blue;
}
例

要素とブロックを含みます。

 @include bem(block, $elem: elem) {
   background: blue;
 }


// 出力
 .block__elem {
   background: blue;
 }
例

ブロック、要素と要素修飾を含みます。

@include bem(block, $elem: (elem, mod)) {
  background: blue;
}


// 出力
.block__elem--mod {
  background: blue;
}
例

ブロックとブロック修飾を含みます。

@include bem(block, $mod: mod) {
  background: blue;
}


// 出力
.block--mod {
  background: blue;
}
例

複数の修飾子を持つブロックを含みます。

@include bem(block, $mods: (mod-1, mod-2)) {
   background: blue;
 }


 // 出力
 .block--mod-1.block--mod-2 {
   background: blue;
 }
例

ブロック修飾を続くブロック サブ要素を含みます。

@include bem(block, $m:mod, $e:elem) {
  background: blue;
}


// 出力
.block--mod .block__elem {
  background: blue;
}
パラメーター
名前 型 デフォルト 説明
$block *
String
- 文字列ブロックの名前。必須。
$elem
String|List
null サブ要素の名前。`$mod` が存在しない場合は、 $block と結合されます。$mod が存在する場合、それは `$block--$mod` の下にネストされます。
$mod
String|Map
null ブロック修飾。
$mods
String|Map
null ブロック修飾のリスト。

ドキュメントを検索