조건문
if, else, else if 많이 들어보셨죠? 그건 스크립트잖아 하실수도 있는데, SASS에서도 쓸 수 있어요.
아래 예제를 따라해보세요.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Link href="css/style.css" rel="stylesheet" />
<title>sass연습</title>
</head>
<body>
<div class="box1">박스1 입니다.</div>
<div class="box2">박스2 입니다.</div>
</body>
</html>
css/style.scss
$font-stack: ('Helvetica', 'Arial', sans-serif);
$standard: 500px; //기준값 입력
@mixin calcBox($width) {
@if $standard > $width {
background: yellow; //true
} @else {
background: blue;
}
}
%box {
height: 200px;
background: red;
font-family: $font-stack;
}
.box1 {
@extend %box;
@include calcBox(200px);
}
.box2 {
@extend %box;
@include calcBox(600px);
}
파일을 한번 실행해보세요. 원래대로라면 빨간색이었을 박스 2개가 width 값에 따라 노란색, 파란색으로 색상이 바뀌었어요. 신기한가요?
삼항연산자
삼항연산자 이러니까 말이 뭔가 어려워 당황스러우신가요? 사실 별거 없어요. if, else 문이나 다름없어요.
< 조건문 ? 예, 아니오 > 예를 들면 사과가 빨갛다? 라는 조건문을 걸고 맞으면 사과를 잘라라 틀리면 이건 사과가 아니야 이렇게 만들수 있는거죠. <"사과가 빨갛냐" ? "사과를 잘라라", "이건 사과가 아니야">
예제로 살펴볼게요.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Link href="css/style.css" rel="stylesheet" />
<title>sass연습</title>
</head>
<body>
<div class="box1">박스1 입니다.</div>
<div class="box2">박스2 입니다.</div>
<div class="box3">삼항 연산자 테스트</div>
</body>
</html>
css/style.scss
$variable: 10px;
$font-stack: ('Helvetica', 'Arial', sans-serif);
$standard: 500px; //기준값 입력
$main-color: #000;
@mixin calcBox($width) {
@if $standard > $width {
background: yellow; //true
} @else {
background: blue;
}
}
%box {
height: 200px;
background: red;
font-family: $font-stack;
}
.box1 {
@extend %box;
@include calcBox(200px);
}
.box2 {
@extend %box;
@include calcBox(600px);
}
.box3 {
@extend %box;
color: if($main-color == black, #fff, #000);
}
결과가 확인되셨나요?
흰색글씨로 나왔다면 black = #000 은 같은 색상이라는거예요.
은근히 실무에서 많이 쓰일것 같죠?
긴 글 읽어주셔서 감사드리고 다음 강좌에서 뵙겠습니다.
2019/07/11 - [프로그램 강좌] - [SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/13 - [프로그램 강좌] - [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/15 - [프로그램 강좌] - [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/17 - [프로그램 강좌] - [SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/21 - [프로그램 강좌] - [SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
'프로그램 강좌' 카테고리의 다른 글
| [html04]이미지로 코딩하기! (0) | 2019.07.24 |
|---|---|
| [SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.21 |
| [SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.17 |
| [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.15 |
| [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.13 |
