[CSS 변수와 함수] var,calc(),min(),max(),clamp()

안녕하세요.
IE 11의 지원이 끝났기 때문에 지금까지 IE에 대한 우려로 사용하지 않은 CSS는 정상적으로 사용할 수 있게 되었다.나는 개인적으로 매우 기쁘다.
CSS는 진화가 빨라서 최근 변수와 함수도 CSS에서 사용할 수 있게 됐네요.
이번에는'var,calc(),min(),max(),clamp()'다섯 개를 소개하고자 합니다.

var (CSS 사용자 지정 속성)

CSS 변수 또는 캐스케이드 변수라고도 합니다.
PHP 및 JavaScript처럼 변수는 CSS로만 정의할 수 있습니다.

/* 変数宣言 */
/* :rootに定義することでどこでも使える（グローバル変数） */
:root {
　--wrapperWidth: 1024px;
}

/* 使用時 */
.wrapper {
　max-width: var(--wrapperWidth);
}

개인적으로 CSS 변수와 응답 디자인이 매우 일치한다고 생각하면 다음과 같은 방법을 사용한다.
다음은'정사각형의 상자를 만들어 그 안의 문자를 천지 중앙에 놓는 것'의 한 예다.

/* メディアクエリと変数の組み合わせ */
:root {
　--boxSize: 44px;
}
@media (min-width: 768px){
　:root {
　　--boxSize: 64px;
　}
}
@media (min-width: 1024px){
　　:root {
　　　--boxSize: 84px;
　　}
}

/* 変数を使用 */
.box {
　width: var(--boxSize);
　height: var(--boxSize);
　line-height: var(--boxSize);
　text-align:center;
}

요점은 미디어 조회를 사용하여 창 크기에 따라 변수 값을 바꾸는 것이다.
사이즈를 변경하고 싶을 때는 변수의 값만 바꾸면 되기 때문에 수정 범위가 적으면 됩니다.

calc 함수

콜 함수는 오래 전에 사용할 수 있었기 때문에 이미 알고 있는 사람도 많다고 생각합니다.
너비 등div을 계산하여 지정할 수 있습니다.
index.html

<div class="calc">
　<div>BOX A</div>
　<div>BOX B</div>
　<div>BOX C</div>
</div>

style.css

.calc {
　width: 900px;
}
.calc > div {
　width: calc(100% / 3); /* 900px / 3 = 300px */
}

calc 함수와 var의 조합

개인100% / 3이 상자를 가로로 배열할 때 자주 사용하는calc와 var의 조합.
가장자리를 변수화한 다음 이를 축으로 CSS를 구성하는 느낌이다.
index.html

<div class="calc">
　<div>BOX A</div>
　<div>BOX B</div>
　<div>BOX C</div>
</div>

style.css

.calc {
　--margin: 50px;
　width: 1000px;
}
.calc > div {
　/*
　　--marginが、50px時の計算式： (1000px - 100px) / 3
　　--marginが、100px時の計算式： (1000px - 200px) / 3
　　計算式を定義しておけば変数の値を変えるだけでよい。
 */
　width: calc((100% - (var(--margin)) * 2) / 3);
}
.calc > div + div {
　margin-left: var(--margin);
}

/* メディアクエリで変数の値を変更する */
@media (min-width: 1024px){
　.calc {
　　--margin: 100px;
　}
}

이렇게 하면 상당히 프로그래밍 느낌이 나네요.

min 함수

지금까지 최대 폭을 정의할 때 사용한 flexbox와width: 100% 등의 조합
한 줄로 간단하게 쓸 수 있다.
index.html

<div class="min">
　<p>width: min(100%, 500px)</p>
　<p>「100%」が「500px」より小さい場合は「100%」が適用。</p>
　<p>「100%」が「500px」より大きい場合は「500px」が適用。</p>
</div>

style.css

/* 今までの書き方 */
.min {
　width: 100%;
　max-width: 500px;
}

/* 新しい書き方 */
.min {
　width: min(100%, 500px);
}

max 함수

이전에 최소 너비를 정의할 때 사용된 max-width: 500px 및 width: 65% 등의 조합
한 줄로 간단하게 쓸 수 있다.
index.html

<div class="max">
　<p>width: max(65%, 200px)</p>
　<p>「65%」が「200px」より大きい場合は「65%」が適用。</p>
　<p>「「65%」が「200px」より小さい場合は「200px」が適用。</p>
</div>

style.css

/* 今までの書き方 */
.min {
　width: 70%;
　min-width: 320px;
}

/* 新しい書き方 */
.min {
　width: max(70%, 320px);
}

clamp 함수

min-width: 200px 좀 복잡하지만 최소치, 추천치, 최대치 세 가지를 설정할 수 있는 함수입니다.
이번에 사용하면 비교적 이해하기 쉽다clamp.
index.html

<div class="clamp">
  <p class="clamp-text">font-size: clamp(12px, 7vw, 32px)</p>
  <p>上記の例だと、推奨サイズ：7vw、最小サイズ：12px、最大サイズ：32pxになる。</p>
</div>

style.css

.clamp-text {
　font-size: clamp(12px, 7vw, 32px);
}

지금까지는 스펀지 패드를 디자인할 때 미디어 조회를 통해 꼼꼼하게 전환했는데, 잘 사용할 수 있다면 필요 없을 것 같다.

IE 죽어서 다행이다.

어때요?
IE에 대응할 필요가 없어서 개발이 상당히 수월해진 것 같지 않나요?
위font-size와 clamp의 조합을 처음 사용했을 때 IE를 고려하지 않았다면 CSS가 이 정도로 쿨했을까.나는 매우 감동했다.
IE가 잘 부처가 되어 다시는 이 세상으로 돌아오지 않기를 바란다(남무...).