수많은 SCSS의 기능들

수많은 SCSS의 기능들

CSS Preprocessor로 전처리 도구인데 브라우저에서 동작 안함

그래서 node.js환경에서 css로 바꿔주고 사용되야함

주석, 중첩(Nesting)

// 로 주석 처리하면 컴파일이 안됨 그래서 주석이 표시 안됨

/**/로 주석 처리하면 컴파일에도 주석이 표시됨

코드 내부에 작성해서 중첩 가능

근데 이제 CSS에서도 nesting가능함

(& 는 상위 선택자를 참조하는 기능)

상위 선택자를 이렇게도 쓸 수 있음

변수 쓰고 싶으면 $를 붙여주면 됨

그리고 하위에서 사용할 수 있음

중첩을 벗어나서 상위선택자 없이 변수를 쓰고싶으면 @at-root를 붙여주면 된다

중복되는 키워드는 따로 만들어줄 수 있음(중첩 키워드)

다중 선택자도 중첩으로 가능함

변수, 데이터, 연산자

변수

변수 선언은 $ 붙여주면 된다.

유효범위를 전역으로 바꿔주고 싶으면

!global 붙여주면 전역에서 쓸 수 있다. 근데 v2부터 없앤다고 한다

그리고 전역 변수에 있으면 값을 덮어쓴다 조심해야함

!default를 쓰면 이미 있는 값이 있다면 그값을 쓴다

보간 기능 (``같은거)

데이터

SCSS에서 데이터 타입은 Numbers, Strings, Colors, Booleans, Null, Lists, Maps가 있다.

단위가 붙어있는 숫자들도 숫자 데이터로 처리한다

css에서 쓰는 문자들과 ””로 묶은 것을 문자로 처리한다

색상에 쓰이는 값은 colors데이터로 처리한다

null데이터 타입은 컴파일 되지 않는다.

()로 묶거나, 쉼표로 구분되거나 띄어쓰기를 넣어놨으면 Lists데이터로 처리할 수 있다.

(key1 : value1, key2 : value2) 처럼 사용해서 Maps 데이터로 만들 수도 있다.

연산자

JS의 연산자와 비슷하게 사용한다 근데 단위가다르면 연산이 안된다 → 이럴때는 calc 함수를 사용한다

산술 연산자 : +, -, *, /, %

근데 / 는 다른 기능과 겹쳐서 처리를해줘야한다 이를 해결하는 방법은

1. 소괄호로 감싸준다 (2버전부터 사라져서 calc도 붙여줘야한다)
2. 값을 변수로 바꿔준다
3. +0px을 해준다 (암시적 형변환 같은거)

비교연산자 : ==, ≠, >, <, ≥, ≤

@if, @else와 함께 같이 쓸 수 있다.

논리 연산자 : and, or, not

쓸 줄 알잖아?

재활용

재활용할 스타일을 @mixin에 담아놓고 다른데서 @include를 사용해서 쓸 수 있다.

함수처럼 매개변수도 받을 수 있고 기본값도 정해줄 수 있다.

안에 조건문도 추가해줄 수 있다.

삼항 연산자도 가능 하다

if(조건, 참값, 거짓값)

maxin내부에서 SCSS문법 모두 가능하다(예를들면 중첩)

가변인수도 쓸 수 있다. (rest파라미터랑 비슷)

전개 연산도 쓸수있다 (스프레드 문법)

응용 전개 + 보간 기능

키워드 기억하기 힘드니깐 매개변수 이름을 키워드로 사용할 수 있다. 이때 안 넣는 값도 있을 수 있으니 null로 기본값 준다.

⇒

컨텐츠 규칙 - maxin을 사용할 때 뒤에 중괄호를 넣어 스타일 블록을 만들 수 있다. 그리고 그거를 @content를 통해 넣을 수 있다.

css에서 미디어 쿼리를 SCSS로 하면

내장모듈 @use “sass:map” 을 통해 maps의 값들을 가지고오고 @content를 통해 스타일 시트를 넣어준다 그러면

이렇게 쓸 수 있다.

스타일 시트를 통해 사용하는곳 → mixin에 데이터를 넣을 수도 있지만

using을 사용해서 mixin → 사용하는 곳의 스타일 시트 에 데이터를 줄 수도 있다.

⇒ 이거는 기본값이 없어서 쓰게 되면 모든 곳에 넣어줘야 한다

확장

이전에 작성한 스타일 상속받고 거기에 확장할 수 있음 extend와 동일

중첩안에 중첩쓰면 부작용으로 선택자 폭팔이라는 게 있다.

%를 사용해서 상속만을 위한 스타일을 만들어 줄 수도 있다.

근데 @media를 쓸 때는 그 안에 있는 %만 상속 받을 수 있다. (유효범위가 있음)

따라서 이런 확장하는 경우는 전역인 스타일인 경우만 쓰고 아니면 @mixin을 사용해서 표현해줄 수 있다. (extend 비추천)

함수

@function으로 함수 만들고 @return으로 값 반환한다

조건과 반복

@if, @else if, @else 쓸 수 있고 if(조건, 참, 거짓)로 삼항연산자도 쓸 수 있다.

@each를 이용해서 반복을 쓸 수 있다 (for… in와 유사)

@for를 이용하면 from 시작 through/to 끝 으로 for문을 구현할 수 있다. through는 ≤, to 는 < 이다

@while ()을 쓰면 while문을 구현할 수 있다.

가져오기, 모듈

@import를 사용해서 다른 파일을 가져올 수 있다. (scss 확장자 빼고, 붙이면 컴파일시 같이 나옴)

@use 를 사용하면 네임스페이스로 사용해줄 수 있다. as로 네이밍 바꿀 수 도 있음 import는 네임스페이스 못씀

그러므로 모듈화 할때는 @use를 써줘야한다

근데 범위 밖에서 사용하고 싶으면 @forward로 export해줘야 한다

이떄 export하는 경로도 지정해준다.

SCSS의 내장 모듈들

전역 함수

1. hsl, hsla : 색조 채도 밝기
2. if : 3항연산
3. rgba : 색상과 투명도
4. darken : 색상과 얼마나 얼마나 어둡게 할건지
5. lighten : 색상과 얼마나 얼마나 밝게 할건지

sass:color

1. color.adjust : 기준색상과 변경시킬 값을 넣어 계산한 색상을 반환
2. color.grayscale : 색상을 회색처리해준다
3. color.invert: 색상을 반전 시킨

sass:list

1. list.append : 첫번째 인자 리스트에 두번째 인자 값을 추가해서 반환
2. list.index : 첫번째 인자 리스트에서 두번째 인자가 몇번째 인덱스인지 반환해준다
3. list.join : 두개인 리스트를 받아 함쳐서 반환한다
4. list.nth : 첫번째 인자 리스트에서 두번째 인자 값에 해당하는 순번의 값을 반환 (list[i+1]느낌)

sass:map

1. map.get : 키값에 해당하는 value를 가져옴 없으면 null반환
2. map.has-key : 키값이 map데이터에 들어있는지 유무 boolean값으로 반환
3. map.keys : 키값들의 리스트를 반환 (Object.keys와 동일)
4. map.merge : 두개의 map데이터를 합쳐준다(겹치는거 있으면 뒤에 값이 덮어쓴다.)
5. map.remove : map데이터에 key값을 삭제해서 반환한다, 두번째 인수에 값을 넣어주면 값이 일치한때만 삭제해준다

sass:math

1. math.ceil : 올림
2. math.floor : 내림
3. math.round : 반올림
4. math.max : 최대값
5. math.min : 최소값
6. math.abs : 절대값
7. math.is-unitless : 단위가 없으면 false, 있으면 true
8. math.compatible : 연산이 가능한가 여부 반환

sass.meta

1. meta.call : 콜백함수를 호출해줌
2. meta.type-of : 첫번째인수가 두번째 인수인 타입과 동일한지 반환

sass:string

1. string.quote : 따옴표 붙여줌
2. string.unquote : 따옴표를 제거해줌
3. string.index : 문자데이터에서 검색하고 싶은 문자가 몇번째 인덱스에서 시작하는지 찾음
4. string.insert : 문자열에 문자열을 삽입해줌
5. string.length : 문자열 길이 반환
6. string.slice : 문자열 잘라서 반환
7. string.to-upper-case : 대문자로 변경 반환
8. string.to-lower-case : 소문자로 변경 반환
9. string.unique-id : 유니크한 문자 반환