231108 [Day37] CSS 심화(4)

SCSS - 재활용

 

@mixin : 재활용 할 코드를 정의하고 필요에 따라서 언제든지 활용 가능

=> @mixin 믹스인이름 { 재활용할 스타일 }

 

@include : mixin에 담긴 속성들을 사용할 때 씀

 

 

- 매개변수를 만들어 범용화해서 스타일을 재활용 / ($size: 기본값)을 지정해주어야 다른 값을 주었을 때 적용 가능

 

 

- if 조건문

 

삼항연산자 처럼 사용할 수도 있다.

 

 

- 클래스 선택자, 가상요소선택자

 

 

- 중첩 => @mixin에 다른 @mixin을 @include를 사용해 가지고 올 수 있다.

 

 

- 전개연산자(...)를 사용하여 가변인수

 

 

- 전개연산자(...)를 사용하여 리스트 형식

+ 보간을 사용해서 확장할 수도 있다.

 

 

- 키워드 인수

 

 

- 특정 스타일 블럭을 추가하여 @content를 통해 명시할 수 있다.

 

 

 

함수처럼 @content() (소괄호 추가)를 사용해서 데이터를 스타일 블럭으로 전달해 줄 수  있다.

 

 

- SCSS 와 Sass의 차이점 : @mixin => = / @include => + 이처럼 표시 방법이 다르다. 나머지는 중괄호와 세미콜론의 유무

 

 

SCSS - 확장

- @extend : 선택자를 불러오면 다중 선택자로 추가가 된다.

 

@mixin은 스타일을 정의해주고 가져와서 사용하는데,  @extend는 특정 선택자를 가져와서 쓴다.

=> '선택자 폭발' 부작용 => @mixin 사용 권장

 

 

- placeholder 선택자 => % , extend 규칙을 사용할 때 쓰는 확장을 위한 선택자

 

* 외부에서 선언된 선택자를 @media 규칙 내부에서 확장하는 것은 허용되지 않는다.

 

 

SCSS - 함수

@function 함수명(){

          @return  000 ;

}

 

 

커스텀할 때 함수명은 두개 이상의 단어를 사용해서 중복을 막자. => length, red 등 전역함수가 존재한다.

 

 

SCSS - 조건과 반복

조건

- @if 조건 { } => 조건을 ()로 감싸지 않아도 된다.

 

 

- @else if 조건 { }

 

 

반복

- @each 0 in 000 { } : List, Map 데이터를 반복적으로 처리할 때 사용

 

 

- @for 변수 from 시작 through 끝 { } : <=

- @for 변수 from 시작 to 끝 { } : <

=> js의 for구문과 같다.

from through

 

from to

 

- while ( ) { } , 소괄호 생략 가능

 

 

SCSS - 가져오기, 모듈

가져오기

@import 

 

scss 파일명 앞에 _ 있으면 css로 컴파일하지 않는다.

main.scss 파일에 @import "가져올 파일 경로" (=> 확장자 , url 함수, _기호 생략)를 입력하면 해당 파일을 가져온다.

 

 

=> 컴파일 결과에 포함되서 출력되므로 주의!!! 

 

 

모듈

@use " " (as 000)

 

특정한 파일에서 모듈로 사용하고 있는 내용을 외부에서도 사용하려면 @forward를 써야한다.

 

 

 

내장모듈