ChatGPT로 LESS CSS 알아보기

ChatGPT로 LESS CSS 알아보기

최근 회사에서 사용하는 툴에서 LESS CSS를 통해 링크의 스타일을 변경할 수 있다는 것을 알게 되어 처음으로 LESS에 대해 접하게 됐다.
얼추 알아보면서 사용해 봤는데 확실히 좋은 것 같아서 ChatGPT를 통해 간단하게 더 알아보는 시간을 갖고자 한다.
근데, LESS가 좋은 것 같긴 하지만 그럼에도 내 개인 프로젝트를 할 땐 Tailwind를 사용할 것 같긴 하다.
아무튼 지식을 늘려나가는 것은 무튼 좋은 것이니 한번 공부해 보자.

ChatGPT의 WebPilot 플러그인을 사용하여 LESS에 대해 검색시킨 후 설명해 달라고 해보았다.
그리고 각 기능에 대해 설명과 예시도 출력시켜서 해당 내용들을 정리해 보았다.

Question

LESS CSS에 대해서 검색해보고 설명해줘

Answer

LESS (Leaner Style Sheets; 때때로 LESS로 표기)는 클라이언트 측이나 서버 측에서 실행될 수 있는 CSS (Cascading Style Sheets)로 컴파일 될 수 있는 동적인 전처리 스타일시트 언어입니다.

Alexis Sellier에 의해 설계된 LESS는 Sass에 영향을 받았으며, CSS와 유사한 블록 형식 구문을 적용한 Sass의 새로운 "SCSS" 구문에 영향을 미쳤습니다.

LESS는 오픈 소스 프로젝트로, 첫 번째 버전은 Ruby로 작성되었지만, 후속 버전에서는 Ruby의 사용이 폐지되고 JavaScript로 대체되었습니다.

LESS는 다음과 같은 메커니즘을 제공합니다: 변수, 중첩, 믹스인, 연산자, 함수. LESS와 다른 CSS 전처리기 사이의 주요 차이점은 LESS가 브라우저에 의해 less.js를 통한 실시간 컴파일을 허용한다는 것입니다.

변수(Variables)

LESS에서는 @ 기호를 사용하여 변수를 정의하고, 이 변수를 CSS 속성에 적용할 수 있다.

@main-color: #4D926F;

#header {
  color: @main-color;
}

h2 {
  color: @main-color;
}

위의 LESS 코드는 다음과 같은 CSS 코드로 컴파일된다.

#header {
  color: #4D926F;
}

h2 {
  color: #4D926F;
}

변수로 선언한 @main-color의 #4D926F가 각 #header와 h2의 color에 적용되는 것을 확인할 수 있다.

믹스인(Mixins)

믹스인은 클래스의 모든 속성을 다른 클래스에 포함시키는 것을 허용한다.
이는 코드의 재사용성을 높여준다.

.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .border-radius;
}

#footer {
  .border-radius(10px);
}

위의 LESS 코드는 다음과 같은 CSS 코드로 컴파일된다.

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.border-radius 클래스를 마치 함수를 선언한 것처럼 작성했다.
그리고 인수로 @radius를 선언하고 5px를 넣었는데,
.border-radius만 사용하면 @radius가 디폴트 값인 5px로 적용되는 것이고,
.border-radius(10px)로 사용하면 @radius가 10px로 적용된다.

다른 예시를 하나 더 봐보자.
만약 웹사이트에서 버튼 스타일을 여러 번 반복해야 하고 컬러를 계속 변경해야 하는 상황이라면,

.button-style(@color: blue, @background: white) {
  color: @color;
  background-color: @background;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
}

위의 코드에서 .button-style은 믹스인이며, @color와 @background는 믹스인의 인수이다. 이 인수들은 기본값을 가지지만, 믹스인을 사용할 때 다른 값으로 대체할 수 있는 것이다.
만약 아래처럼 사용하게 된다면

#submit-button {
  .button-style(green, lightgray);
}

다음과 같은 CSS로 컴파일된다.

#submit-button {
  color: green;
  background-color: lightgray;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
}

즉, 기본적으론 color가 blue, background가 white인 class이지만 인수를 변경하여 여러 곳에서 재사용할 수 있게 해준다.

연산(Operations)

LESS는 속성 값과 색상의 덧셈, 뺄셈, 나눗셈, 곱셈을 허용하며, 이를 통해 속성 간의 복잡한 관계를 생성할 수 있다.

@base-color: #111;
@border-width: 1px;

#header {
  color: @base-color * 3;
  border-left: @border-width;
  border-right: @border-width * 3;
}

위의 LESS 코드는 다음과 같이 컴파일된다.

#header {
  color: #333;
  border-left: 1px;
  border-right: 3px;
}

중첩(Nesting)

LESS에서는 CSS 선택자를 중첩하여 코드를 더욱 간결하게 만들 수 있다.
이는 HTML의 DOM 구조를 반영하여 코드의 가독성을 높여준다.

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
    }
  }
}

위 LESS 코드는 아래와 같이 CSS 코드로 컴파일된다.

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}

개인적으로 LESS를 사용할 때 이 기능이 제일 좋았다.

함수(Functions)

LESS는 내장 함수를 제공하여 색상 조작, 수학 계산 등의 작업을 수행할 수 있다.

@base-color: #111;
@red: #842210;

#footer {
  color: lighten(@base-color, 20%);
  border-color: desaturate(@red, 10%);
}

위의 LESS 코드는 다음과 같이 컴파일된다.

#footer {
  color: #383838;
  border-color: #76201d;
}

LESS에서 제공하는 함수들이 꽤 많은데, 아래는 컬러 관련 함수들이다.
ChatGPT가 검색해준 결과인데 자세한 것은 문서를 참고 해야겠다.

● LESS color functions

• spin(color, amount): 주어진 색상의 색상휠을 회전시킵니다. 'amount'는 회전할 각도를 나타내며, 양수는 시계 방향, 음수는 반시계 방향을 나타냅니다.
• saturate(color, amount): 주어진 색상의 채도를 증가시킵니다. 'amount'는 증가시킬 채도의 양을 나타냅니다.
• desaturate(color, amount): 주어진 색상의 채도를 감소시킵니다. 'amount'는 감소시킬 채도의 양을 나타냅니다.
• lighten(color, amount): 주어진 색상을 밝게 만듭니다. 'amount'는 얼마나 밝게 만들지를 나타냅니다.
• darken(color, amount): 주어진 색상을 어둡게 만듭니다. 'amount'는 얼마나 어둡게 만들지를 나타냅니다.
• fadein(color, amount): 주어진 색상의 불투명도를 증가시킵니다. 'amount'는 증가시킬 불투명도의 양을 나타냅니다.
• fadeout(color, amount): 주어진 색상의 불투명도를 감소시킵니다. 'amount'는 감소시킬 불투명도의 양을 나타냅니다.
• fade(color, amount): 주어진 색상의 불투명도를 설정합니다. 'amount'는 설정할 불투명도의 양을 나타냅니다.
• hue(color): 주어진 색상의 색조를 반환합니다.
• saturation(color): 주어진 색상의 채도를 반환합니다.
• lightness(color): 주어진 색상의 밝기를 반환합니다.
• alpha(color): 주어진 색상의 알파값(불투명도)를 반환합니다.

가드(Guards)

LESS는 가드라는 기능을 제공하여 믹스인의 동작을 제어할 수 있다.
가드는 믹스인이 특정 조건을 만족할 때만 적용되도록 하는 기능이다.

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#333) }

위의 LESS 코드는 다음과 같이 컴파일된다.

.class1 {
  background-color: black;
}
.class2 {
  background-color: white;
}

색상의 밝기에 따른 스타일 적용, 브라우저 지원에 따른 스타일 적용, 화면 크기에 따른 스타일 적용 등 특정 조건에서만 믹스인을 활성화하고 싶을 때 사용한다.

LESS 적용

● Node.js에서 사용

npm install -g less

설치 후에 아래와 같은 명령문으로 컴파일러를 호출 할 수 있다.

lessc styles.less styles.css

이렇게 하면 styles.less 파일을 styles.css로 컴파일 해준다.

● less.js 사용 (less.js 다운로드 링크)

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less"></script>

less.js를 다운로드 받아서 사용하거나 CDN URL을 사용하면 된다.
주의해야 할 점은 less.js를 .less 링크 아래에 작성해야한다.

● ChatGPT에게 변환 시키기(?)

이건 필자가 개인적으로 하다가 궁금해서 시킨 건데 정확하게 잘 해주는 편이다.
단순하게 참고용으로만 봐주시면 될 것 같다.
참고로 그 반대로도 잘 해주는 편이다.

오늘은 ChatGPT를 통해 LESS CSS에 대해서 공부하는 시간을 가져 보았다.
이전에 LESS를 사용해 보면서 알고 있었던 부분도 있었고 잘 모르던 것도 있었는데 많은 도움이 된 것 같다.
(하지만 역시 나는 tailwind를 쓸 것 같다...😅)