Sub-declarations….I think????

[sgt_spike]

I have seen many examples on this site that show (mostly from pens), what I think are sub-declarations,
e.g.

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

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

OR

.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;
    }
}

where the @media queries are the sub-declarations or whatever

If sub-declarations are not what they are called, what are they called?

Furthermore, when I attempt to use them in my CSS, they do not work. I am using Chrome to view my code and the developer tools to checkout any issues and the style section has these rule-sets crossed out.

[Paulie_D]

This looks like Stylus which is a CSS preprocessor used to write CSS quickly and more efficiently like SASS/SCSS/LESS and others.

Select that option in Codepen and post it in…then hit the “view compiled CSS” option…

https://codepen.io/Paulie-D/pen/zyPLGN

[Author]

Posts