Css , Scss , Sass 의 차이점과 Scss의 특징

Css ( Cascading Style Sheets )

HTML에 색상이나 배치등을 레이아웃이나 스타일 요소를 담당

Scss ( Sassy Cascading Style Sheets )

Sass를 더 쉽게 사용하기 위한 버전 (Sass 3버전부터 출시, Sass의 상위호환)

Sass ( Syntactically Awesome Style Sheets )

Css의 단점을 보완한 Css의 확장형

 

 

 

Scss 특징

 

1. 변수 할당 : 자주 쓰는 스타일 요소를 변수로 지정하여 재사용에 용이함

 // 변수설정
$font-stack: Helvetica, sans-serif;
$base-margin: 16px;

body {
  font-family: $font-stack;
  margin: $base-margin;
}

 

2. Nesting(중첩) : 부모(상위 선택자)의 반복 없이 자식(하위 선택자)를 위해 단순 나열하는 구조

// Scss

.navbar {
  background-color: #333;

  .nav-item {
    color: white;

    &:hover {
      background-color: #555;
    }
  }
}

// Css

.navbar {
  background-color: #333;
}

.navbar .nav-item {
  color: white;
}

.navbar .nav-item:hover {
  background-color: #555;
}

더욱 간결하고 가독성 높게 코드를 짤 수 있다.

 

3. 모듈화 : 유지보수 목적으로 css 분할 (header와 footer처럼 공통영역일 경우), @use와 @import를 사용

// 변수 파일.scss
$primary-color: #3498db;

// 스타일.scss
@import 'variables'; // 변수파일 불러오기

body {
  color: $primary-color;
}

// 메인파일.scss
@import 'variables';
@import 'styles';

 

4. Mixins : 반복적으로 재사용할 CSS 스타일 그룹 선언을 정리하는 기능(@mixin 설정 후 @import 사용)

// mixin 설정

@mixin button-styles($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  &:hover { opacity: 0.8; }
}

// mixins 사용

@import 'mixins';

.primary-button {
  @include button-styles(#3498db, #ffffff);
}

.secondary-button {
  @include button-styles(#2ecc71, #ffffff);
}

// mixin 없는 Css의 경우

primary-button {
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.primary-button:hover { opacity: 0.8; }

.secondary-button {
  background-color: #2ecc71;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.secondary-button:hover { opacity: 0.8; }

 

5. 상속 / 확장 : 타 선택자의 CSS를 그대로 상속 공유, @extend를 사용

%base {
  padding: 10px;
}

// 상속 적용
.button {
  @extend %base;
  background: blue;
}

 

6. 연산자 : 수학적 기능 사용

// 연산자 scss
.item {
  margin-top: 20px / 2;
  padding: 20px * 2;
}