Skip to content

Instantly share code, notes, and snippets.

@SallyMcGrath

SallyMcGrath/output.css

Last active April 2, 2021 09:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SallyMcGrath/ebf720dc1e9763a40c36a41dc4f82ba6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SallyMcGrath/ebf720dc1e9763a40c36a41dc4f82ba6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. SallyMcGrath renamed this gist Apr 2, 2021. 1 changed file with 0 additions and 0 deletions.
    0 input.scss → paintpots--modifiers.scss
    View file
    File renamed without changes.
  2. SallyMcGrath created this gist Apr 2, 2021.
    29 changes: 29 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    $red: red;
    $blue: blue;
    $green: green;
    $mixQuotient: 5%;
    $purple: mix($red, $blue);

    $mixedValues: (100vw + 50px);

    // coloured cards with colour mix modifiers
    .card {
    &.red {
    background: $red;
    &.mix--blue {
    background: mix( $red, $blue, $mixQuotient);
    }
    }
    &.blue {
    background: $blue;
    &.mix--red {
    background: mix($blue, $red, $mixQuotient);
    }
    }
    &.purple {
    background: $mixedValues
    }
    }



    15 changes: 15 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    .card.red {
    background: red;
    }
    .card.red.mix--blue {
    background: #0d00f2;
    }
    .card.blue {
    background: blue;
    }
    .card.blue.mix--red {
    background: #f2000d;
    }
    .card.purple {
    background: 150vw;
    }
    9 changes: 9 additions & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    {
    "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
    },
    "autoprefixer": false
    }