📚 공부한 내용

sass

다른 단위 연산 함수 만들기

$rootUnit: 16px !default;

• 단위 제거 함수

  @function removeUnit($value) {
    // @return ($value / ($value * 0 + 1));
    @return math.div($value, $value * 0 + 1); 
  }

• px > rem

  @function rem($value, $base: $rootUnit) {
    $removeValue: removeUnit($value);
    $removeBase: removeUnit($base);
    @return math.div($removeValue, $removeBase) * 1rem;
  }

🤔 새롭게 배운 내용

절대경로 / 상대경로

절대경로

절대 경로는 파일의 root부터 해당 파일까지의 전체 경로(URL)를 의미
C:\Program Files\Git

절대 경로는 어느 곳에서든 경로에 접근할 수 있지만, 경로가 변경되면 경로를 일일히 수정해야한다.

상대경로

상대 경로는 현재 파일의 위치를 기준으로 연결하려는 파일의 상대적인 경로
../../img/logo.jpg

상대 경로는 주소나 프로젝트 디렉토리 위치가 바뀌어도 내부 구조만 그대로라면 수정없이 그대로 사용할 수 있다

forwarding할 때 cascading 이슈

@forward "normalize";
@forward "reset";
@forward "default"; // 직접 설정한 css 파일이 reset or normalize보다 밑으로 와야한다.

인터폴레이션(Interpolation) | 보간법

• # 특수문자와 {} 를 사용하여 표기한다. #{.,.}

• 삽입된 문자나 변수를 문자 그대로 적용시켜 연산이 되지 않게 한다.

• @mixin, @import, 일반적인 Sass 문법 등 변수나 문자를 통해 가변적인 값들을 적용해야하는 경우 사용한다.

//font.scss
@use "./unit" as *;

$font-sm: rem(12px);
$font-md: rem(16px);
$font-lg: rem(21px);
$font-xl: rem(28px);
$font-xxl: rem(37px);
$font-xxxl: rem(50px);

//heading
$heading-md: normal 700 #{$font-md} / 1.4 pretendard;
$heading-lg: normal 700 #{$font-lg} / 1.4 pretendard;
$heading-xl: normal 700 #{$font-xl} / 1.4 pretendard;
$heading-xxl: normal 700 #{$font-xxl} / 1.4 pretendard;
$heading-xxxl: normal 700 #{$font-xxxl} / 1.4 pretendard;

ghost button

참고 https://freefrontend.com/css-ghost-buttons/