TIL 24일차

KHW·2021년 9월 16일

CSS TIL

TIL

목록 보기

24/39

SCSS

🍋 node.js로 사용하기

npm install -g sass

sass scss:css

2번의 경우 scss:css의 scss와 css는 폴더 혹은 파일도 상관없다.
ex1) sass scss/main.scss : css
=> scss폴더의 main.scss를 css 폴더에 (main.css)로 만들어라
ex2) sass main.scss : main.css
=> main.scss를 main.css로 만들어라
ex3) sass scss : css
=> scss폴더의 모든 scss형식의 파일들을 css폴더가 없다면 만들고 css폴더안에 css파일로 생성해라

🍋 원하지 않는 scss파일을 css 컴파일 방지

scss 파일의 이름앞에 _를 붙이면 해당 scss파일은 컴파일 시 css로 만들어지지않는다.
이때 파일을 가져오는 @import는 해당 이름의 _는 생략해도 상관없다
즉, _는 단지 scss에서 css로의 컴파일의 유무를 나타내기만 한다

🍋 @import

원하는 scss파일 내용을 가져오는 역할로
@import "file경로" 형태로 사용한다.
이때 file은 경로로 하되 js의 모듈때처럼 .js를 붙이듯이 .scss를 꼭 붙일 필요는 없다.

url , css, http를 import할 경우 컴파일 결과(scss->css)로 출력되어 포함한다.

🍋 @use

@import와 다르게 모듈화 하여 name space( 개체를 구분할 수 있는 범위를 나타내는 말)를 부여할 수 있다.

@import

@import "./variables.scss";
.main{
  $color:$primary;
  background-color:$color;
  border:4px solid $color;
}

@use

@use "./variables.scss";
.main{
  $color:variables.$primary;
  background-color:$color;
  border:4px solid $color;
}

@import에서 $primary와 다르게 @use에서는 variables.$primary로 사용한다.

@use를 통한 name space의 장점

이름이 충돌이 발생하는것을 막을 수 있다.
ex) main.scss에서의 $primary와 import한 부분의 $primary가 공통으로 존재하면 충돌이 발생
(실질적인 충돌은 없고 오버라이딩 처럼 덮어쓰긴 하지만 이는 개발자에게 에러나 오류를 발생시킬 문제점을 결국 야기하게 된다.)

@use / as

매번 이름으로만 적는것을 대처하기 위해서 as를 사용한다.

@use "./variables.scss" as v;
.main{
  $color:v.$primary;
  background-color:$color;
  border:4px solid $color;
}

🍋 @forward

사용이유 : A라는 파일을 import한 B를 import한 C에서 A라는 모듈화된 내용을 사용하려고 할 때

기본적으로 A에서 모듈화한 내용을 가진 B는 B안에서만 동작이된다.
이를 범위 밖에서도 사용하기 위해 사용한다.

예시

_mixins와 _variables를 @use한 your-style의 main.scss를 @use한 my-style의 main.scss를 만든 상태에서 sass my-style:css명령어를 입력

_mixins.scss

@mixin square($size:100px){
  width:$size;
  height:$size;
}

_variables.scss

$primary:orange;
$error:red;
$success:yellowgreen;

your-style/main.scss

@use "./variables.scss" as var;
@use "./mixins" as mix;
@forward "./variables";
@forward "./mixins" ;
.notUseInclude{
  $color : var.$primary;
  font-size : 12px;
}
.useInclude{
  @include mix.square
}
.your-style{
  $color:var.$primary;
  color : var.$success;
  @include mix.square;
}

my-style/main.scss

@use "../your-style/main";
.my-style{
  position:relative;
  border:4px solid main.$primary;
  @include main.square(400px);
}

css/main.css

.notUseInclude {
  font-size: 12px;
}
.useInclude {
  width: 100px;
  height: 100px;
}
.your-style {
  color: yellowgreen;
  width: 100px;
  height: 100px;
}
.my-style {
  position: relative;
  border: 4px solid orange;
  width: 400px;
  height: 400px;
}
/*# sourceMappingURL=main.css.map */

@forward를 통해 mixin의 square와 variables의 $primary를 사용할 수 있다.

@forward를 통해 얻은 값이 충돌이 날 경우

마찬가지로 as를 통해 namespace를 부여하는데 주의하여야한다.

your-style/main.scss

@use "./variables.scss" as var;
@use "./mixins" as mix;
@forward "./variables" as var-*;
@forward "./mixins" as mix-*;
.notUseInclude{
  $color : var.$primary;
  font-size : 12px;
}
.useInclude{
  @include mix.square
}
.your-style{
  $color:var.$primary;
  color : var.$success;
  @include mix.square;
}

my-style/main.scss

@use "../your-style/main";
.my-style{
  position:relative;
  border:4px solid main.$var-primary;
  @include main.mix-square(400px);
}

각각 @forward에 as namespace*를 붙여 처리한다

주의 : my-style/main.scss의 부분이 기존에
main.$primary는 main.$var-primary로 $가 앞에오면서 as내용이 추가되고
main.square(400px)은 main.mix-square(400px)으로 처리된다.

🍋 @import @use @forward 총정리

@import를 통해 대상을 가져와서 처리는 하지만 중복된 충돌을 해결하기 위하여 @use를 통해 namespace로 중복된 충돌을 피했고
이러한 namespace를 좀 더 편하게 쓰기 위해 as를 통해 namespace를 직접 지정해주었다.

이러던 중 import나 use가 반복될 A->B->C의 형태로 C에서 A를 원할때 기존의 모듈의 import나 use는 이를 사용한 대상(B)에만 적용되어 문제가 발생한다.

이를 해결하기 위해 @forward를 사용하였고 이것 또한 각각의 @forward로 가져온 값이 충돌이 발생할 가능성이 있기 때문에 as 값-를 통해 충돌을 피하였다.

@import - 충돌을 발생시킴
@use - 충돌을 namespace로 해결 + as를 통해 namespace 직접지정
@forward - 직접 import use를 안해도 사용할 수 있게함 + 충돌을 발생시키는 것을 as를 통해 해결

🍋 전역함수와 내장모듈

전역함수는 따로 @use를 통해 가져올 필요없이 바로 사용할 수 있고
내장모듈은 @use를 통해 필요한 메소드를 가져와서 사용할 수 있다.

color 처리

@use "sass:color"

color 처리	전역함수	내장모듈
어둡게하기	darken	color.adjust
밝게하기	lighten	color.adjust
채도	saturate	color.adjust
채도	desaturate	color.adjust
회색처리	grayscale	color.grayscale
대조	invert	color.invert