HOME > 開発者向けBLOG > Sass >  プレースホルダーセレクタでクリアフィックスを継承

Technology Note 開発者向けBLOG

Sass

プレースホルダーセレクタでクリアフィックスを継承

こんにちは、ゼノフィ渡部です。

Sassのプレースホルダーセレクタでクリアフィックスを継承する方法をご紹介いたします。

通常の「@extend」の「.(ドット)」では使用していない状態でもセレクタを出力してしまいます。「%」のプレースホルダーセレクタは、そのセレクタ自体(ここでは「clearfix」)はCSSに出力されないので、使用していない場合、「clearfix」セレクタとそのプロパティは出力されません。ただし、プレースホルダーセレクタはSassのバージョンが3.2以上でないと使用できないとされています。

1
2
3
4
5
6
7
8
9
10
11
12

%clearfix {
 
  &:after {
 
    overflow: hidden;
    content: "";
    display: block;
    clear: both;
 
  }
 
}

適用したい要素に「@extend %clearfix;」と記述します。

1
2
3
4
5
6
7
8

// 子要素をフロートしている場合、「@extend %clearfix;」を要素の親に記述。
dl.clear {
  @extend %clearfix;
}
 
ul.clear {
  @extend %clearfix;
}

CSSに出力される結果は下記のようになります。

1
2
3
4
5
6

dl.clear:after, ul.clear:after {
  overflow: hidden;
  content: "";
  display: block;
  clear: both;
}

Sass

1
2
3
4
5
6
7
8

// 子要素をフロートしている場合、「@extend %clearfix;」を要素の親に記述。
dl.clear {
  @extend %clearfix;
}
 
ul.clear {
  @extend %clearfix;
}

CSS

1
2
3
4
5
6

dl.clear:after, ul.clear:after {
  overflow: hidden;
  content: "";
  display: block;
  clear: both;
}

<

>

PAGETOP