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 でつなげてしまったらオッケー。

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

Share with

See Also