[CSS] 자주 쓰이는 Scss 핵심 기능

Sass와 Scss 차이

기본적으로 Sass와 Scss는 Nesting 구조를 가지고 있다.

 

👀 Sass 예제

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

 

👀 Scss 예제

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

 

위 두 예제를 보게 되면

Sass는 범위의 구분을 indent로 구분하고,

Scss는 브라켓으로 구분하는 걸 알 수 있다.

💡 Sass 같은 경우는 indent로 구분을 하다 보니 tab에 굉장히 예민하며 작업을 할 때 항상 유의해야 한다.

 

Scss 핵심 기능 5가지

1. variable

$ 를 붙여서 변수로 만들어 줄 수 있다.

변수를 사용하는 이유는 공통된 스타일을 일괄적으로 관리 함으로써 변수에 있는 값을 수정하는 것만으로 해당 변수로 준 모든 값을 일괄 수정이 가능하다.

 

예제)

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

2. mixin 기능

예제)

@mixin ellipsis {
    text-overflow : ellipsis;
    white-space : nowrap;
    overflow: hidden;
}

p {
    width: 300px;
    @include ellipsis;
}

 

위 예제처럼 @mixin명령어를 이용하여 코드의 집합을 만들고 필요한 곳에 @include 명령어를 통해 불러온다.

불러오기 전까진 코드에 아무런 영향을 주지 않는다.

 

mixin variable 응용 예제)

@mixin bg-img ($bg-url, $bg-position: center, $bg-size: contain, $bg-color: transparent) {
    background-image: url($bg-url);
    background-repeat: no-repeat;
    background-position: $bg-position;
    background-size: $bg-size;
    background-color: $bg-color;
}

.bg {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    @include bg-img('https://www.naver.com/logo.svg');
}

 

변수에 값을 미리 적어주면 @include로 불르고 지정한 변수자리에 값을 안 넣어줘도 default값으로 들어간다.

이걸 통해 함수처럼 defalut parameter를 지정할 수 있고 parameter를 받아서 속성을 부여할 수 있다는 걸 알 수 있다.

 

3. function 기능

Scss는 함수로도 관리가 가능하다.

 

예제)

@function half-opacity($color) {
    $color: rgba($color, 0.5);
    @return $color;
}

h1 {
    font-size: 10em;
    text-align: center;
    color: half-opacity(red);
}

 

4. Modularity 기능

@use명령어를 사용해 파일을 분할하고 모듈화 할 수 있다.

 

예시)

/* _base.scss */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

/* styles.scss */
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

 

5. extend 기능

@extend 사용 시 css 속성 집합을 상속받을 수 있다.

 

예시)

/* SCSS */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

 

💡 mixin 과 extend 차이점
둘 다 코드의 집합을 넣어주는 방식이라 사용하는 데 있어 어디에 어떤 속성을 사용해야 옳은지 쉽지 않다.
간단하게,
extend 같은 경우 같은 버튼이지만 종류가 다른 버튼같이 연관된 개념을 확장(extend)해준다 생각하면 되며,
mixin 은 반대로 연관성이 없는 객체에 사용해 주면 된다.