색상 함수 mix($color1, $color2) 두 개의 색상을 섞을 때 lighten($color, $amount) 더 밝은 색상을 만들 때 darken($color, $amount) 더 어두운 색상을 만들 때 saturate($color, $amount) 색상의 채도를 올릴 때 desaturate($color, $amount) 색상의 채도를 낮출 때 grayscale($color) 색상을 회색으로 변환 invert($color) 색상을 반전 rgba($color, $alpha) 색상의 투명도 변경 opacify($color, $amount) / fade-in($color, $amount) 색상을 더 불투명하게 만들 때 transparentize($color, $amount) / fade-out($c..
if(조건문, 참, 거짓) $height: 150vh; div{ height: if($height > 100vh, $height, null); } if 함수를 이용해 조건문이 참이면 첫번째 표현식을, 거짓이면 두 번째 표현식을 반환한다. @if, @else, @else if 지시어 @if, @else, @else if 지시어는 JS에서 if-else문과 비슷한 구조이다. @if(조건식1){ 조건식1이 참일때 실행할 코드 } @else if(조건식2){ 조건식2가 참일때 실행할 코드 } @else{ 앞선 조건식이 모두 거짓일때 실행할 코드 } $height: 150vh; div{ height: $height; @if($height > 200vh){ background: yellow; } @else if($..
import (불러오기) 변수나 mixin을 저장한 파일들을 다른 SCSS 파일에서 사용하거나, 큰 프로젝트에서는 여러 파일로 스타일을 나누고, 다른 파일에서 스타일을 불러서 사용하는 경우가 많다. SCSS에서는 CSS에서와 달리 여러 SCSS 파일을 불러와도 최종적으로 하나의 CSS로 컴파일해준다. @import "파일명.scss"; @import "파일명"; SCSS 파일을 import할 때, .scss 확장자를 써도 되고 쓰지 않아도 된다. extend (상속) SCSS에서 특정 선택자를 상속할 때 @extend를 사용하여 상속 가능하다. .top-block{ margin-top: 10px; border: 2px solid black; } .content-block{ @extend .top-bloc..
Mixin Mixin은 재사용할 CSS 스타일을 정의할 수 있는 기능이다. @mixin을 이용해 재사용하고 싶은 스타일을 선언한 후, @include를 통해 사용한다. mixin 역시 변수 선언 파일을 생성한 것처럼, 따로 파일을 생성하여 선언 후 여러 파일에서 사용 가능하다. 이때 파일 이름은 앞에 밑줄(_)을 넣어주어 CSS로 변환되지 않게 해주어야 한다. @mixin strongTitle{ color: blue; font-size: 32px; font-weight: 900; } @import "_mixins"; h1{ @include strongTitle; } mixin에 변수를 허용하게 해주어 더 다양하게 스타일 지정이 가능하다. @mixin link($color){ text-decoration:..
Variables SCSS에서 변수는 기본적으로 웹사이트에서 가장 중요한 색상이나, 가장 중요한 스타일을 저장하고 싶을 때 사용한다. 중요한 변수들을 저장해두는 파일을 생성해야 한다. _파일이름.scss 파일을 생성한다. 이때 중요한 것은 밑줄(_)이다. 밑줄(_)이 있는 파일들은 css로 변하지 않았으면 하는 것들을 의미한다.( = SCSS만을 위한 파일) 파일을 생성했으면 $를 사용해 변수를 선언한다. $bg: #e7473c; $title: 32px; _파일이름.scss에서 필요한 변수 선언을 마치면 우리는 이 변수들을 사용할 파일에서 @import를 통해 불러와 사용해야 한다. @import "_파일이름.scss"; body{ background: $bg; } span{ color: $bg; } h..
Front-End/SCSS 2023. 2. 2. 15:36
색상 함수 mix($color1, $color2) 두 개의 색상을 섞을 때 lighten($color, $amount) 더 밝은 색상을 만들 때 darken($color, $amount) 더 어두운 색상을 만들 때 saturate($color, $amount) 색상의 채도를 올릴 때 desaturate($color, $amount) 색상의 채도를 낮출 때 grayscale($color) 색상을 회색으로 변환 invert($color) 색상을 반전 rgba($color, $alpha) 색상의 투명도 변경 opacify($color, $amount) / fade-in($color, $amount) 색상을 더 불투명하게 만들 때 transparentize($color, $amount) / fade-out($c..
Front-End/SCSS 2023. 2. 2. 15:16
if(조건문, 참, 거짓) $height: 150vh; div{ height: if($height > 100vh, $height, null); } if 함수를 이용해 조건문이 참이면 첫번째 표현식을, 거짓이면 두 번째 표현식을 반환한다. @if, @else, @else if 지시어 @if, @else, @else if 지시어는 JS에서 if-else문과 비슷한 구조이다. @if(조건식1){ 조건식1이 참일때 실행할 코드 } @else if(조건식2){ 조건식2가 참일때 실행할 코드 } @else{ 앞선 조건식이 모두 거짓일때 실행할 코드 } $height: 150vh; div{ height: $height; @if($height > 200vh){ background: yellow; } @else if($..
Front-End/SCSS 2023. 2. 1. 23:48
import (불러오기) 변수나 mixin을 저장한 파일들을 다른 SCSS 파일에서 사용하거나, 큰 프로젝트에서는 여러 파일로 스타일을 나누고, 다른 파일에서 스타일을 불러서 사용하는 경우가 많다. SCSS에서는 CSS에서와 달리 여러 SCSS 파일을 불러와도 최종적으로 하나의 CSS로 컴파일해준다. @import "파일명.scss"; @import "파일명"; SCSS 파일을 import할 때, .scss 확장자를 써도 되고 쓰지 않아도 된다. extend (상속) SCSS에서 특정 선택자를 상속할 때 @extend를 사용하여 상속 가능하다. .top-block{ margin-top: 10px; border: 2px solid black; } .content-block{ @extend .top-bloc..
Front-End/SCSS 2023. 2. 1. 23:46
Mixin Mixin은 재사용할 CSS 스타일을 정의할 수 있는 기능이다. @mixin을 이용해 재사용하고 싶은 스타일을 선언한 후, @include를 통해 사용한다. mixin 역시 변수 선언 파일을 생성한 것처럼, 따로 파일을 생성하여 선언 후 여러 파일에서 사용 가능하다. 이때 파일 이름은 앞에 밑줄(_)을 넣어주어 CSS로 변환되지 않게 해주어야 한다. @mixin strongTitle{ color: blue; font-size: 32px; font-weight: 900; } @import "_mixins"; h1{ @include strongTitle; } mixin에 변수를 허용하게 해주어 더 다양하게 스타일 지정이 가능하다. @mixin link($color){ text-decoration:..
Front-End/SCSS 2023. 2. 1. 23:45
Variables SCSS에서 변수는 기본적으로 웹사이트에서 가장 중요한 색상이나, 가장 중요한 스타일을 저장하고 싶을 때 사용한다. 중요한 변수들을 저장해두는 파일을 생성해야 한다. _파일이름.scss 파일을 생성한다. 이때 중요한 것은 밑줄(_)이다. 밑줄(_)이 있는 파일들은 css로 변하지 않았으면 하는 것들을 의미한다.( = SCSS만을 위한 파일) 파일을 생성했으면 $를 사용해 변수를 선언한다. $bg: #e7473c; $title: 32px; _파일이름.scss에서 필요한 변수 선언을 마치면 우리는 이 변수들을 사용할 파일에서 @import를 통해 불러와 사용해야 한다. @import "_파일이름.scss"; body{ background: $bg; } span{ color: $bg; } h..