목차
SCSS 정의 SCSS 예제 - 코드 맛보기 SCSS 예제 - css 확장자 파일에서도 사용 가능 SASS 함수 유형
SCSS 정의
SCSS (SASS + CSS)
CSS pre-processor (전처리기) 일종임.
CSS 반복을 줄여, 시간 절약 가능. (= CSS 유지보수 용이)
SASS 공식 사이트: https://sass-lang.com/guide
SCSS 예제 - 코드 맛보기
[style.scss]
/* 변수명/변수값 정의 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* 변수 사용 */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
[style.css]
body {
background-color: lightblue;
color: darkblue;
font-size: 18px;
}
[index.html]
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<body>
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
</body>
</html>
SCSS 예제 - css 확장자 파일에서도 사용 가능
트리플 님 (240702) https://sir.kr/g5_skin/59608
.pic_partial_lt .card {
& > figcaption {display: grid;gap: 1ch;}
.no-preference & {
> * {grid-area: 1 / 1;}
> img {block-size: 100%;inline-size: 100%;object-fit: cover;}
> figcaption {padding: 2ch;padding-block-start: 17ch;color: white;background: linear-gradient(to top, #000, #0000);}
> figcaption a {color: white;}
> figcaption a:hover {color:#a22121}
.reduced & {
> a img {border-radius: 25px;block-size: 20ch;object-fit: cover;}
> img {border-radius: 25px;block-size: 18ch;object-fit: cover;}
}
.pic_partial_lt {
* {box-sizing: border-box;margin: 0;}
section {
display: grid;gap: 5vmin;
> p {text-align: center;}
}
p {line-height: 1.5;text-wrap: pretty;}
h2 {font-size:1.2em;}
img {max-width: 100%;}
}
PS. 위 예에서, & 기호는 부모선택자를 의미.
SASS 함수 유형
SASS - String 함수들 SASS - Numeric 함수들 SASS - List 함수들 SASS - Map 함수들 SASS - Selector 함수들 SASS - Introspection 함수들 SASS - Color 함수들
최신댓글