ViewportScale 비망록

CSS 설계 완전 가이드 6-13 점보트론 에서 소개되고 있던 툴로, 이번 활용하셨으므로, 비망록이 됩니다.

CSS 설계 완전 가이드

ViewportScale - GitHub

사고방식

간단한 연립 1차 방정식을 풀고 있습니다.

가로 폭이 최소 x1일 때 있는 프로퍼티의 값 y1 과, 가로폭이 최대 x2 의 때가 있는 프로퍼티의 값 y2 로 합니다. (x1, y1), (x2, y2) 를 통과할 때의 기울기 a 와 절편 b 를 구하고 있습니다.

◯ 예를 들어 ...

문서의 Example 1 의 예로 말하면 (320px, 32px), (960px, 48px) 를 통과하는 점의 기울기 a 와 절편 b 를 구하고 있습니다.

h1 {
    @include vs(font-size, 320px, 32px, 960px, 48px);
}

2.5vw는 기울기 a이고 24px는 절편 b입니다.

@media screen and (min-width: 320px) {
    h1 {
        font-size: calc(2.5vw + 24px);
    }
}

실제로 출력되는 CSS 는, x1 이하의 경우는 y1 고정, x2 이상의 경우는, y2 고정되어 있는 것에 유의해 주세요.

소스 코드

소스 코드는 다음 파일입니다. 안을 들여다 보면 변수 이름은 다르지만 비슷한 모양의 표현이 보입니다.

        $x: ($d - $b) / ($c - $a) * 100#{$vp-unit};
        $y: ($c * $b - $a * $d) / ($c - $a) * 1#{$u2};

viewportscale/_viewportscale.scss

◯ Sass의 기본

콜론 : 는 대입.

변수명의 머리는 $ 마크

제어 구문의 머리는 @ 마크

대입, if, for 등의 제어 구문 이외는 컴파일 후 전개된다. 이하, 그 외.

#{} - SassScript - Sass 올레오 레퍼런스

3-1. 수치만 출력하기 - Sass : 수치를 조작하고 싶을 때 편리한 연산이나 함수

그 외

◯ 절차

설치

$ sudo gem install sass

컴파일

$ # sass SCSSファイル名:CSSファイル名
$ sass test.scss:test.css

Sass 교과서

◯ 링크

Sass 공식 문서