CSS, SCSS, LESS 에 대하여

🪼 CSS (Cascading Style Sheets)

• Cascading Style Sheets의 약자로, HTML 요소의 디자인과 레이아웃을 지정하는 데 사용함
• 기본적인 CSS는 선택자(selector)와 속성(property)을 사용하여 스타일을 지정함
• 웹 페이지의 스타일을 관리하는 데 사용되며, HTML과 완전히 별도로 파일로 저장됨

  h3 {
    color: blue;
    font-size: 24px;
  }

🪼 SCSS (Sassy CSS)

• CSS를 확장한 문법을 가진 CSS의 확장판이며 CSS의 모든 기능을 포함하면 서로 더 많은 기능을 제공함
• 중첩, 변수, mixin등과 같은 기능을 제공하여 코드의 재사용성과 유지보수성을 향상시킴
• .scss 확장자를 가짐

$primary-color: blue;

body {
  background-color: $primary-color;
}

🪼 LESS (Sassy CSS

• CSS를 동적으로 스타일링하기 위한 CSS 확장 언어
• CSS와 유사하지만, 변수(variables), mixin, 중첩(nesting) 등과 같은 기능을 추가로 제공함
• .less 확장자를 가짐

@primary-color: red;

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

---

👻 SCSS 코드 예시

같은 색상이나 글꼴크기를 여러곳에서 사용해야 할 때 SCSS의 변수를 사용하여 한 곳에서 해당 값을 정의하고, 필요한 곳에서 해당 변수를 참조할수 있다. 이렇게 하면 스타일을 일관되게 유지하고, 수정이 필요한 경우 변수 값만 변경하여 모든 사용 사례에 자동으로 적용된다.

• SCSS를 사용하여 변수와 mixin을 활용하여 재사용한 컴포넌트 만들기
  코드의 중복을 줄이고 유지보수성을 향상시킬 수 있다.

// 변수 정의
$primary-color: #007bff;
$secondary-color: #6c757d;
$font-size-medium: 16px;

// 재사용 가능한 버튼 mixin 정의
@mixin button-styles($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// 재사용 가능한 버튼 컴포넌트 정의
.button-primary {
  @include button-styles($primary-color, #fff);
}

.button-secondary {
  @include button-styles($secondary-color, #fff);
}

// 재사용 가능한 헤딩 스타일 mixin 정의
@mixin heading-styles($font-size, $color) {
  font-size: $font-size;
  color: $color;
  margin-bottom: 10px;
}

// 재사용 가능한 헤딩 스타일 컴포넌트 정의
h1 {
  @include heading-styles($font-size-medium, $primary-color);
}

h2 {
  @include heading-styles($font-size-medium, $secondary-color);
}