조건문과 반복문 (@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';