CSSのカスタムは+ CSSグリッドグリッドは、優れたレイアウト機能を達成するための属性

私は最近の事CSSのカスタム属性を気づきました。CSSのカスタムプロパティビットSASSおよびその他のプリプロセッサ変数のように動作し、主な違いは、他の方法は、ブラウザでのコンパイル、または元のCSSの文言の後に生成されることです。カスタムCSSプロパティは、スタイルシートまたはそれらをより多くの可能性を持っていますJavaScriptのインスタントアップデートを、使用することができ、実際の動的変数です。あなたのJavaScriptに精通している場合、私は、プリプロセッサ変数とカスタムCSSプロパティの違いを考えるとconstの違いを想像し、類似した聞かせたい - それらはすべて異なる目的を持っています。

CSSのカスタムプロパティは、簡単な機能（例えば、テーマの変更）の多くを達成することができます。最近、私は、カスタム属性と何が達成できるかのCSSグリッド魔法の効果の組み合わせからCSSを使用しようとしてきた、私はグリッドのテンプレート行とグリッドのテンプレート列異なるブレークポイントの属性を再定義する必要があります。次のコードは、私はSASS変数は、異なる幅の異なるページの列幅の値を定義し使用し、一例であり、これらの値は、属性グリッドのテンプレート行に渡されます。ページの幅は要素間の同じ間隔が異なっているではありませんので、グリッドギャッププロパティの私は、同じ操作をしました：

$wrapper: 1200px;
$col: 1fr;
$gutter: 20px;

$wrapper-l: 90%;
$col-l: calc((1000px - (13 * 40px)) / 12);
$gutter-l: 40px;

$col-xl: calc((1200px - (13 * 50px)) / 12);
$gutter-xl: 50px;

body {
    background-color: lighten(grey, 30%);
}

.wrapper {
    max-width: $wrapper;
    margin: 20px auto;

    @media (min-width: 1300px) {
        max-width: $wrapper-l;
    }
}

.grid {
    display: grid;
    padding: $gutter;
    grid-template-columns: 1fr repeat(12, $col) 1fr;
    grid-template-rows: repeat(2, minmax(150px, auto));
    grid-gap: $gutter;
    border: 1px solid grey;
    background: white;
    width: auto;

    @media (min-width: 1300px) {
        grid-template-columns: 1fr repeat(12, $col-l) 1fr;
        grid-gap: $gutter-l;
        padding: $col-l;
    }

    @media (min-width: 1500px) {
        grid-template-columns: 1fr repeat(12, $col-xl) 1fr;
        grid-gap: $gutter-xl;
        padding: $col-xl;
    }
}

.grid__item {
    border: 1px solid blue;
}

.grid__item--heading {
    grid-column: 2 / 11;
}

あなたが見ることができるように、基本的にメディアで一度定義された変数が固定するので、スタイルを変更するコードのブロック全体の再クエリを記述する必要があります。（ - コードのチャンクIは確かにミックスインを使用することができ、最終的な効果は同じです）

私はメディアクエリ変数を更新するので、CSSのカスタム属性を使用して、あなたは、コードの量を減らすことができ、ブラウザは、グリッドを再計算します。10行（SASS）コードは、巨大な貯蓄のように見えるかもしれないが、あなたはそのコンポーネントに私たちの新しい変数、私だけのコードに対処するためのいくつかの場所でメディアクエリを追加しないため、コードの可読性が、はるかに高いです彼らは声明で始まり、の値が使用されて交換されたかどうかを心配する必要はありません。

:root {
    --wrapper: 1200px;
    --col: 1fr;
    --gutter: 20px;

    @media (min-width: 1300px) {
        --wrapper: 90%;
        --col: calc((1000px - (13 * 40px)) / 12);
        --gutter: 40px;
    }

    @media (min-width: 1500px) {
        --wrapper: 90%;
        --col: calc((1200px - (13 * 50px)) / 12);
        --gutter: 50px;
    }
}

body {
    background-color: lighten(grey, 30%);
}

.wrapper {
    max-width: var(--wrapper);
    margin: 20px auto;
}

.grid {
    display: grid;
    padding: var(--gutter);
    grid-template-columns: 1fr repeat(12, var(--col)) 1fr;
    grid-template-rows: repeat(2, minmax(150px, auto));
    grid-gap: var(--gutter);
    border: 1px solid grey;
    background: white;
    width: auto;
}

.grid__item {
    border: 1px solid blue;
}

.grid__item--heading {
    grid-column: 2 / 11;
}

.grid__item--body {
    grid-column: 2 / 8;
    grid-row: 2 / span 1;
}

.grid__item--media {
    background: hotPink;
    grid-column: 11 / 14;
    grid-row: 1 / span 2;
}

CSSのカスタムは+ CSSグリッドグリッドは、優れたレイアウト機能を達成するための属性

この技術を終了するWebフロントに興味を持って小さなパートナーは、注意が必要な実践的な内容を開発するためにあなたといくつかを共有することを学ぶ、私たちの研究サークル、作品の第六年に追加することができます。767-273-102秋のドレス。ゼロベースのフロントエンドから起動する方法を学習します。夢を持つ人々のグループは、我々は別の都市にあってもよいが、我々は一緒に歩いていく先端の先端

私は、構文が非常に長く、迅速かつ容易に、特に複雑なグリッドでは、何が起こっているかを見ることは容易ではないということであるCSSのグリッドを使用するための機能を発見しました。この場合には、CSSのカスタムプロパティ、およびサイズは、設定項目の座標、及び追記型、およびグリッド列グリッド行性可変グリッドであってもよいです。私には、このプロパティははるかに完了し、一目でグリッド項目の位置を簡単に確認することができ、それぞれの時間を書くことよりも、より良いを知っている必要があります。

CSSのカスタムは+ CSSグリッドグリッドは、優れたレイアウト機能を達成するための属性

おすすめ