less
週末フロントエンダー
業務では shellscript と golang 書いておきながら、週末は html, css, js とフロントエンドを開発していたりします。
less 便利
バックエンドのコードばっかり書いている身からすると、css のやぼったさに辟易しがちですが、less に出会ってから、css とも仲良くやれる気がしてきています。
less の基本
例えば、この記事の下の方にある SNS 共有ボタンですが、細かいところをはしょると less ファイルは以下のようになっています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| .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 の凄さなのですが、
1
2
3
4
5
6
7
| .sns-share-area {
ul li {
a {
// .sns-share-area ul li a { } と同じ
}
}
}
|
書いていて疑問だったのが、特定の .sns-share-area ul li.original-tweet a { } をどう表現するかです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .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 でつなげてしまったらオッケー。
覚えてしまえば便利でシンプル！