Sass & SCSS 문법 총정리(2)

조건문과 반복문 (@if, @for)

조건문 @if

기본적으로 다음과 같은 형식을 따름

//기본 @if 지시문
@if (조건식) {
  //조건이 참일 때 표현식
}

//@if @else문
@if (조건식) {
  //조건이 참일 때 표현식
} @else {
  //조건이 거짓일 때 표현식
}

//다중 @if문
@if (조건식1) {
  //조건식1이 참일 때 표현식
} @else if(조건식2) {
  //조건식2가 참일 때 표현식
} @else {
  //조건식이 모두 거짓일 때 표현식
}

조건식에 ( ) 생략하여 작성이 가능
조건식에 논리 연산자 and, or, not을 사용 가능

반복문 @for

@for

through 를 사용하는 형식
to 를 사용하는 형식

through 를 사용하는 형식

=> from(시작)부터 through(종료) 조건까지 반복

to 를 사용하는 형식

=> from(시작)부터 to(종료) 조건 직전까지 반복

@each, @while

@each

@each 는 List 와 Map 데이터를 반복할 때 사용 (자바스크립트 for in 반복문과 비슷함)

List와 Map 여러 개의 데이터를 저장할 때에는 list 또는 map을 사용해 편리하게 관리할 수 있음

List

데이터들을 연관된 것끼리 모아서 하나의 변수에 저장함 $fruits : (apple, banana, mango, orange)

Map

List 와 비슷하지만 각 값마다 매칭 된 키가 있다는 특징이 있음 $coffees : (mild: americano, soft: latte, strong: espresso, sweet: mocha)

@each list data 반복문

//List Data
$fruits: (apple, banana, mango, orange);

.list_fruits {
  @each $fruit in $fruits {
    li.#{$fruit} {
      background: url("../img/#{fruit}.png");
    }
  }
}

@each index 값이 필요할 경우 => 내장 함수 문법

//List Data
$fruits: (apple, banana, mango, orange);
.list_fruits {
  @each $fruit in $fruits {
    $i: index($fruits, $fruit);
    li:nth-child(#{$i}) {
      left: 100px * $i;
    }
  }
}

@each Map Data

// Map Data
$coffees: (
  mild: americano,
  soft: latte,
  strong: espresso,
  sweet: mocha,
);

@each $state, $menu in $coffees {
  #{$state}-icon {
    background: url("../img/#{$menu}.png");
  }
}

@while

@while 은 조건이 false 를 반환할 때까지 내용을 반복할 때 사용

$i: 6;

@while $i > 0 {
  .list-#{$i} {
    width: 2px * $i;
  }
  $i: $i - 2;
}

@mixin, @extend, @import

@mixin

mixin(믹스인)은 함수와 비슷한 동작을 하는 문법 CSS 스타일 시트에서 반복적으로 재사용할 CSS 스타일 그룹 선언을 정의하는 기능

한 개의 mixin(믹스인) 정의를 가지고 다양한 CSS 스타일을 만들어 낼 수 있음

정의 @mixin 믹스인 이름 { CSS 스타일 }
호출 @include 믹스인 이름

//@mixin - 스타일 정의
@mixin 믹스인 이름 {
  //CSS 스타일 내용
}

//@include - 믹스인 호출
@include 믹스인 이름;

인수(Arguments) mixin은 함수처럼 인수를 가질 수 있음 => 하나의 mixin을 정의해도 다양한 결과 도출 가능

사용방법: 믹스인에서 매개변수를 지정해주고 include로 인수를 사용

//정의
@mixin 믹스인 이름($매개변수) {
  //CSS 스타일 내용
}

//호출
@include 믹스인 이름(인수);

'매개변수'란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용

제공되는 여러 데이터들을 '전달인수'라고 함

@mixin 예시 코드

@mixin border-line($width, $style) {
  border: $width $style #000;
}

.border-box1 {
  @include border-line(2px, solid);
}
.border-box2 {
  @include border-line(4px, dotted);
}

@extend

클래스 선택자의 모든 스타일은 동일하게 가져야 하지만 부분적으로 다른 경우가 발생했을 때 사용하면 유용함

BUT CSS 미디어쿼리 내에서 실행되지 않기 때문에 반응형 웹 등에서 사용하지 않는 것이 좋음

Sass Guideline 에서도 @extend는 사용을 권장 x

@extend 예시 코드

.btn {
  padding: 10 15px;
  font-size: 15px;
  background-color: blue;
}

.lightBtn {
  @extend .btn;
  background-color: #000;
}

@import

@import 문법을 사용하면 외부에 모듈화 해서 분리해 놓은 Sass 파일을 불러와 병합하여 CSS로 컴파일 가능

또한 불러와 병합한 파일에 정의된 모든 변수 또는 믹스인을 주 파일에서 사용 가능

CSS @import와의 차이

CSS @import는 사용할 때마다 http 호출을 매번 하기때문에 속도 저하를 가져올 수 있지만, Sass @import는 CSS로 컴파일하여 바로 처리하기 때문에 http 호출이 필요하지 않아 속도 저하 문제를 발생시키지 않는다.

@import "파일경로/파일명" @import "font.scss"; // scss일 경우 생략 가능

꿀팁!

변수와 @mixin은 따로 모듈화 분리하여 Sass 파일로 만들어서 @import 한다.
파일명 앞에 '' 를 붙이면 CSS로 컴파일될 때 '' 로 시작하는 파일명의 파일은 컴파일되지 않는다.
_mixin.scss 파일명을 만들고, 주 파일에서 @import 하면 _mixin.scss의 파일 내용은 주 파일에 적용되지만 _mixin.scss 파일은 css로 컴파일 되지 않기 때문에 관리하기가 편리하다.
하나의 @import로 여러 파일을 불러올 수 있다. => 파일을 ',' 로 구분하여 import 한다.

@import "_mixin", "header";