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.nesting(중첩)

중첩 사용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 style을 굉장히 간결히 바꿀 수 있다.

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

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

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