SaSS/SCSS 문법

Sass와 SCSS 차이점

• SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass

• Sass는 중괄호와 세미콜론이 없음

• SCSS는 CSS와 유사하게 사용할 수 있음

• SassMeister를 통해서 Sass문법 혹은 SCSS를 CSS로 변환시켜 줌

Parcel

• node.js나 npm을 사용할 줄 알 때 사용

주석(Comment)

• // 컴파일되지 않는 주석

• /* 컴파일되는 주석*/

데이터 종류

• Numbers: 숫자

• Strings: 문자

• Colors: 색상표현

• Booleans: 논리

• Nulls: 아무것도 없음

• Lists: 공백이나 , 로 구분된 값의 목록

• Maps: 객체형, Lists와 유사하나 값이 Key: Value 형태

• Numbers: 숫자에 단위가 있거나 없음

• Strings: 문자에 따옴표가 있거나 없음

• Nulls: 속성값으로 null이 사용되면 컴파일하지 않음

• Lists: ()를 붙이거나 붙이지 않음

• Map: ()를 붙여야 함

중첩(Nesting)

• 함수형태로 사용하여 중첩함

Ampersans(상위 선택자 참조)

• 중첩안에서 &키워드는 상위 선택자를 참조해 치환함

.btn{

position: absolute;

&.active {

color: red;

}

}

.btn.active{

color: red;

}

의 형태로 전환 됨

@at-root(중첩 벗어나기)

• 중첩에서 벗어나고 싶을 때 @at-root를 변수 앞에 붙이면 중첩에서 벗어남

중첩된 속성

• 동일한 네임 스페이스를 가지는 속성들은 다음과 같이 사용 가능

margin-left: 10px;

==

margin: {

left: 10px;

}

변수(Variables)

• 반복적으로 사용되는 값을 변수로 지정

• 변수 이름 앞에는 항상 $를 붙임

• $변수이름: 속성값;

변수 유효범위(Variable Scope)

• 변수는 사용 가능한 유효 범위가 있음

• 선언된 블록{}내에서만 유효범위 가짐

변수 재 할당(Variable Reassignment)

• 변수에 변수를 할당할 수 있음

변수의 전역 설정

!global(전역설정)

• 변수의 유효범위를 전약으로 설정할 수 있음

• $color: red !global;의 형태로 사용됨

변수의 초기값 설정

!defalt

• 할당되지 않은 변수의 초깃값 설정

• 할당 되어 있는 변수에는 기존 할당값 사용

#{}

• 코드의 어디든지 변수 값을 넣을 수 있음

• 문자 보간이라고 함

가져오기(import)

• @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS출력 파일로 병합됨

• CSS 규칙으로 컴파일 되는 경우

-파일 확장자가 .css일 때

-파일 이름이 http://로 시작할 때

-url()이 붙었을 경우

-미디어쿼리가 있는 경우

여러 파일 가져오기

• @import "header", "footer";

파일 분할(Partials)

• 프로젝트 규모가 커지면 파일들을 기능과 부분으로 나눠 유지보수가 쉽도록 관리 하게 됨

• _를 사용하면 별도의 파일로 컴파일 되지않고 사용됨

연산(Operations)

• Sass는 기본적인 연산 기능을 지원함

• 곱하기 시에는 하나 이상의 값이 반드시 단위가 없는 숫자여야 함

• 나누기 시에는 오른쪽 값이 반드시 단위가 없는 숫자여야 함

숫자(Numbers)

• 상대적 단위 연산

• 상대적 단위의 연산의 경우 calc()로 해야함

• 나누기 연산의 주의 사항

• 값 또는 일부가 변수에 저장되거나 함수에 의해 반환되는 경우 사용 가능

• 값이 ()로 묶여있는 경우 사용 가능

• 값이 다른 산술 표현식의 일부로 사용되는 경우

문자(Strings)

• 문자 연산에는 +가 사용됨

• 문자 연산의 결과는 첫 번째 피연산자를 기준으로 함

• 첫 번째 피연산자에 따옴표가 있으면 결과도 따옴표로 나오고

• 반대의 경우에는 따옴표 안나옴

색상(Colors)

• 색상도 연산할 수 있음

• RGBA에서 Alpha 부분을 연산하려면 opacify(), transparentize() 등의 함수를 활용 해야 함

논리(Boolean)

• @if 조건문에서 사용 됨

재활용(Mixins)

• 재사용 할 CSS선언 그룹을 정의하는 기능

• Mixin으로 다양한 스타일을 만들어낼 수 있음

@mixin

• 선언하기

• 공통적인 선언부분을 미리 선언하여 재사용 함

• mixin은 선택자를 포함 가능하고 상위요소 참조도 할 수 있음

@mixin 믹스인이름(기본값 넣을때만) { 스타일; }

@mixin size($w: 100px, $h: 100px) {

width: $w;

height: $h;

}

 

@include

• 포함하기

• 선언된 mixin을 사용하기 위해서 필요함

• @include 믹스인이름;

• @include size;

인수(Arguments)

• mixin은 함수처럼 인수를 가질 수 있음

• 하나의 mixin으로 다양한 결과 만들 수 있음

• 매개변수란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용

• 제공되는 여러 데이터들을 전달인수라고 함

인수의 기본값 설정

인수는 기본값을 가질 수 있음

@mixin 믹스인이름($매개변수: 기본값) {

스타일;

}

키워드 인수

• 필요한 값만 골라서 값을 입력해줌

• @mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값){ 스타일; }

• @include 믹스인이름($매개변수B: 새로운값);

가변 인수

• 입력 인수의 개수가 불확실한 경우 매개변수 뒤에...을 붙임

• A... 하면 A매개변수에 인수가 뒤에 넘치는 만큼 다 들어감

@content

• mixin에 @content가 포함되어 있으면 원하는 스타일 블록을 추가할 수 있음

확장(Extend)

• 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우, 선택자의 확장 기능을 사용할 수 있음(다중 선택자로 추가됨

@extend 선택자

• 내현재 선택자가 어디에 첨부될 것인지, 원치않는 부작용이 초래될 수 있지 않은지, 확장으로 얼마나 큰 CSS가 생성되는지 확인이 필요함

• 확장기능보다 Mixin으로 대체 하는 것을 권장함

함수

• Mixin과 유사하지만 반환되는 내용이 다름

• 함수는 보통 연산된 특정 값을 @return을 통해 반환

@function 함수이름($매개변수) {

@return 값 }

• 함수이름(인수);로 사용함

• 내장함수와 이름이 충돌할수 있으므로 별도의 접두어를 붙여 놓는 것이 좋음

조건과 반복

if(함수)

• 조건의 값에 따라 두 개의 표현식 중 하나만 반환함

• 조건부 삼항 연산자와 비슷함

• if(조건, 표현식1, 표현식2)

• 조건이 true이면 표현식 1을, 조건이 false이면 표현식2 실행

• @if(지시어)

• @if 지시어는 조건에 따른 분기 처리가 가능함

• @if(조건1){조건1이 참일 때 수행}

• @else if(조건2){조건2이 참일 때 수행}

• @else{모두 거짓일 때 수행}

@for

• 스타일을 반복적으로 출력함

• through를 사용하는 형식과 to를 사용하는 형식으로 나뉨

• @for $변수 from 시작 through 종료{ 반복내용 }: 종료만큼 반복(3까지 반복)

• @for $변수 from 시작 to 종료{ 반복내용 }: 종료 직전까지 반복(2까지 반복)

@each

• List와 Map 데이터를 반복할 때 사용

• @each $변수 in 데이터{반복내용}

• index(리스트이름, 인덱스를 찾고 싶은 변수);

• Map의 경우 변수가 하나가 아니라 key값을 받을 변수와 value값을 받을 변수 두가지가 필요함

• @each $key, $value in 데이터

• map-keys(map), map-values(map) : key값이나 value값을 따로 추출하는 내장함수

• index가 필요할 경우 내장함수 이용해서 변환 후 인덱스 구할 필요가 있음

@while

• 조건이 false로 평가될 때까지 내용을 반복함

• 조건이 잘못되면 무한 루프에 빠질 수 있어서 권장하지 않음

• @while 조건{조건이 true일 때 반복내용}

내장함수(Built-in Functions)

• []는 선택 가능한 인수입니다

• zero-based numbering을 사용하지 않음

색상함수

• mix($, $): 두 개의 색을 섞음

• invert($): 색상 반전

• lighten($color, $amount): 더 밝은색을 만듬

• darken($color, $amount): 더 어두운색을 만듬

• rgba($color, $alpha): 색상의 투명도 변경

• opacify($color, $amount)/fade-in($color, $amount): 색상을 불투명하게 함

• sass홈페이지에서 참고

• str-insert, str-index, str-slice, to-upper-case()등이 있음