서비스 포털 SCSS 입문서
SCSS는 Sass(Syntactically Awesome StyleSheets) 사양의 하위 집합이며 CSS의 확장입니다. 유효한 모든 CSS 스타일 시트는 유효한 SCSS입니다.
SCSS 변수
SCSS 변수는 스타일시트 전체에서 재사용하려는 정보를 저장하는 방법입니다. 색상, 글꼴 스택 또는 재사용하려는 CSS 값과 같은 항목을 저장할 수 있습니다. SCSS는 $ 기호를 사용하여 무언가를 변수로 만듭니다.
SCSS는 다음 데이터 유형을 지원합니다.
- 숫자(단위 포함)
- 문자열(따옴표 포함 또는 제외)
- 색상(이름 또는 이름)
- 부울
변수는 사용 가능한 여러 함수 또는 믹스인 중 하나에 대한 인수이거나 결과일 수도 있습니다. 번역하는 동안 변수 값이 출력 CSS 문서에 삽입됩니다.
예:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100%$font-stack;
color: $primary-color;
}Sass에 대한 자세한 내용은 Sass/SCSS 참조를 참조하세요.
SCSS 함수
서비스 포털 SCSS 컴파일러의 기능 목록입니다.
RGB 기능
| 기능 | 설명 |
|---|---|
| rgb($red, $green, $blue) | 빨강, 녹색 및 파랑 값으로 Color를 만듭니다. |
| rgba($red, $green, $blue, $alpha) | 빨강, 녹색, 파랑 및 알파 값으로 Color를 만듭니다. |
| 빨강($color) | 색상의 빨간색 구성 요소를 가져옵니다. |
| 녹색($color) | 색상의 녹색 구성요소를 가져옵니다. |
| 블루($color) | 색상의 파란색 구성요소를 가져옵니다. |
| 믹스($color 1, $color 2, [$weight]) | 두 가지 색상을 함께 혼합합니다. |
HSL 함수
| 기능 | 설명 | 가용성 |
|---|---|---|
| hsl($hue, $saturation, $lightness) | 색조, 채도 및 밝기 값으로 Color를 만듭니다. | 예 |
| hsla($hue, $saturation, $lightness, $alpha) | 색조, 채도, 밝기 및 알파 값으로 Color를 만듭니다. | 예 |
| 색조($color) | 색상의 색조 구성 요소를 가져옵니다. | 예 |
| 채도($color) | 색상의 채도 구성 요소를 가져옵니다. | 예 |
| 가벼움($color) | 색상의 밝기 구성 요소를 가져옵니다. | 예 |
| adjust-hue($color, $degrees) | 색상의 색조를 변경합니다. | 예 |
| 밝게($color, $amount) | 색상을 더 밝게 만듭니다. | 예 |
| darken($color, $amount) | 색상을 더 어둡게 만듭니다. | 예 |
| 포화 ($color, $amount) | 색상의 채도를 높입니다. | 예 |
| 불포화 ($color, $amount) | 색상의 채도를 낮춥니다. | 예 |
| 그레이스케일($color) | 색상을 회색 음영으로 변환합니다. | 예 |
| 보완($color) | 색상의 보수를 반환합니다. | 아니요 |
| 반전($color) | 색상의 반전을 반환합니다. | 아니요 |
불투명도 기능
| 기능 | 설명 | 가용성 |
|---|---|---|
| 알파($color) | 색상의 알파 구성 요소(불투명도)를 가져옵니다. | 예 |
| 불투명도($color) | 색상의 알파 구성 요소(불투명도)를 가져옵니다. | 예 |
| rgba ($color, $alpha) | 색상의 알파 구성 요소를 변경합니다. | 예 |
| 불투명 화 ($color, $amount) | 색상을 더 불투명하게 만듭니다. | 아니요 |
| 페이드 인($color, $amount) | 색상을 더 불투명하게 만듭니다. | 아니요 |
| 투명화($color, $amount) | 색상을 더 투명하게 만듭니다. | 아니요 |
| 페이드 아웃($color, $amount) | 색상을 더 투명하게 만듭니다. | 아니요 |
다른 색상 기능
| 기능 | 설명 | 가용성 |
|---|---|---|
| 색상 조정() | 색상의 구성요소를 하나 이상 늘리거나 줄입니다. | 예 |
| 스케일 색상() | 색상의 하나 이상의 속성을 유동적으로 조절합니다. | 예 |
| 변경 색상() | 색상의 속성을 하나 이상 변경합니다. | 아니요 |
| 즉-hex-str() | 색상을 IE 필터에서 인식할 수 있는 형식으로 변환합니다. | 아니요 |
문자열 함수
| 기능 | 설명 | 가용성 |
|---|---|---|
| unquote($string) | 문자열에서 따옴표를 제거합니다. | 예 |
| 견적($string) | 문자열에 따옴표를 추가합니다. | 예 |
| str-length($string) | 문자열의 문자 수를 반환합니다. | 아니요 |
| str-insert ($string, $insert, $index) | $index에서 $string에 $insert 삽입합니다. | 아니요 |
| str-index($string, $substring) | $string에서 $substring의 첫 번째 항목 인덱스를 반환합니다. | 아니요 |
| str-slice ($string, $start-at, [$end-at]) | $string에서 부분 문자열을 추출합니다. | 아니요 |
| to-upper-case($string) | 문자열을 대문자로 변환합니다. | 아니요 |
| to-소문자($string) | 문자열을 소문자로 변환합니다. | 아니요 |
숫자 함수
| 기능 | 설명 | 가용성 |
|---|---|---|
| 백분율($number) | 단위 없는 숫자를 백분율로 변환합니다. | 예 |
| 일주($number) | 숫자를 가장 가까운 정수로 반올림합니다. | 예 |
| ceil($number) | 숫자를 다음 정수로 반올림합니다. | 예 |
| 바닥($number) | 숫자를 이전 정수로 내림합니다. | 예 |
| 아BS($number) | 숫자의 절대값을 반환합니다. | 예 |
| min($numbers...) | 여러 숫자 중 최솟값을 찾습니다. | 예 |
| 최대($numbers...) | 여러 숫자 중 최대값을 찾습니다. | 예 |
| 임의([$limit]) | 임의의 숫자를 반환합니다. | 아니요 |
기능 목록
SCSS의 목록은 변경할 수 없습니다. 모든 목록 함수는 기존 목록을 현재 위치에서 업데이트하지 않고 새 목록을 반환합니다.
모든 목록 함수는 맵에서도 작동하며 맵을 쌍의 목록으로 처리합니다.
| 기능 | 설명 |
|---|---|
| 길이($list) | 목록의 길이를 반환합니다. |
| nth($list, $n) | 목록의 특정 항목을 반환합니다. |
| set-nth($list, $n, $value) | 목록의 n번째 항목을 대체합니다. |
| 조인($list 1, $list 2) | 두 목록을 하나로 결합합니다. |
| 추가($list 1, $val) | 목록 끝에 단일 값을 추가합니다. |
| 우편 번호($lists...) | 여러 목록을 하나의 다차원 목록으로 결합합니다. |
| 인덱스($list, $value) | 목록 내에서 값의 위치를 반환합니다. |
| 목록 구분 기호($list) | 목록의 구분 기호를 반환합니다. |
사용자 지정 함수 추가
Scss @function my-calculation-function($some-number, $another-number){ @return $some-number + $another-number }
SCSS 중첩
SCSS를 사용하면 HTML의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택기를 중첩할 수 있습니다.
예:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}ul, li 및 a 선택기는 탐색 선택기 안에 중첩되어 CSS를 구성하고 더 읽기 쉽게 만드는 좋은 방법입니다. 위젯이 렌더링될 때 생성된 CSS는 다음 코드 블록과 같습니다.nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}Sass에 대한 자세한 내용은 Sass/SCSS 참조를 참조하세요.
SCSS 연산자
SCSS에는 +, -, *, / 및 %와 같은 몇 가지 표준 수학 연산자가 있습니다.
간단한 수학을 사용하여 옆
& 기사의 너비를 계산합니다. 예:.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}Sass에 대한 자세한 내용은 Sass/SCSS 참조를 참조하세요.
SCSS 믹스인
mixin을 사용하면 사이트 전체에서 재사용할 CSS 선언 그룹을 만들 수 있습니다. 믹스인을 보다 유연하게 만들기 위해 값을 전달할 수 있습니다.
다음 코드 블록은 border-radius의 예입니다.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}Sass에 대한 자세한 내용은 Sass/SCSS 참조를 참조하세요.