서비스 포털 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) | 빨간색, 녹색 및 파란색 값에서 색상을 생성합니다. |
| rgba($red, $green, $blue, $alpha) | 빨강, 녹색, 파랑, 알파 값으로 색상을 작성합니다. |
| 빨간색($color) | 색상의 빨간색 구성요소를 가져옵니다. |
| 녹색($color) | 색상의 녹색 구성요소를 가져옵니다. |
| 파랑($color) | 색상의 파란색 구성요소를 가져옵니다. |
| 믹스($color 1, $color 2, [$weight]) | 두 가지 색상을 함께 혼합합니다. |
HSL 기능
| 함수 | 설명 | 가용성 |
|---|---|---|
| hsl($hue, $saturation, $lightness) | 색조, 채도, 밝기 값에서 색상을 작성합니다. | 예 |
| hsla($hue, $saturation, $lightness, $alpha) | 색조, 채도, 밝기 및 알파 값으로 색상을 작성합니다. | 예 |
| 색조($color) | 색상의 색조 구성요소를 가져옵니다. | 예 |
| 채도($color) | 색상의 채도 구성요소를 가져옵니다. | 예 |
| 가벼움($color) | 색상의 밝기 구성요소를 가져옵니다. | 예 |
| 조정-색조($color, $degrees) | 색상의 색조를 변경합니다. | 예 |
| 밝게($color, $amount) | 색상을 더 밝게 만듭니다. | 예 |
| 어둡게($color, $amount) | 색상을 더 어둡게 만듭니다. | 예 |
| 포화($color, $amount) | 색상을 더 채도가 높게 만듭니다. | 예 |
| 채도 저하($color, $amount) | 색상의 채도를 낮춥니다. | 예 |
| 그레이스케일($color) | 색상을 회색조로 변환합니다. | 예 |
| 보완($color) | 색상의 보색을 반환합니다. | 아니요 |
| 반전($color) | 색상의 역을 반환합니다. | 아니요 |
불투명도 기능
| 함수 | 설명 | 가용성 |
|---|---|---|
| 알파($color) | 색상의 알파 구성요소(불투명도)를 가져옵니다. | 예 |
| 불투명도($color) | 색상의 알파 구성요소(불투명도)를 가져옵니다. | 예 |
| rgba($color, $alpha) | 색상의 알파 구성요소를 변경합니다. | 예 |
| opacify($color, $amount) | 색상을 더 불투명하게 만듭니다. | 아니요 |
| 페이드 인($color, $amount) | 색상을 더 불투명하게 만듭니다. | 아니요 |
| 투명화($color, $amount) | 색상을 더 투명하게 만듭니다. | 아니요 |
| 페이드 아웃($color, $amount) | 색상을 더 투명하게 만듭니다. | 아니요 |
기타 색 기능
| 함수 | 설명 | 가용성 |
|---|---|---|
| adjust-color() | 색상의 하나 이상의 구성요소를 늘리거나 줄입니다. | 예 |
| 스케일 색상() | 색상의 하나 이상의 속성의 크기를 유동적으로 조정합니다. | 예 |
| 색상 변경() | 색상의 하나 이상의 속성을 변경합니다. | 아니요 |
| ie-hex-str() | 색을 IE 필터에서 인식하는 형식으로 변환합니다. | 아니요 |
문자열 함수
| 함수 | 설명 | 가용성 |
|---|---|---|
| 인용 해제($string) | 문자열에서 따옴표를 제거합니다. | 예 |
| 견적($string) | 문자열에 따옴표를 추가합니다. | 예 |
| 문자열 길이($string) | 문자열의 문자 수를 반환합니다. | 아니요 |
| str-insert($string, $insert, $index) | $index에서 $string에 $insert 삽입합니다. | 아니요 |
| str-index($string, $substring) | $string에서 첫 번째 발생한 $substring의 인덱스를 반환합니다. | 아니요 |
| str-slice($string, $start-at, [$end-at]) | $string에서 하위 문자열을 추출합니다. | 아니요 |
| 대문자($string) | 문자열을 대문자로 변환합니다. | 아니요 |
| to-소문자($string) | 문자열을 소문자로 변환합니다. | 아니요 |
숫자 함수
| 함수 | 설명 | 가용성 |
|---|---|---|
| 백분율($number) | 단위 없는 숫자를 백분율로 변환합니다. | 예 |
| 라운드($number) | 숫자를 가장 가까운 정수로 반올림합니다. | 예 |
| ceil($number) | 숫자를 다음 정수로 반올림합니다. | 예 |
| 층($number) | 숫자를 이전의 정수로 내림합니다. | 예 |
| 절제($number) | 숫자의 절대값을 반환합니다. | 예 |
| 최소($numbers...) | 여러 숫자 중 최소를 찾습니다. | 예 |
| 최대($numbers...) | 여러 숫자의 최대값을 찾습니다. | 예 |
| 임의([$limit]) | 임의의 수를 반환합니다. | 아니요 |
목록 기능
SCSS의 목록은 변경할 수 없습니다. 모든 목록 함수는 기존 목록을 현재 위치에서 업데이트하지 않고 새 목록을 반환합니다.
모든 목록 함수는 맵에서도 작동하여 쌍 목록으로 처리합니다.
| 함수 | 설명 |
|---|---|
| 길이($list) | 목록의 길이를 반환합니다. |
| n번째($list, $n) | 목록의 특정 항목을 반환합니다. |
| set-nth($list, $n, $value) | 목록의 n번째 항목을 바꿉니다. |
| 조인($list 1, $list 2) | 두 목록을 하나로 결합합니다. |
| 추가($list 1, $val) | 목록 끝에 단일 값을 추가합니다. |
| zip($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 믹스인
믹스인을 사용하면 사이트 전체에서 재사용할 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 참조를 참조하십시오.