scss 문법 정리

1. 변수

변수 저장 및 사용가능

$primary-color: #333;
$font-stack: Helvetica, sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

 

 

2. 중첩

중첩하여 선택자의 계층 명확하게 표현 가능

이로 인해 가독성 상승, 실수 방지 가능

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

3. import

필요한 부분을 추출 가능

// _reset.scss
* {
  margin: 0;
  padding: 0;
}

// styles.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

 

4. 상속

말그대로 상속

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

 

그냥 .success랑 .message룰 둘 다 할당한것과는 조금 다른게,

중첩되는 속성이 있을때지않나 싶음

success에 border가 있으면 덮어씌울거같음

귀찮아서 테스트는 안함

 

5. 믹스인

스타일 규칙을 그룹화하여 재사용 가능

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

 

위 예시만 보면 그냥 공용적인 클래스 작성후 해당클래스를 상속받으면 되지않나 싶음

하지만 mixin으로 인자를 받을수 있어 유연하게 상속이 가능해진다.

// 패딩을 설정하는 믹스인, 인자로 패딩 값을 받음
@mixin padding($value: 10px) {
  padding: $value;
}

.container {
  @include padding(20px); // 20px 패딩 적용
}

.box {
  @include padding; // 기본값인 10px 패딩 적용
}

 

 

6. 함수

// 함수 정의: rem을 px로 변환
@function rem-to-px($size-in-rem, $base-font-size: 16px) {
  @return $size-in-rem * $base-font-size;
}

// 사용 예
.some-other-class {
  margin: rem-to-px(1.5); // 기본 폰트 사이즈 16px를 사용
  padding: rem-to-px(1, 14px); // 기본 폰트 사이즈를 14px로 설정
}