このCSSセレクタはできそこないだ。明日またきてください。最高の(略)

CSSセレクタ

なんかCSSのセレクタをなんやらするらしいですよ。
利便性を感じられたら追記します。現状まったく何も感じない・・・

selector-nest($selectors...)

指定したセレクタ名を入れ子にさせた、新しいセレクタを返す。
便利さがちっとも伝わってきません。なんだこれ。

@mixin nested-context($nested) {
  @at-root #{selector-nest(&, $nested)} {
    @content;
  }
}

.header, .footer {
  .nav a {
   .text{
      color: red;
    }
  }
}
/*
.header .nav a .text,
.footer .nav a .text 
{
  color: red; 
}
*/

// ちなみに
.header, .footer {
  .nav a {
    .texta {
      color: red;
    }
  }
}
/*
.header .nav a .texta,
.footer .nav a .texta {
  color: red; 
}
*/