05.01.2022 TIL

😸 CSS TIL

 

😽 Done it

😼 Sass 중첩

.container {
  &:hover {
    // &: 상위 선택자
  }
  @at-root .item {
    // @at-root: root 선택자]
  }
  //flex-grow, flex-shrink, flex-basis 편리하게 사용하기
  flex: {
    grow: 1,
    shrink: 0;
    basis: auto;
  }
}

😼 Sass 변수 선언

$를 붙여서 사용합니다.

😼 유효볌위 변화시키는 flag

!global: 전역 변수로 변환

$w: 200px !global;

!default: 기존에 있는 변수 값 사용
유효범위 내에서 이미 있는 변수에 값을 재지정 했을 때 재지정 값을 사용X

$w: 500px !default;

😼 보간

"#{변수, 값}" 을 사용합니다.
선택자에서 사용할 경우에는 #{} 만 사용하면 됩니다.

😼 데이터 종류

• null
  compile하지 않기 위한 값

$null: null;

• lists
  js의 [] 같은 것 => () 사용

$list1: (10px, 20px, 30px);

// 괄호 없이 값으로 여러개 써도 list가 된다.
$list2: 10px, 20px, 30px;

$list3: 10px 20px 30px;

• Maps {}
  js의 {key: value} 같은 것 => ()사용

$map1: (
  key: value
);

😼 산술연산자(/)

보통 나누기보다 단축 속성에서 구분을 하기 위해 사용을 합니다.

• 나누기로 사용

1. () 사용

$a: (100px / 2);

2. 변수를 같이 사용

$a: $b / 2;

3. 다른 연산자를 같이 사용

$a: 20px / 2 + 1px;

• 다른 단위 연산
  calc() 함수 사용

calc(100% - 50px);

😼 재활용

SCSS: @mixin으로 정의 하고 @include로 활용한다.
SASS: =으로 정의하고 +로 활용합니다.

@mixin a {
  font-size: 100px;
}

.b {
  @include a;
}

• 매개변수를 받을 수 도 있습니다.

@mixin a($value: 30px) {
  @if ($value < 30px) {
    font-size: 100px + $value;
  } @else {
    font-size: 100px;
  }
  //삼항연산자
  // if(조건, true일때 값, false일때 값)
  // font-size: if($value < 30px, 100px+$value, 100px);
}

.b {
  @include a(100px);
}

• 가변인수
  $변수...: 가변인수로 인수를 몇개 넣을지 확실하지 않을 때 사용

@mixin a($d, $e, $f...) {
}

.b {
  //키워드 인수: ($d: 100px)같이 인수로 넣어줍니다.
  @include a($d: 100px, $e: 200px, 300px, 500px, 600px);
}

• list data 전개연산자(...)를 이용해서 넣기

@mixin a($d, $e, $f) {
}

.b {
  $m: 100px 200px 300px;
  @include a($m...);
  @include a(100px 200px 300px...);
}

• @mixin에 추가 전달
  @mixin에서 @content사용

@mixin a($b) {
  &::after {
    content: url($b);
    @content;
  }
}

.b {
  @include a('/image/a.png') {
    //해당부분 @mixin에서 사용가능(@content)
  }
}

• @content 인자 사용

@include 함수 using (@content 인자) {
}

다음과 같이 사용을 합니다.
여기서 해당 함수 @include하는 곳에서는 다 using ()을 꼭 써줘야 합니다.

@mixin a($b) {
  &::after {
    content: url($b);
    @content (777);
  }
}

.b {
  @include a('/image/a.png') using ($c) {
    _debug: $c; //_debug: 777;
  }
}

 

😺 Feeling

생각보다 scss에서 요구하는 것이 많은데... 뭔가 여러개의 언어를 공부하면서 하나만 잘해도 다른 것은 쉽게 얻을 수 있다는 말이 반은 어떤 의미 인지 알 것 같습니다. 그래도 아직 제대로 적용을 하지 않고 강의듣고 공부만해서 거의 0이라고 생각을 하고 과제를 통해서 더 체득하도록 해야 겠습니다. :)
5월이 시작되었는데 너무 급하게 하지 않고 여유를 가지고 차근차근 꾸준히 해야겠습니다. !!!!

 

📖 REF

프로그래머스 데브코스