【Sass + Compass】セレクタの省略について

Question

実際のコーディングでは、下記の例だと#headerとは別にパーツごと(.headerLink以下など)で記述していますが、ふとこういう書き方ってできるのかな？と疑問がわきまして。

#header {
	margin: 0;
	padding: 0;

	.headerLink {
		margin: 5px;
		padding: 5px;
		
		.headerLink__item {
			margin: 0;
			padding: 10px;
			list-style: none;
			
			a {
				display: block;
				margin: 3px 0px;
				color: #0ff;
				
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}

上記のscssをコンパイルすると下記のようなcssが出来上がると思います。

#header { margin: 0;padding: 0;}
～（省略）～
#header .headerLink .headerLink__item a:hover { text-decoration: none; }

これを何らかの指定や記述方法によって、下記のように任意のセレクタを省略できたりするのでしょうか？

#header { margin: 0;padding: 0;}
～（省略）～
.headerLink__item a:hover { text-decoration: none; }

「ここから上のセレクタは出力しない」みたいな指定など、ご存知でしたらお教えください。

Answer 1

@at-rootを使うことで記述した場所より上のセレクタのネストを解除する出来きますが、

#header {
    margin: 0;
    padding: 0;

    .headerLink {
        margin: 5px;
        padding: 5px;
        
        .headerLink__item {
            margin: 0;
            padding: 10px;
            list-style: none;
            a {
                display: block;
                margin: 3px 0px;
                color: #0ff;
            }
        }
        @at-root .headerLink__item a:hover {
          text-decoration: none;
        }
    }
}

素直に

.headerLink__item a:hover {
  text-decoration: none;
}

と書いたほうが分かりやすいと思います。

Comments

[gin]

おお。なるほど。

例では「～:hover」のみを抽出してしまい分かりづらかったですね。すみません。
「.headerLink__item」から別建てでOKな場合は、これの頭に「@at-root」を指定すればよさげですね。

@at-root .headerLink__item {
　a {
　　　～（省略）～
　}
}

ご回答ありがとうございました！
ちなみに「～:hover」のみ書きたい場合は、tmuさんのおっしゃる通りCSSで素直に書いた方がいいと思います。