Skip to content

Instantly share code, notes, and snippets.

@shirokuro331 shirokuro331/gist:4648973
Last active Dec 11, 2015

Embed
What would you like to do?
Sass の placeholder について

placeholder について

Sass 3.2 になってからの新機能らしい。
簡単に言うと css ファイルに書きだされない extend って感じ。

書き方は下記。
valiables は『$』だけど、placeholder は『%』を頭につける。

%redtext-redbackground{
    background: #f00;
    color: #f00;
}

.sample1{
    @extend %redtext-redbackground;
}

.sample2{
  @extend %redtext-redbackground;
  margin: 0 auto;
  padding: 20px;
}

って書くと、コンパイルされた css は

.sample1, .sample2 {
    background: #f00;
    color: #f00; }
  
.sample2 {
    margin: 0 auto;
    padding: 20px; }

となる。

%redtext-redbackground で定義した内容は css で @extend しないと表示されない。
extend は使わなかったとしても書きだされてたので、時には無用なものもあったと思う。例えば clearfix とか。

逆に placeholder 使えるんなら extend 使う必要ってあるんかな?

参考:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.