Sass 3.2 Media Queries and Internet Explorer Support

Feature queries in sass

This is a known bug with Visual Studio Code. Update to version 1.19 and the problem is resolved.

Here's the relevant GitHub issue, with fixing commit for the curious.

Preferred way of writing vertical media queries with Sass' Breakpoint Extension

You can do the following:

$vertical: 'max-height' 50em;

.item {
  @include breakpoint($vertical) {
    font-size: 2em;
  }
}

You can also include height queries with other queries as follows:

$mixed: 15em ('max-height' 50em);

.item {
  @include breakpoint($mixed) {
     font-size: 2em;
  }
}

How to apply styles to both a class and a media query in SASS?

I think you are on the right track. Creating a mixin with a content block (https://sass-lang.com/documentation/at-rules/mixin#content-blocks) will allow you to add styles without having to specify the selector again and also will enable you to reuse it throughout your code.

@mixin mobile {
  @media only screen and (max-width: 600px) {
    @content;
  }
}

.header {
  &.sticky {
    position: fixed;
  }

  @include mobile { 
    position: fixed;
  }
}

If you only want to write the CSS property once then you can do this.

@mixin sticky-header {
  position: fixed;
}

.header {
  &.sticky {
    @include sticky-header;
  }

  @media only screen and (max-width: 600px) { 
    @include sticky-header;
  }
}

Translating media queries from LESS to SCSS

In SCSS / SASS the recommended approach to storing full media queries as variables is as follows:

$lg: "(min-width: 1201px)";

.modal-dialog {
    margin: 100px auto;

    @media #{$lg} {
        width: 880px;
    }
}

Which compiles to

.modal-dialog {
    margin: 100px auto;
}

@media (min-width: 1201px) {
    .modal-dialog {
        width: 880px;
    }
}

Global media queries on a react project

There are three ways that come to mind:

1. You can create a variables.scss file in which you can write the value of your breakpoints:

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

And the use the following variables in your scss:

@media only screen and (min-width: $sm) {
    .container {
        .max-width: 450px;
    }
}
@media only screen and (min-width: $md) {
    .container {
        .max-width: 650px;
    }
}
@media only screen and (min-width: $lg) {
    .container {
        .max-width: 900px;
    }
}
@media only screen and (min-width: $xl) {
    .container {
        .max-width: 1000px;
    }
}

2. Or you can the mentioned variables in your mixins.scss file to create some media query mixins:

   @mixin small {
@media only screen and (min-width: $sm) {
@content;
}
}

And then, use these mixins in your main scss codes:

.container {
    @include small {
        max-width: 450px;
    }
    ...
}

3. Or if the use cases of these media queries are limited (e.g. hiding and showing elements), you can define other mixins that include all the variations:

   $displays: none inline inline-block block table table-cell table-row flex inline-flex;
$sizes: (
sm: $sm,
md: $md,
lg: $lg,
lg: $xl
);
@each $display in $displays:
@each $size-key $size in $sizes {
.display-#{size-key}-#{display} {
display: $display !important;
}
}
}

A note on importing files: I personally would import all my helper scss (variables, mixins, etc.) in a file called styles/index.scss in the root of my project among with normalizing and other global rules that I want to define, and then import this file in my other scss files:

// styles/index.scss
@import './variables.scss';
@import './mixins.scss';
...

// container.scss
@import './styles/index.scss';

---

Related Topics