LESS vs CSS

cssを使用する場合との違い

多様な機能により、CSSの作成と管理が容易になります。

CSSは同じ内容を繰り返し入力する作業が多い.
もしそうであれば、同じ値を変数として保存して複数回使用することをお勧めします.CSSは:root { --primaryColor:value }のように変数宣言を提供しますが、LESSはしません.내장 함수またはmixinおよびnestingに加えて、cssの繰返し操作や属性値の計算をより容易にする機能も提供されている.

1.組み込み関数

lessには複数の組み込み関数があります.

ex
percentage(0.5) =>return 50%
max(5, 10); =>return 10

2.ネスト(ネスト)

Xを重ねる場合

css style에서는 nesting이 없기에 요소별로 각각 값을 줘야
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

オーバーラップを使用する場合

less의 nesting을 통해 .navigation과 .logo를
클래스로 가진 요소가 #header의 자식이라는 걸 짐작가능하게 한다.즉, HTML구조가 더 잘 그려진다.

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

3.ミックス

cssブロックを他の場所で使用できるようにする
これにより、cssスタイルを非常に簡潔に変更することができます.

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();=>위에서 정의한 덩어리를 통째로 실행
}

.post a {
  color: red;
  .bordered();=>위에서 정의한 덩어리를 통째로 실행
}