서비스 포털 SCSS 입문서

SCSS는 Sass(Syntactically Awesome StyleSheets) 사양의 하위 집합이며 CSS의 확장입니다. 유효한 모든 CSS 스타일시트는 유효한 SCSS입니다.

SCSS 변수

SCSS 변수는 스타일시트 전체에서 다시 사용할 정보를 저장하는 방법입니다. 색상, 글꼴 스택 또는 재사용하려는 CSS 값과 같은 항목을 저장할 수 있습니다. SCSS는 $ 기호를 사용하여 무언가를 변수로 만듭니다.

SCSS는 다음 데이터 유형을 지원합니다.

• 숫자(단위 포함)
• 문자열(따옴표 포함 또는 제외)
• 색상(이름 또는 이름)
• 부울

변수는 사용 가능한 여러 함수 또는 mixin 중 하나에 대한 인수 또는 결과일 수도 있습니다. 번역하는 동안 변수 값은 출력 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)	색의 파란색 구성 요소를 가져옵니다.
mix($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)	색상의 알파 구성요소를 변경합니다.	예
불투명화($color, $amount)	색상을 더 불투명하게 만듭니다.	아니요
페이드 인($color, $amount)	색상을 더 불투명하게 만듭니다.	아니요
transparentize($color, $amount)	색상을 더 투명하게 만듭니다.	아니요
페이드 아웃($color, $amount)	색상을 더 투명하게 만듭니다.	아니요

다른 색상 기능

함수	설명	가용성
조정-색상()	색상의 구성요소를 하나 이상 늘리거나 줄입니다.	예
scale-color()	색상의 하나 이상의 속성을 유동적으로 배율 조정합니다.	예
변경 색상 ()	색상의 속성을 하나 이상 변경합니다.	아니요
ie-hex-str()	색을 IE 필터에서 인식할 수 있는 형식으로 변환합니다.	아니요

문자열 함수

함수	설명	가용성
인용 부호 없음($string)	문자열에서 따옴표를 제거합니다.	예
견적($string)	문자열에 따옴표를 추가합니다.	예
str-length($string)	문자열의 문자 수를 반환합니다.	아니요
str-insert($string, $insert, $index)	$index에서 $insert $string에 삽입합니다.	아니요
문자열 인덱스($string, $substring)	$string에서 첫 번째 $substring 항목의 인덱스를 반환합니다.	아니요
str-slice($string, $start-at, [$end-at])	$string에서 하위 문자열을 추출합니다.	아니요
대문자로($string)	문자열을 대문자로 변환합니다.	아니요
소문자로($string)	문자열을 소문자로 변환합니다.	아니요

숫자 함수

함수	설명	가용성
백분율($number)	단위 없는 숫자를 백분율로 변환합니다.	예
라운드($number)	숫자를 가장 가까운 정수로 반올림합니다.	예
실($number)	숫자를 다음 정수로 반올림합니다.	예
층($number)	숫자를 이전 정수로 내림합니다.	예
abs($number)	숫자의 절대값을 반환합니다.	예
분($numbers...)	여러 숫자 중 최소값을 찾습니다.	예
최대($numbers...)	여러 숫자 중 최대값을 찾습니다.	예
랜덤([$limit])	난수를 반환합니다.	아니요

목록 기능

SCSS의 목록은 변경할 수 없습니다. 모든 목록 함수는 기존 목록을 현재 위치에서 업데이트하지 않고 새 목록을 반환합니다.

모든 목록 함수는 맵에 대해서도 작동하여 쌍의 목록으로 취급합니다.

함수	설명
길이($list)	목록의 길이를 반환합니다.
nth($list, $n)	목록의 특정 항목을 반환합니다.
set-nth($list, $n, $value)	목록에서 n번째 항목을 바꿉니다.
조인($list 1, $list 2)	두 목록을 하나로 결합합니다.
append($list 1, $val)	목록 끝에 단일 값을 추가합니다.
zip($lists...)	여러 목록을 하나의 다차원 목록으로 결합합니다.
인덱스($list, $value)	목록 내에서 값의 위치를 반환합니다.
list-separator($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에는 +, -, *, /, %와 같은 몇 가지 표준 수학 연산자가 있습니다.

간단한 수학을 사용하여 aside & article의 너비를 계산합니다. 예:

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

생성된 CSS는 다음과 같습니다.

.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 선언 그룹을 만들 수 있습니다. 값을 전달하여 mixin을 보다 유연하게 만들 수 있습니다.

다음 코드 블록은 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); }

생성된 CSS는 다음과 같습니다.

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Sass에 대한 자세한 내용은 Sass/SCSS 참조를 참조하세요.