QnAi로깅

CSS, Sass, Less는 스타일 시트 언어 중 하나입니다.

CSS는 웹 페이지의 스타일을 작성하기 위한 언어로, HTML과 함께 사용됩니다. CSS는 선택자(Selector)와 선언부(Declaration)로 이루어져 있으며, 각 선택자에 대한 스타일을 정의합니다.

cssCopy code
/* CSS 예시 */
button {
  background-color: blue;
  color: white;
  font-size: 16px;
}

Sass와 Less는 CSS 전처리기(preprocessor)입니다. 전처리기는 CSS 코드를 작성하기 전에 Sass나 Less와 같은 언어로 작성된 코드를 브라우저가 이해할 수 있는 CSS 코드로 변환하는 기능을 제공합니다.

Sass는 Ruby 기반의 전처리기로, .sass 확장자를 사용합니다. Sass는 CSS와 달리 중괄호({})나 세미콜론(;)을 사용하지 않고, 들여쓰기(indentation)로 블록 구조를 표현합니다.

sassCopy code
/* Sass 예시 */
button
  background-color: blue
  color: white
  font-size: 16px

Less는 JavaScript 기반의 전처리기로, .less 확장자를 사용합니다. Less는 CSS와 문법이 거의 유사합니다.

lessCopy code
/* Less 예시 */
button {
  background-color: blue;
  color: white;
  font-size: 16px;
}

Sass와 Less는 변수(Variable), 함수(Function), 믹스인(Mixin) 등의 기능을 제공하여 CSS 코드 작성을 보다 쉽게 할 수 있습니다. 이를 통해 코드의 재사용성을 높이고, 코드 양을 줄이는 등의 효과를 얻을 수 있습니다.

예를 들어, Sass와 Less에서는 아래와 같이 변수를 사용할 수 있습니다.

sassCopy code
/* Sass 변수 예시 */
$primary-color: blue

button
  background-color: $primary-color

lessCopy code
/* Less 변수 예시 */
@primary-color: blue;

button {
  background-color: @primary-color;
}

변수를 사용하여 일관성 있는 색상이나 스타일을 정의할 수 있습니다. 이를 통해 코드의 가독성을 높이고, 유지보수성을 개선할 수 있습니다.