반응형

 

 

Sass

Syntactically awesome stylesheets

 

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 SassScript인 조건문(@if), 반복문(@for)에 대한 문법을 다루어 보겠습니다.

 

 

 

 

 

if(함수)

 

조건의 값(true, false)에 따라 두 개의 표현식 중 한 개만 반환합니다.

자바스크립트의 삼항 연산자와 비슷합니다.

조건의 값이 참(true) 일 경우, 표현식 1을,

조건의 값이 거짓(false) 일 경우, 표현식 2를 반환합니다. 

기본 문법은 아래와 같습니다.

 

if(조건식, 표현식1, 표현식2);

 

SASS 'if(삼항 연산자)' 문법 코드 입니다. 
//HTML
<div class="section-v1"></div>
<div class="section-v2"></div> 


//SCSS

//변수설정
$section-v1:900px;
$section-v2:500px;

//공통 CSS
.section-v1, .section-v1 {
    height: 100px;
}

.section-v1 {
    width: $section-v1;
    background-color: if($section-v1 > 700, coral, orange)
}

.section-v2 {
    width: $section-v2;
    background-color: if($section-v2 > 700, coral, orange)
}

 

CSS 'if(삼항 연산자)' 컴파일 결과 코드 입니다. 
.section-v1, .section-v1 {
  height: 100px;
}

.section-v1 {
  width: 900px;
  background-color: coral;
}

.section-v2 {
  width: 500px;
  background-color: orange;
}

 

 

 

 

 

@if(조건문)

 

@if 지시어는 자바스크립트의 if문과 비슷합니다.

같이 사용할 수 있는 지시어는 @else, @else if 가 있습니다.

@else 지시어를 붙여 거짓(false)을 반환할 수 있고, @else if 지시어를 붙여 다중 if(조건)문 실행도 가능합니다.

기본 문법은 아래와 같습니다.

 

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

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


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

 

SASS '@if @esle' 문법 코드 입니다. 
//HTML
<div class="section-v1"></div>
<div class="section-v2"></div>

//SCSS

//변수설정
$section-v1:900px;
$section-v2:500px;

//공통 CSS
.section-v1, .section-v1 {
    height: 100px;
}

.section-v1 {
    width: $section-v1;
    @if($section-v1 >= 700) {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

.section-v2 {
    width: $section-v2;
    @if($section-v2 >= 700) {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

 

CSS '@if @else' 컴파일 결과 코드 입니다. 
.section-v1, .section-v1 {
  height: 100px;
}

.section-v1 {
  width: 900px;
  background-color: coral;
}

.section-v2 {
  width: 500px;
  background-color: orange;
}

 

 

@if(조건문) 문법 1

조건식에 (  ) 생략하여 작성이 가능합니다.

기본 문법은 아래와 같습니다.

 

.section-v1 {
    width: $section-v1;
    @if $section-v1 >= 700 {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

 

 

@if(조건문) 문법 2

조건식에 논리 연산자 and, or, not을 사용할 수 있습니다.

 

SASS '논리 연산자 and' 문법 코드 입니다. 
//HTML
<div class="section-v1"></div>
<div class="section-v2"></div>


//SCSS
//변수설정
$section-v1:900px;
$section-v2:500px;

//공통 CSS
.section-v1, .section-v1 {
    height: 100px;
}

.section-v1 {
    width: $section-v1;
    @if $section-v1 >= 0 and $section-v1 <= 1000 {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

.section-v2 {
    width: $section-v2;
    @if $section-v2 >= 0 and $section-v2 <= 300 {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

 

CSS '논리 연산자 and' 컴파일 결과 코드 입니다. 
.section-v1, .section-v1 {
  height: 100px;
}

.section-v1 {
  width: 900px;
  background-color: coral;
}

.section-v2 {
  width: 500px;
  background-color: orange;
}

 

 

 

 

 

@for(반복문)

 

@for 는 클래스 스타일 또는 값을 일정하게 변화하면서 일정 횟수 반복하여 사용할 수 있는 문법입니다. 

자바스크립트의 for(반복문) 와 비슷합니다.

@for 는 through 를 사용하는 형식과 to 를 사용하는 형식으로 나누어집니다.

두 형식은 종료 조건의 해석이 다른 결과를 반환합니다. 

기본 문법은 아래와 같습니다.

 

// through - 시작부터 종료조건까지 반복
@for $변수 from 시작 through 종료 {
	// 반복내용
};

// to - 시작부터 종료조건 직전까지 반복
@for $변수 from 시작 to 종료 {
	//반복내용
};

 

 

through

from(시작)부터 through(종료) 조건까지 반복해야 할 경우 사용합니다.

변수는 관례상 $i 를 사용하도록 하겠습니다.

 

 

to

from(시작)부터 to(종료) 조건 직전까지 반복해야 할 경우 사용합니다.

변수는 관례상 $i 를 사용하도록 하겠습니다.

through와 to의 예제는 아래와 같습니다.

 

SASS 'through , to' 문법 코드 입니다. 
//1~3까지 반복
@for $i from 1 through 3 {
    .through:nth-child(3n + #{$i}) {
        width: 50px * $i
    }
}

//1~2까지 반복
@for $i from 1 to 3 {
    .to:nth-child(3n + #{$i}) {
        width: 50px * $i
    }
}

 

CSS 'through, to' 컴파일 결과 코드 입니다. 
.through:nth-child(3n + 1) {
  width: 50px;
}

.through:nth-child(3n + 2) {
  width: 100px;
}

.through:nth-child(3n + 3) {
  width: 150px;
}

.to:nth-child(3n + 1) {
  width: 50px;
}

.to:nth-child(3n + 2) {
  width: 100px;
}

 

 

 

 

 

마치며...

 

이전 Sass 변수 포스팅 마무리에 이야기했던 @if(조건문)와 @for(반복문)에 대하여 포스팅하였습니다.

자바스크립트 if문과 for문을 알고 계신 웹퍼블리셔 분이라면 이번 포스팅은 쉽게 이해하고 넘어가셨을 것입니다.

그러나 자바스크립트를 잘 모르시더라도 이해하기 쉽게 포스팅하려고 상세히 작성하였습니다.

SassScript 중 @if(조건문)와 @for(반복문) 내용이 Sass 공부를 하시는데 조금이나마 도움이 되어,

실무에서 웹퍼블리싱을 하실 때 편리하게 사용하실 수 있었으면 좋겠습니다.

다음 포스팅은 SassScript 중 마지막으로 @each과 @while에 대하여 알아보겠습니다.

감사합니다.

 

 

반응형

'Utility Knowhow' 카테고리의 다른 글

[SassㆍSCSS] SASS 문법 6편 - @mixin, @extend, @import  (0) 2021.11.10
[SassㆍSCSS] SASS 문법 5편 - @each, @while  (0) 2021.11.08
[SassㆍSCSS] SASS 문법 3편 - 변수, !global, !default  (0) 2021.11.01
[SassㆍSCSS] SASS 문법 2편 - 주석, 연산자  (0) 2021.10.28
[SassㆍSCSS] SASS 문법 1편 - 중첩 규칙과 선택자  (0) 2021.10.27

+ Recent posts

티스토리툴바