Skip to content

Instantly share code, notes, and snippets.

@Wakkos

Wakkos/input.scss

Created December 15, 2021 19:52
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. Wakkos created this gist Dec 15, 2021.
    25 changes: 25 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@

    $small : 48em;
    $medium : 56.25em;
    $large : 1600px;


    @mixin respond-to($breakpoint: $medium) {
    @media (min-width: $breakpoint) {
    @content;
    }
    }

    .image-test {
    background-image: url(../../images/logan-480.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    height: 100vh;
    width: 100vw;

    @include respond-to() {
    background-image: url('../../images/logan-900.jpg')
    }
    }
    13 changes: 13 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    .image-test {
    background-image: url(../../images/logan-480.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    }
    @media (min-width: 56.25em) {
    .image-test {
    background-image: url("../../images/logan-900.jpg");
    }
    }
    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.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
    },
    "autoprefixer": false
    }