less で親要素の class を指定する方法

& って便利だね！

Posted on Sun, Nov 5, 2017
Tags less

週末フロントエンダー

業務では shellscript と golang 書いておきながら、週末は html, css, js とフロントエンドを開発していたりします。

less 便利

バックエンドのコードばっかり書いている身からすると、css のやぼったさに辟易しがちですが、less に出会ってから、css とも仲良くやれる気がしてきています。

less の基本

例えば、この記事の下の方にある SNS 共有ボタンですが、細かいところをはしょると less ファイルは以下のようになっています。

.sns-share-area {
	text-align: center;
	ul li {
		list-style: none;
		...

		a {
			display: block;
	    ...
		}

		&.original-tweet a {
			background:#55acee;
		}

		span {
			display:block;
			&.common-txt {
				font-size: 13px;
			}
			&.common-icon {
				height: 25px;
				...
			}
		}

		.result-area {
		    border: 1px solid #d6ceb4;
		    ...

				&:before{
					content: "";
					...
				}

				&:after{
					content: "";
					...
				}
		}
	}
}

親子構造がシンプルに書けるのが less の凄さなのですが、

.sns-share-area {
  ul li {
    a {
      // .sns-share-area ul li a { } と同じ
    }
  }
}

書いていて疑問だったのが、特定の .sns-share-area ul li.original-tweet a { } をどう表現するかです。

.sns-share-area {
  ul li {
    a {
      // .sns-share-area ul li a { } と同じ
    }
    &.original-tweet a {
      // .sns-share-area ul li.original-tweet a { } と同じ
    }

		.result-area {
	    border: 1px solid #d6ceb4;
	    ...

			&:before{
				content: "";
				...
			}
		}
  }
}

& でつなげると、よいのですね！ 同じ要領で before after も &:before でつなげてしまったらオッケー。

覚えてしまえば便利でシンプル！