SCSS 총정리

정규영·2024년 12월 30일

CSS

목록 보기
1/1

패스트캠버스에서 박영웅 강사님의 강의를 보고 정리한 글입니다.

중첩

<div class="container">
    <h1>Hello SCSS!</h1>
</div>

// style
.container {
	h1 { // 중첩해서 사용 가능.
		color: red;
	}
}

변수

// main.scss
$color: royalblue;

.container {
  h1 {
    color: $color;
  }
}

자식 요소 구분

우리가 중첩 문법을 사용하면 자동으로 띄어쓰기로 들어가지는 후손 선택자로 해석이 돼서 동작은 한다.

// scss
.container {
	ul {
		li {
			font-size: 40px;
			.name {
				color: royalblue;
			}
		}
	}
}

// css
.container ul li {
	font-size: 40px;
}

.container ul li .name {
	color: royalblue;
}
  • 만약 후손 선택자가 아닌 자식 선택자를 사용하고 싶다면?
  • ex. ul 태그 부분에서 컨테이너의 자식 요소다라는 것을 명확하게 하기 위해 자식 선택자를 사용하고 싶으면?
// cscc
.container {
	// 이렇게 > 적용해주기
	> ul {
		... 
	}
}
  • 이렇게 하면 .container 의 자식 요소인 ul 태그라는 뜻이 된다.

상위선택자 참조 &

// scss
.btn {
	position: absolute;
	&.active {
		color: red;
	}
}

.list {
	li {
		// 여기서 &는 li 태그를 나타낸다.
		&:last-child {
			margin-right: 0;
		}
	}
}

// css
.btn {
	position: absolute;
}
.btn.active {
	color: red;
}

.list li:last-child {
	margin-right: 0;
}

상위 선택자 참조

// scss
.fs {
	&-small { font-size: 12px; }
	&-medium { font-size: 14px; }
	&-large { font-size: 16px; }
}

// css
.fs-small {
	font-size: 12px;
}

.fs-medium {
	font-size: 14px;
}

.fs-large {
	font-size: 16px;
}

중첩된 속성

// scss
.box {
	font: {
		weight: bold;
		size: 10px;
		family: sans-serif;
	};
	margin: {
		top: 10px;
		left: 20px;
	};
	padding: {
		top: 10px;
		bottom: 40px;
		left: 20px;
		right: 30px;
	}
}

// css
.box {
	font-weight: bold;
	font-size: 10px;
	font-family: sans-serif;
	margin-top: 10px;
	...	
}
  • 선택자 처럼 사용하되 뒤에 : 을 꼭 넣어주기.
  • 중괄호가 끝나는 부분에 하나의 명령이 끝났다라는 세미콜론도 적용해주기.

네임스페이스 : 이름을 통해 구분 가능한 범위를 만들어내는 것으로 일종의 유효범위를 지정하는 방법을 말한다.

  • 즉, 속성 영역에 가지고 있는 이름 부분의 영역이 동일하다.
  • 같은 이름이 유효한 범위를 의미한다라고 보면 된다.

SCSS 변수

.container {
	position: fixed;
	top: 100px;
	.item {
		width: 100px;
		height: 100px;
		transform: translateX(100px);
	}
}
  • 위의 코드를 보면 100px 이라는 수치가 반복적으로 쓰임.
  • 만약 200px로 바꿔야 된다 일일히 다 고쳐줘야됨.
$size: 100px;

.container {
	position: fixed;
	top: $size;
	.item {
		width: $size;
		height: $size;
		transform: translateX($size);
	}
}

페이지에서 주요하게 사용하는 메인 색상 및 가지를 변수로 만들어서 반복적으로 사용할 때 매우 유용하게 사용할 수 있음.

  • 이 변수는 선언된 범위에서 유효범위를 가진다.
// 전역변수
$size: 100px;

.container {
	position: fixed;
	top: $size;
	.item {
		width: $size;
		height: $size;
		transform: translateX($size);
	}
}

// 지역 변수
.container {
	position: fixed;
	top: $size; // 에러 발생
	.item { // $size는 .item 의 영역 안에만 사용 가능.
		$size: 100px;
		width: $size;
		height: $size;
		transform: translateX($size);
	}
}

연산

// scss
div {
	width: 20px + 20px;
	height: 40px - 10px;
	font-size: 10px * 2;
	margin: 30px / 2;
	padding: 20px % 7;
}

// css
div {
	width: 40px;
	height: 30px;
	font-size: 20px;
	margin: 30px/2; // 나누기는 제대로 연산되지 않음.
	padding: 6px;
}

왜 나누기는 연산이 안되는가?

// ex.
span {
	font-size: 10px;
	line-height: 10px;
	font-family: serif;
	
	// 위 내용을 한 번에 작성하는 단축속성.
	font: 10px / 10px serif;
}

단축 속성에서는 / 기호를 사용해서 구분하기 때문에 기호가 겹쳐서 연산이 안된다.

어떻게 사용?

// 1.
div {
	margin: (30px / 2); // 괄호 안에 넣어주기
}

// 2.
div {
	$size: 30px;
	margin: $size / 2; // 변수 사용하면 연산이 된다.
}

// 3. 여러 연산자를 동시에 사용
div {
	margin: 10px + 12px / 2;
}

산술연산 할 때는 기본적인 단위가 동일해야 된다.

div {
	width: 100% - 200px; // error
}

// calc 사용하면 됨
div {
	width: calc(100% - 200px); // error
}

재활용 @mixin @include

예시로 중앙 정렬을 위해 display: flex;, justify-content: center;, aligns-items: center; 를 사용한다.

하지만 우리는 이런 스타일을 자주 사용하기 때문에 사용할 때마다 반복적으로 적는 것이 아닌 재활용할 수 있게 만들어야 된다.

  • mixin 이라는 변수로 정의하고 @include 값으로 사용한다.
@mixin center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.container {
	@include center;
	.item {
		@include center;
	}
}

.box {
	@include center;
}

mixin의 인수

width: 100px; height: 100px; background-color: red; 이런 속성을 @mixin 에 담았다고 하자.

하지만 어떤 값은 위 mixin으로 적용하고 싶은데 200px로 적용하거나 배경색을 바꾸고 싶은데 그럴 때는 저 mixin 에 선언된 것을 사용하지 않고 새로 만들어야 될까?

아니다! 함수처럼 mixin에 변수처럼 활용할 수 있다.

@mixin box($size) {
	width: $size;
	height: $size;
	background-color: tomato;
}

.container {
	@include box(200px);
	.item{
		@include box(300px)
	}
}

.box {
	@include box(500px)
}
  • box 를 인수를 넣어줬다만 모든 box에 ()를 넣어서 $size 에 대한 인수를 넣어줘야 된다. 적용하지 않으면 에러가 발생한다.
  • 하지만 위의 에러가 발생하지 않게 기본 값도 지정할 수 있다.
@mixin box($size: 100px) {
	width: $size;
	height: $size;
	background-color: tomato;
}

.container {
	@include box(200px);
	.item{
		@include box; // 에러는 없어지고 여기 box에 100px이 들어간다.
	}
}

.box {
	@include box(500px)
}

2개 이상의 인자가 들어갈 때

@mixin box($size: 100px, $color: red) {
	width: $size;
	height: $size;
	background-color: $color;
}

.container {
	@include box(200px);
	.item{
	// $color 인자에 blue를 적용하도록 만들 수 있다.
	// 이렇게 안하면 $size에 blue가 들어간다.
		@include box($color: blue);
	}
}

.box {
	@include box(500px)
}

반복문

// 기본 문법
@for $i from 1 through 10 {
	.box {
		width: 100px;
	}
}

js는 제로 베이스 부터 시작해서 10보다 작을 때 까지 출력을 해주는데
SCSS는 제로베이스가 아닌 1번 부터 숫자를 카운팅한다.

// 위 스타일 코드를 css로 컴파일 됐을 때
.box {
	width: 100px;
}
.box {
	width: 100px;
}
.box {
	width: 100px;
}
.box {
	width: 100px;
}
// ... 이렇게 10번

응용

@for $i from 1 through 10 {
	// js는 ${변수} 를 넣는데 SCSS는 #{변수} 를 넣게된다.
	.box:nth-child(#{i}) {
		width: 100px * $i;
	}
}
  • 선택자 같은 경우는 값을 보관하는 경우라 ${i} 이런 형식으로 적용해줬는데
  • 일반적으로 적용할 때는 변수 적용하는 것 처럼 $i 이렇게 변수명만 넣어주면 된다.

함수

특정한 값을 비율에 맞게 결과를 내어주는 역할을 한다.

// scss
@mixin center {
	display: flex;
	justify-content: center;
	align-items: center;
}

// 함수 작성
@function ratio($size, $ratio) {
	@return $size * $ratio
}

.box {
	$width: 100px;
	width: $width;
	// 함수 사용
	height: ratio($width, 1/2);
	@include center;
}

// css
.box {
	width: 100px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

색상 관련 내장 함수

mix(색상, 색상)

mix(royalblue, red); 이렇게 사용하면 색상을 합쳐줌

lighten(색상, 10%)

darken(색상, 10%)

색상을 10%식 밝고 어둡게 적용할 때 사용
버튼의 hover를 사용할 때 위의 함수들이 유용하다.

// ex
button {
	background-color: $color;
}

button:hover {
	background-color: lighten($color, 10%);
}

saturate(색상, 10%)

desaturate(색상, 10%)

특정 색상에 채도를 높여준다.

grayscale(색상)

흑백 색상 만들어줌

invert(색상)

반적 색상 만들어줌

rgba(색상, 투명도)

색상, 투명도 한 번에 지정 가능

SCSS 가족

아래의 index.html 과, main.scss 파일이 있다.

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.scss" />
</head>
<body>
    <div class="container">
        <h1>Hello SCSS!</h1>
    </div>
</body>
</html>

// main.scss
$color: royalblue;

.container {
  h1 {
    color: $color;
  }
}

여기서 하나의 파일에 모든 style 코드를 작성하기 보기 안좋은 경우가 있는데 그럴 때 @import 문법으로 다양한 스타일 코드를 가져와 적용시켜줄할 수 있다.

// main.scss
@import "./sub", "./sub2";

$color: royalblue;

.container {
  h1 {
    color: $color;
  }
}

// sub.scss
.container {
  background: orange;
}

// sub2.scss
body {
  background: royalblue;
}

데이터 종류

$number: 1; // .5, 100px, 1em
$string: bold; // relative, "../images/a.png"
$color: red; // blue, #FFFF00, rgba(0, 0, 0, .1))
$boolean: true; // false
$null: null;
$list: orange, royalblue, yellow;

$map: {
	o: orange,
	r: royalblue,
	y: yellow
}

.body {
	width: 100px;
	color: red;
	position: relative;
	// position: null; 넣으면 값이 출력이 안됨.
}

반복문 @each

기존에는 반복문을 쓰기 위해서는 @for 라는 것을 사용했는데 우리가 리스트나 맵이라는 데이터를 다루기 위해서는 @each 키워드를 사용할 수 있다.

// $list라는 변수를 반복적으로 $c라는 이름의 변수에 담아서 넣기
@each $c in $list {
	.box {
		color: $c;
	}
}

// map scss 
@each $key, $value in $map {
	// 이런식으로 사용이 가능.
	.box-#{$key} {
		color: $value;
	}
}

// css로 변환 됐을 때
.box-o {
	color: orange;
}

.box-r {
	color: royalblue;
}

.box-y {
	color: yellow;
}

재활용 @content

기본적인 @mixin 에 추가적인 내용을 더해서 스타일을 적용할 수 있다.

@mixin left-top {
  position: absolute;
  top: 0;
  left: 0;
  @content; // mixin에 @content 추가
}

.container {
  width: 100px;
  height: 100px;
  @include left-top;
}

.box {
  width: 2000px;
  height: 300px;
  // left-top 에 @content가 있으면 기존속성을 제외하고 추가적인 속성을 적용할 수 있다.
  @include left-top {
    bottom: 0;
    right: 0;
    margin: auto;
  }
}
profile
정규영
웹 프론트 개발일기

0개의 댓글