간단 SCSS 사용법

SCSS는 CSS를 편하게 사용하고 코딩하듯이 사용하기 위해서 만들어졌다.

Sass 버전 3에 추가된 것이 Scss이다.

변수 사용

$color: red;
$default-margin: 15px;
$colors: red, blue, green, black, white;
$map: (
	morning: white,
    night: black
);

p {
	color: $color;	
}

• @import를 통해서 scss파일을 불러와 그 파일의 변수를 사용할 수 있다.

함수 사용하기

@function box-calculator($row: 4, $pixel: 512) {
  @return $pixel / $row;
}

.flex-box {
	flex: box-calculator(4, 1024);
}

반복문

// for
ol {
    @for $i from 1 through 5 {
        li:nth-child(#{$i}) {
            font-size: 40px * $i;
        }
    }
}

• @for문에서 through은 마지막 숫자를 포함하고, to는 마지막 숫자를 포함하지 않는다.

// while
ol {
    $i: 1;
    @while $i <= 5 {
        li:nth-child(#{$i}) {
            font-size: 20px * $i;
            $i: $i + 1;
        }
    }
}

// each
$colors: ("yellow": #fad336, "red": #f2637b, "blue": #3aa0ff, "green": #34dd5b, "purple": #7247db);

@each $name, $color in $colors {
    .li-#{$name} {
        color: $color;
        font-size: 20px;
    }
}

조건문

@function check($dark-mode: true) {
  @if ($dark-mode) {
  	@return black;
  } @else {
  	@return white;
  }
}

중첩해서 들여쓰기

.list {
	span {
    	color: red;
        &:hover {
        	border: 1px solid yellow;
        }
    }
    h1 {
    	font-weight: 700;
    }
    .name {
    	color: black;
    }
    #nickname {
    	background-color: green;
    }
}

@mixin 키워드

@mixin text {
	p {
    	color: blue;
        text-align: center;
    }
    span {
    	margin: 10px;
    }
}

.list-name {
	@include text;
}

section {
	@include text;
}

• list-name 클래스를 가지는 노드와 section태그 하위의 p와 span에 태그가 적용된다.

참고 자료 출처 : https://sass-lang.com/guide

Sass: Sass Basics