[5주차] 3. SASS/SCSS의 문법(변수, 가져오기, 연산, 재활용, 확장)

SASS/SCSS 문법

변수

1. !global(전역 설정)

• 값 뒤에 사용하는 개념
• 이 플래그를 사용해서 선언해놓은 변수를 유효범위에 종속되지 않고 전체 영역에서 쓸 수 있는 형태로 정의 가능
• 기존에 선언된 전역변수가 덮어 써질 수 있다.(변수를 재정의하지 않는 이상)
• 변수가 적용되는 곳을 기준으로 해서 가장 가까운 곳에서 마지막에 선언된 값이 마지막으로 들어간다.

2. !default(초기값 설정)

• 할당되지 않은 초기값을 설정
• 할당된 변수에는 새롭게 정의되는 값을 적용하지 않고 기존 할당 값(전역변수 등) 사용
• 변수와 값을 설정할 때 기존 변수가 있을 수도 있으니 현재 설정하는 변수의 값은 기존에 변수가 있는 경우에는 사용하지 않는다는 의미로 사용
• Bootstrap, 기타 CSS, SCSS 상뇽하는 라이브러리들을 우리의 프로젝트 파일과 연결해서 사용하는 중일 때 특정 변수이름을 기존 라이브러리에서 사용하는 값과 동일하게 작성했을 때 그 값들이 라이브러리에서 제공하는 값들이 무작정 들어가버리면 우리가 작성해놓은 값이 들어가지 못하므로 기본 라이브러리에서는 이 플래그를 많이 사용한다. 사용자가 작성한 코드가 라이브러리를 통해서 덮어써져버리면 안되기 때문이다.

3. { }(문자 보간)

• 변수에 특정한 값을 담아놓은 상태에서 어떠한 특정한 문자의 중간 부분에 그 변수로 만들어 놓은 특정한 내용을 삽입하려 할 때 삽입하려는 장소 부분에 이 부분에 삽입이 된다는 것을 표시하기 위해 #과 함께 {삽입하려는 특정한 내용이 들어있는 변수}를 쓸 수 있다.

---

import(가져오기)

• 현 css 문서에서 @import 규칙을 사용해서 다른 css 문서 가져온다. 이거와 비슷한 sass의 규칙
• 개념 자체는 CSS와 동일하게 무언가를 가져오는 것이지만 가져고온 파일을 병합한다는 것으로 인해 조금 다른 개념이 된다.
• Sasss @import 규칙과 CSS @import 규칙을 구분할 수 있어야 한다.
• 외부에서 가져온 특정한 Sass 파일들을 모두 단일 CSS 출력 파일로 병합하기 위해 사용
• CSS와 혼동시에는 url 함수 써있나 확인(Sass에서는 불필요하다.) 작성방식 : @import ”경로”;
• 경로에 확장자를 안쓰면 .scss나 .sass 붙어있다고 생각하면 된다.(단 세미콜론 붙어있으면 Sass가 아니라 SCSS라고 생각하면 된다.)

1. Sass @import 규칙이 CSS의 순수한 @import 규칙으로 해석되는 상황

• 파일 확장자가 .css일 때
• 파일 이름이 http://로 시작하는 경우
• url( )이 붙었을 경우(url 함수로 무언가를 호출할 경우)
• 미디어 쿼리가 있는 경우

2. 여러 파일 가져오는 경우

• , 를 사용해서 여러 파일을 한번에 가져올 수 있는 개념 존재

3. Partials(파일 분할)

• 프로젝트 규모가 클수록 파일을 쪼개는 개념이 많아짐
• header의 내용이 좀 많아졌을 때 header.scss로 구분하거나 side-menu 내용 많아지면 side-menu. scss 파일로 구분함
• 구분해야지 나중에 유지보수가 쉬워짐
• 파일을 분할하면 분할해놨던 문서들은 그상태로 각각의 css로 나눠져서 컴파일된다.
• 분리한 내용들이 css로 들어갈 때 다 나눠져서 저장하게 됨 그래서 너무 많은 파일들이 생성되어 관리하거나 성능이 떨어질 수 있음
• sass에서 지원하는 기능으로 파일을 분할해 scss로 만들되 _를 문서이름 앞에다 붙이면 나중에 컴파일시 특정한 scss문서로 컴파일하지 않고 합쳐져서 나오는 개념 _문서이름.scs
• _를 붙일 경우 독립적인 파일로 생성하지 않는다(컴파일 하지 않는다)로 정의되어 있다
• webpack, parcel, gulf 등의 bundle 할 때 설정된 값으로 정의되서 나오기 때문에 _붙이는 개념을 이해를 하고 쓰되 결과는 똑같지 않을 수 있으므로 권장사항으로 생각하고 되도록이면 붙이는 방향으로 작성

---

연산(Operations)

- Sass의 기본적인 연산 기능 지원

1. 산술 연산자

종류	설명	주의 사항
+	더하기
-	빼기
*	곱하기	하나 이상의 값이 반드시 숫자(number), 단위x
/	나누기	오른쪽 값이 반드시 숫자(number), 단위x
%	나머지

2. 비교 연산자

종류	설명
==	동등
!=	부등(다르다)
<	대소 / 보다 작은
>	대소 / 보다 큰
<=	대소 및 동등 / 보다 작거나 같은
>=	대소 및 동등 / 보다 크거나 같은

3. 논리(불린, Boolean) 연산자

종류	설명
and	그리고
or	또는(둘 중 하나는 참)
not	부정(js 에서는 !)

---

숫자(Number) 연산

1. 상대적 단위 연산

- 일반적으로 절댓값을 나타내는 px 단위로 연산
- 상대적 단위(%, em, vs 등)을 같이 연산할 경우 CSS calculation 함수 cal( )로 연산해야 함
- CSS 순수한 기능인 cal(단위-다른단위)로 정의해서 연산 가능

2. 나누기 연산 주의사항

• 오른 쪽 값이 순수한 값이어야 한다.
• CSS는 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있다. 결과적으로 구분하는 용도로 쓰일 수 있다.
• / 를 나누기 연산 기능 사용 시 조건
  • 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우. 변수에 할당해서 나누기 ex) 변수(함수)/숫자
  • 연산하려는 부분을 ( )로 묶기
  • 값이 다른 산술 표현식의 일부로 사용되는 경우, 연산이 가능한 다른 산술 식에 함께 연산하는 경우(끼어 팔기)

---

문자(Strings) 연산

• + 연산자 사용
• 결과는 첫 번째 피연산자를 기준으로 함
• 첫 번째 피연산자 부분에 따옴표 붙어 있을 시 연산 결과에 따옴표를 붙임(피연산자의 따옴표 여부에 따라 연산 결과의 따옴표 여부도 달라짐)

---

색상(Colors) 연산

1. RGB 방식

color : #123456 + #345678;
    // R : 12 + 34 = 56
    // G : 34 + 56 =8a
    // B : 56 + 78 = ce
}

2. rgba 방식

• 작성 방식

div { background : rgba(50,100,150, .5) + rgba(10,20,30, .5);

// R : 50 + 10 = 60 // G : 100 + 20 = 120

// B : 150 + 30 = 180

// A : Alpha channels must be equal

}

• alpha 부분 쪽 값이 동일해야 함
• alpha 값 연산하기 위한 Sass에서 제공하는 색상함수(Color functions) 사용 가능
  : opacity(rgba를 정의한 변수, 얼마나 더 불투명하게 할 것인지의 값(기존 a값+더 불투명하게 할 정도) ), transparentize( rgba를 정의한 변수, 얼마나 더 투명하게 할 것인지의 값(기존 a값 – 투명하게 할 정도))

---

논리(Boolean) 연산

• JS의 &&, || , !와 동일한 개념
• 기본적으로 Sass의 @if 조건문이랑 같이 쓰임
• @if 조건문에서 조건을 설정할 때 사용((조건 and 조건), (조건 or 조건), not (조건))

---

재활용(Mixins)

- 재활용이 가능한 CSS 선언그룹을 정의하는 방법
- @mixin과 @include
: 특정 코드를 a, b, c 부분에 다 쓰고 싶을 때 한번만 작성하고 a, b,c에서 사용하겠다는 의사만 명시해주면 각각의 부분에서 쓸 수 있다. 반복해서 쓰고 싶은 그 특정 코드를 정의해주는 것이 @mixin이고 사용하는 것이 @iclude 이다.

1. @mixin

• 재사용 가능한 코드 선언 가능
• 특정한 코드를 재사용하기 위한 영역을 정의하는 구간
• ( )안에 밖에서 들어갈 값이 없으면 적용되는 기본값을 정의할 수 있다.
• ( ) 굳이 안써도 됨(밖에서 들어갈 값 필요 없을시)
• 선택자를 포함 가능하고 상위(부모) 요소 참조(ex)&)도 가능
• SCSS 문법

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

선언하고자 하는 재사용 코드

}

• Sass 문법

= 믹스인이름

    스타일

---

2. @include

• @mixin에서 정의한 특정코드를 반복하고자 하는 선택자 안에 작성
• ( ) 작성 안할시 mixin에서 정의한 기본값 자동 적용
• 특정 부분에만 기본값 말고 다른 값 넣고 싶을 시 ( ) 안에 다른 값 적용하고픈 특정 변수이름: 다른값 입력
• 매개변수가 두개이상인데 ( )안에 한 개만 입력한다면 순서대로 적용됨으로써 첫번째에 적용되게 된다.
• mixin에서 선언된 매개변수를 include에서 인수를 넣어줌으로써 사용하게 됨
  - SCSS- Sass
• 선택자 + 믹스인이름​
• 선택자 { @include mixin이름(변수 값 입력); }

---

3. 인수(Arguments)

• @mixin ( )안에 $매개변수 선언
• @include ( ) 안에 인수 선언
• 매개 변수(parameter) 값을 받아서 중간에서 사용할 수 있게 해주는 특정한 변수
• 인수(인자): 넣는 값을 의미한다.
• 매개변수와 인수는 다른 개념이다.
• 인수는 매개변수에 순서대로 전달하게 된다.
• 인수를 통해 mixin 안으로 밖에서 특정한 값을 전달 시킬 수 있다. 그러면 그 안에서 특정한 변수가 그 값을 받아서 스타일에 적용

인수의 기본값 설정

• 기본 값 설정시 굳이 값을 외부에서 받지 않아도 @mixin이 정의되는데 문제 없도록 설정할 수 있다.
• 인수부분에 특정한 값을 전달하지 않게되면 매개변수는 결과적으로 값이 없는 경우가 되서 스타일에 아무것도 적용이 불가능하게 되어 error가 발생한다.
• 인수에 기본값을 설정하게 되면 매개변수에 받을 값이 없더라도 error가 나지 않는다
• @mixin 이름($매개변수 : 기본값) { 스타일; }

키워드 인수(Keyword Arguments)

• 인수를 정확히 전달하고 싶은 매개변수에 전달하기 위해 사용
• 이것을 활용하면 첫번째 부분이 아닌 중간부분에 특정한 매개변수에 정확하게 값을 전달할 수 있다.
• @include 믹스인이름(내가 전달하고자 하는 매개변수 이름 : 인수);

가변 인수(Variable Arguments)

• 전달하고자 하는 값이 정확히 수치가 정해져 있으면 상관은 없지만 인수가 전달되는 개수가 가변하는 경우 처리
• 입력할 인수의 개수가 불확실할 경우 매개변수 뒤에 ….을 붙여줌
• …이 적용된 매개변수에게 이후에 인수들이 들어올 수 있으니 자기가 속한 번호 이후에 나머지 내용도 받아주라는 것을 매개변수… 이렇게 적음으로써 정의 가능, 그래서 …이 적용된 매개변수에 해당 번호 포함한 그 이후 내용도 다 들어가게 된다.
• 가변하는 인수를 …이 적용된 매개변수에 몰아줄 수 있다.
• 이 인수를 활용하여 background 속성에 다중 이미지를 넣을 수 있다.
• 전달하는 값(include 인수부분에)으로 활용도 가능 : 리스트 형태를 담은 변수 뒤에 …쓰기(리스트 값 전개하는 형태), map 데이터 형태 담은 변수 뒤에 … 쓰기(필요한 값만 키워드 인수 개념으로 활용 가능), 직접 필요한 값만 ((map 데이터)…)로 작성 직접 키워드 인수로 전달

---

4. @content

• 이 규칙 있을 시 mixin 사용시 뒷부분에 추가적으로 삽입하고자 하는 특정한 css 스타일 코드 블록을 같이 넣어줄 수 있다.
• 필요없는 부분에는 사용하지 않거나 필요한 경우에는 코드블록을 추가해서 content 부분에 추가적인 특정 css 부분을 더 넣을 수 있다.
• @mixin에서 활용 가능
• 부족한 부분이 있을시 인수로 추가로 전달하는 것이 아닌 새롭게 정의해서 전달하고 싶을 때 사용
• @include 믹스인 이름() { 스타일; } 여기서 새롭게 정의된 스타일이 @mixin 안의 @content로 들어갈 수 있다.
• 기본적으로 가상요소는 이미지를 받아와서 삽입할 수는 있지만 그 이미지의 크기, 위치 등은 정의할 수 없다. 특정 선택자에만 크기, 위치 등을 설정하고 싶을 때 이 규칙을 사용한다.

---

확장(Extend)

• @extend 지시어 사용
• 특정 선택자가 가지고 있는 스타일을 또다른 선택자에게 부여할 때 유용하게 사용
• @extend: 내가 끌어오고 싶은 선택자 이름;
• css 변환시 다중 선택자 형식으로 변환되서 동일한 스타일을 갖게 함

확장을 추천하지 않는 이유

• CSS 변환 시 @extend 사용한 선택자 안으로 가져오고 싶은 특정 선택자 스타일 내용이 안으로 들어오는 것이 아닌 @extend 사용한 선택자가 가져오고 싶은 특정 선택자에서 확장되는 개념으로 다중 선택자가 되서 문제가 될 수 있다
• 결과적으로 ,로 구분되는 다중 선택자가 만들어지는 개념이다
• 확장은 권장하지 않고 @mixin으로 대체 가능하니 이걸 쓰는 것을 추천함

확장 기능 사용시 주의해야 할 문제

• @extend를 사용하는 선택자가 어느 쪽에 첨부될 것인지의 구분에 대해 생각
• 내가 원하지 않았던 특정한 문제점이 발생하고 있지 않은가
• @extend를 사용하는 선택자가 이동돼서 확장돼서 첨부돼서 동작하는 개념이라 선택자가 굉장히 길어질 수 있다.(한번의 확장으로 얼마나 큰 CSS 만들어지는가)
  • @extend를 사용하는 선택자가 원하는 스타일은 가지게 되었지만 앞 쪽에 존재하는 조상요소들의 선택자들이 내가 전혀 의도하지 않았던 결과들을 가지게 되는 부작용을 확장 기능이 가질 수 있는 것을 주의해야 한다.

---

Tips

• 전역 변수는 {}안에 쓰지 않고 맨 위에 써놓으면 됨
• unquote() 함수는 문자에서 따옴표를 제거한다.(Sass의 내장 함수)
• 경로에 ./ 생략되어 있을 때 현 파일을 기준으로 해서 주변에서 찾는 개념
• @ : at이라 읽는다.
• background 속성은 다중이미지를 받아서 쓸 수 있다.