Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/custom-property-nutzung.css

Last active October 5, 2024 22:27
Show Gist options
  • Save jensgro/7a8f76f8deb6072a7af25a65dc9a0994 to your computer and use it in GitHub Desktop.
Save jensgro/7a8f76f8deb6072a7af25a65dc9a0994 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jensgro revised this gist Sep 30, 2024. 1 changed file with 9 additions and 8 deletions.
    17 changes: 9 additions & 8 deletions custom-property-nutzung.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,19 @@
    /* ========= nicht so praktisch ========= */
    p {

    font-size: var(--fs-xs);

    @media (min-width: 800px) {
    }
    @media (min-width: 800px) {
    p {
    font-size: var(--fs-sm);
    }
    }

    /* ========= besser!!!! ========= */
    p {

    font-size: var(--fz-para, var(--fs-xs));

    @media (min-width: 800px) {
    }
    @media (min-width: 800px) {
    p {
    --fz-para: var(--fs-sm);
    }
    }
    @@ -29,8 +29,9 @@ p {
    --_fz-para: var(--fs-xs);

    font-size: var(--_fz-para);

    @media (min-width: 800px) {
    }
    @media (min-width: 800px) {
    p {
    --_fz-para: var(--fs-sm);
    }
    }
  2. jensgro created this gist Sep 30, 2024.
    36 changes: 36 additions & 0 deletions custom-property-nutzung.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    /* ========= nicht so praktisch ========= */
    p {

    font-size: var(--fs-xs);

    @media (min-width: 800px) {
    font-size: var(--fs-sm);
    }
    }

    /* ========= besser!!!! ========= */
    p {

    font-size: var(--fz-para, var(--fs-xs));

    @media (min-width: 800px) {
    --fz-para: var(--fs-sm);
    }
    }

    /* ========= oder auch ========= */
    :root {
    --fs-xs: 0.85rem;
    --fs-md: 1rem;
    --fz-lg: 1.25rem;
    }

    p {
    --_fz-para: var(--fs-xs);

    font-size: var(--_fz-para);

    @media (min-width: 800px) {
    --_fz-para: var(--fs-sm);
    }
    }