Powered by

# 7-조건문과 반복문

By
코알라코딩
●
In 

# 목차

  • 1. @if
    • 1.1. 기본문법
    • 1.2. ex
      • 1.2.1. 준비작업
      • 1.2.2. if 작성
      • 1.2.3. Vanilla JS
      • 1.2.4. jQuery
  • 2. @for
    • 2.1. 기본문법
    • 2.2. ex-갤러리
  • 3. @each
    • 3.1. 기본문법
    • 3.2. ex

# 1. @if

# 1.1. 기본문법

조건에 따라 스타일을 주고자 할 때, if와 else문을 사용한다. 상황에 따라 if 만 쓰거나 else, else if 를 사용할수 있다. 조건에는 논리 연산자 and, or, not을 사용한다.

@if （조건） {
// 조건이 참일 때 실행될 구문
}

# 1.2. ex

조건문을 사용하여 컬러테마를 만들어보자

실행화면

# 1.2.1. 준비작업

partial.scss 파일의 @import 를 제외한 코드를 복사한후 새 문서를 생성하여 붙여 넣는다. 새 문서는 layout/_layout.scss 로 저장한다.

layout/_layout.scss
header {
	@extend %padding;
	@include flexDirectJustiAlign(row, space-between, center);
	h1 {
		@include fontSizeBgColor(2rem, #6ffaff, #0c08ff);
	}
	nav ul {
		@include flexDirectJustiAlign(row, space-between, center);
		& > li {
			width: $col1;
		}
	}
}
main {
	@extend %padding;
}
.section1 {
	&-box {
		@extend %boxshadow;
		width: $col1 * 10;
		margin: auto;
		@include flexDirectJustiAlign();
	}
	&-item {
		flex: 1 1 0;
		@include flexDirectJustiAlign(column);
		@include fontSizeBgColor(2rem, #d8d8d8, $color-red);
		@extend %padding;
		span:nth-child(1) {
			@extend %colorSize;
		}
	}
}

mixin/_theme.scss 파일을 생성한다.

mixin/_theme.scss
//@if

root 폴더에 style.scss 파일을 생성한다.

모듈화된 scss 파일을 모두 임포트 한다.

style.scss
@import 'base/base';
@import 'mixin/mixin';
@import 'mixin/extend';
@import 'layout/layout';
@import 'mixin/theme';

# 1.2.2. if 작성

mixin/theme.scss 파일작성

mixin/theme.scss
@mixin textAndBgColor($textColor, $bgColor) {
	color: $textColor;
	background-color: $bgColor;
}

@mixin theme($mood) {
	@if $mood == 'light' {
		@include textAndBgColor(#333, #fff);
	} @else if $mood == 'dark' {
		@include textAndBgColor(#fff, #000);
	} @else {
		@include textAndBgColor(#f00, #aaa);
	}
}
//body에 light 기본 적용
body {
	@include theme('light');
}
//.dark-theme가 추가되면 mixin함수로 'dark' 전달
.dark-theme {
	@include theme('dark');
}
//.mid-theme가 추가되면 mixin함수로 'dark' 전달
.mid-theme {
	@include theme('mid');
}

# 1.2.3. Vanilla JS

seclect의 선택값에 따라 테마를 변경해보자

<script src="./js/theme.js" defer></script>
</head>
js/theme.js
let theme = document.querySelector('#theme');
console.log(theme);

theme.addEventListener('change', function (e) {
	let val = this.options[this.selectedIndex].value;
	switchTheme(val);
});

function switchTheme(theme) {
	document.body.classList.remove('dark-theme');
	document.body.classList.remove('mid-theme');
	document.body.classList.remove('light-theme');

	if (theme === 'dark') {
		document.body.classList.add('dark-theme');
	} else if (theme === 'mid') {
		document.body.classList.add('mid-theme');
	} else {
		document.body.classList.add('light-theme');
	}
}

위의 함수는 아래처럼 줄일수 있다.

const classList = ['dark-theme', 'mid-theme', 'light-theme'];
classList.forEach((el) => {
	document.body.classList.remove(el);
});

# 1.2.4. jQuery

  1. 코어파일을 로드한다

<script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>

let theme = $('#theme');
theme.on('change', function () {
	let val = $(this).find('option:selected').val();
	console.log(val);
	switchTheme(val);
});

function switchTheme(theme) {
	const body = $('body');
	body.removeClass('dark-theme mid-theme light-theme');
	if (theme === 'dark') {
		body.addClass('dark-theme');
	} else if (theme === 'mid') {
		body.addClass('mid-theme');
	} else {
		body.addClass('light-theme');
	}
}

# 2. @for

@for은 지정횟수 만큼 코드를 반복실행함

@for문에 from > through < 키워드로 반복할 횟수를 지정한다.

# 2.1. 기본문법 

for ($변수) from (시작) through(끝){
// 반복할 내용
}

# 2.2. ex-갤러리

실행화면

이미지 반복하여 채우기

url 함수의 인자로 변수를 사용할 때는 중괄호{}를 사용한다

style.scss 파일에 임포트 한다.

layout/_gallery.scss

$img_path: 'https://qwerew.cafe24.com/images/';

.photo_box {
	$color: (#3f51b5, #c5e1a5, #cfd8dc) !global;
	@include flexDirectJustiAlign() {
		gap: $col1;
	}
	background-color: nth($color, 1);
	@for $i from 1 through 5 {
		& li:nth-child(#{$i}) {
			background: url('#{$img_path}#{$i}.jpg') no-repeat;
			background-size: cover;
			width: $i * 20px;
			height: $col1;
		}
	}
}

nav {
	background-color: nth($color, 1);
	a{color:nth($color,3)}
}

list 의 사용 여러개의 값을 배열로 저장하고 인덱스로 적용

!global 키워드는 전역변수가 된다.

layout/_gallery.scss
//지역변수 color 의 값이 전역으로 변경될경우 다른 전역변수와의 충돌방지코드
$color: null;
body{background-color: nth($color, 2);}
.photo_box {
	//지역변수의 전역변경
	$color: (#3f51b5, #c5e1a5, #cfd8dc, #3fb5a7, #76b53f) !global;
	@include flexDirectJustiAlign() {
		gap: $col1;
	}
	background-color: nth($color, 1);
}

# 3. @each

lists 나 맵의 각각 요소마다 스타일을 순회적용함

# 3.1. 기본문법 

@each ($변수) in (리스트|맵){
	//실행문
}

# 3.2. ex 

<section>
	<h2>Gallery</h2>
	<ul class="photo_box">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul class="banners">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<div class="palette">
		<span></span><span></span><span></span><span></span><span></span>
	</div>
</section>
$size: 10, 20, 30, 40, 50;
$array: (
	1: 'https://qwerew.cafe24.com/images/5.jpg',
	2: 'https://qwerew.cafe24.com/images/6.jpg',
	3: 'https://qwerew.cafe24.com/images/7.jpg',
);
@each $i, $name in $array {
	.banners li:nth-of-type(#{$i}) {
		background: url('#{$name}') 0 0 / cover no-repeat;
		//나누기는 calc 함수사용
		width: calc(nth($size, 1) * 10% / 4);
		height: nth($size, 1) * 10%;
	}
}
.banners {
	@include flexDirectJustiAlign() {
		justify-content: space-between;
	}
	width: nth($size, 3) * 30px;
	height: nth($size, 2) * 20px;
}
.palette {
	@include flexDirectJustiAlign() {
		justify-content: space-between;
		gap: nth($size, 1) * 1px;
	}

	span {
		border-radius: 50%;
		width: nth($size, 1) * 3px;
		height: nth($size, 1) * 3px;
	}
}
@each $name in $color {
	$i: index($color, $name);
	.palette span:nth-child(#{$i}) {
		background-color: #{$name};
	}
}
scss global if for array

© Copyright 2024. All rights reserved.