05.02.2022 TIL

😸 CSS TIL

😽 Done it

😼 @extend

이미 작성해 놓은 선택자 가져오기 but!! @mixin을 주로 사용합시다.
추가로 @media에서는 @extend를 내부에서 선언해야만 사용가능합니다.
또한 선택자 폭발이라는 부작용이 있는데 중첩을 할 때 선택자 부분도 상속이 되면서 문제가 발생한는 것입니다.

//1.
.a {
}

.b {
  @extend a;
}

%: placeholder로 오로지 @extend 규칙을 확장해서 사용할 수 있는 것

%a {
}

.b {
  @extend a;
}

@mixin 사용 방법

// @mixin 사용법
@mixin a {
}

.b {
  @include a;
}

😼 함수

js에서의 function과 매우 유사합니다. 다만 @를 붙여줘야 합니다.

@function a() {
  @return 111;
}

.b {
  width: a(); //width: 111;
}

😼 조건문

@if (조건) {
} @else if (조건) {
} @else {
}

😼 반복문

@each

• list

@each $value in $list {
}

• Map

@each $key, $value in $maps {
}

@for

• for(let i = 0; i < 3; i++)

@for $i from 0 to 3 {
}

• for(let i = 0; i <= 3; i++)

@for $i from 0 through 3 {
}

😼 @import(가져오기)

@import "./가져올 파일"

• 해당 파일 정보를 통으로 가지고 와서 현재 scss파일에 통합해서 사용하겠다(.scss(확장자)를 붙이지 않는다.)
• @import 될 파일은 _을 붙여서 사용합니다.
  => 새로운 css파일을 만들어 compile 하지 않는다.(_ 생략 가능)

// a.scss
@import './variable'; //_ 생략할 수 있다.
@import './mixins';

a {
  _debug: $b;
  @include c(100px);
}

//_variable.scss

$b: red;
@mixin c($value: 200px) {
  width: $value;
}

😼 @use(모듈 가져오기)

@use "./가져올 파일"

• 하나의 모듈로서 가져올 수 있고 모듈 이름을 namespace로 사용가능합니다.(이름 충돌 방지)
  => 파일명으로 namespace를 기본으로 하며 as를 통해 변경가능 합니다.

// a.scss
@use './variable'; //_ 생략할 수 있다.
@use './mixins' as mix;

a {
  _debug: variable.$b;
  @include mix.c(100px);
}

//_variable.scss

$b: red;
@mixin c($value: 200px) {
  width: $value;
}

😼 @forward

특정 영역 파일(a1.scss)에서 사용하는 모듈을
다른 영역 파일(a2.scss)에서 사용하기 위해 a1.scss에서 @forward "모듈"을 통해
a2.scss에서는 @import "./a2"을 받아서 a2.~로 사용가능하게 해주는 것
+이름 충돌 막기 위해 @forward "모듈" as a-*를 써줍니다.

다음 예시를 보고 이해를 해보는 것이 좋습니다.

//a2.scss
@use './a1';

a2 {
  _debug: a1.$var-b; //일반 변수
  @include a1.mix-c(100px); //@mixin
}

// a1.scss
@use './variable'; //_ 생략할 수 있다.
@use './mixins' as mix;
@forward './variable' as var-*;
@forward './mixins' as mix-*;

a1 {
  _debug: variable.$b;
  @include mix.c(100px);
}

//_variable.scss

$b: red;
@mixin c($value: 200px) {
  width: $value;
}

😼 내장 모듈

@use 'sass:내장모듈';

내장 모듈을 namespace로 내장 모듈에 있는 값들을 사용할 수 있습니다.

callback

@use 'scss:meta';에서 meta.call(callback, callback인자)으로 사용할 수 있다.

@function a($callback) {
  $res: meta.call($callback, 2px);
  @return $res;
}

@function b($value) {
  @return $value + 1px;
}

.result {
  width: a(b); //width: 3px;
}

😼 디버그,경고,에러

디버그

js: console.log()
scss: @debug "Message"

경고

js: console.warn()
scss: @warn "Message"

에러

js: throw new Error()
scss: @error "Message"

😺 Feeling

scss에서는 첫번째가 진짜 1이라는 것이 정말 마음에 들지 않는다... 그리고 과제를 하면서 빨리 체득화 시키기 위해 노력을 많이 해야 겠다는 생각이 엄청많이 들었습니다. 이번 과제도 잘 해나갈 수 있을 것입니다.
그리고 vue를 조금 밀리더라도 과제를 마무리하고 회고 작성 후에 vue를 진행하는 것이 좋을 것 같습니다. :)

📖 REF

프로그래머스 데브코스