less
週末フロントエンダー
業務では shellscript と golang 書いておきながら、週末は html, css, js とフロントエンドを開発していたりします。
less 便利
バックエンドのコードばっかり書いている身からすると、css のやぼったさに辟易しがちですが、less に出会ってから、css とも仲良くやれる気がしてきています。
less の基本
例えば、この記事の下の方にある SNS 共有ボタンですが、細かいところをはしょると less ファイルは以下のようになっています。
1.sns-share-area {
2 text-align: center;
3 ul li {
4 list-style: none;
5 ...
6
7 a {
8 display: block;
9 ...
10 }
11
12 &.original-tweet a {
13 background:#55acee;
14 }
15
16 span {
17 display:block;
18 &.common-txt {
19 font-size: 13px;
20 }
21 &.common-icon {
22 height: 25px;
23 ...
24 }
25 }
26
27 .result-area {
28 border: 1px solid #d6ceb4;
29 ...
30
31 &:before{
32 content: "";
33 ...
34 }
35
36 &:after{
37 content: "";
38 ...
39 }
40 }
41 }
42}
親子構造がシンプルに書けるのが less の凄さなのですが、
1.sns-share-area {
2 ul li {
3 a {
4 // .sns-share-area ul li a { } と同じ
5 }
6 }
7}
書いていて疑問だったのが、特定の .sns-share-area ul li.original-tweet a { } をどう表現するかです。
1.sns-share-area {
2 ul li {
3 a {
4 // .sns-share-area ul li a { } と同じ
5 }
6 &.original-tweet a {
7 // .sns-share-area ul li.original-tweet a { } と同じ
8 }
9
10 .result-area {
11 border: 1px solid #d6ceb4;
12 ...
13
14 &:before{
15 content: "";
16 ...
17 }
18 }
19 }
20}
& でつなげると、よいのですね！ 同じ要領で before after も &:before でつなげてしまったらオッケー。
覚えてしまえば便利でシンプル！