Media Query Breakpoints with SASS

In this article, I will try to explain to you how I try to use CSS effectively with SASS, which is one of the most important skills for many designers. First, let's talk about the meaning of the SASS tags that we will use and their intended use. The first label we will examine is;

SASS Rules

@mixin

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries[1].

@mixin button {
  width: 400px;
  height: 50px;
  background-color: #fcd;
  border: 1px solid #ccc;
  color: #fff;
  &:hover {
    color: #fcd;
    background-color: #ccc;
  }
}

Mixin With Arguments

Mixins can also take arguments that allow customization of their behavior if used for that class. The received arguments can be written like normal functions used in programming. The most important thing to note here is that the arguments should be in the form of SASS Script expressions[2].

@mixin button(
  $color: $primary,
  $hoverColor: $primary,
  $hoverBgColor: $white,
  $borderColor: $primary,
  $width: 100px,
  $height: 40px,
  $bgColor: $white
) {
  width: $width;
  height: $height;
  background-color: $bgColor;
  border: 1px solid $borderColor;
  color: $color;
  &:hover {
    color: $hoverColor;
    background: $hoverBgColor;
  }
}

Mixin With Optional Arguments

In cases where the received arguments similar to the components we use for javascript with Mixins are not used, the value can be set by default. A similar usage to this situation is valid in SASS. For this case, we can examine our example from the following code snippet[3].

@mixin text(
  $color: $info,
  $fontSize: 1.5rem,
  $fontWeight: 500,
  $textAlign: center
) {
  color: $color;
  font-size: $fontSize;
  font-weight: $fontWeight;
  text-align: $textAlign;
}

.optionalArgumentsForText {
  @include text(#0000FF, 2.5rem); /*In this usage, The fontWeight and textAlign properties are set by default.*/
}

@content

Mixins that receive @content blocks can pass arguments to these blocks. This is written @content(). If a @mixin passes arguments to its @content block, that @mixin users () accepts those arguments by typing @include . A content block's argument list works just like a mixin's argument list, and arguments passed to it by @content work just like passing arguments to a mixin[4].

/*_breakpoints.scss*/ 
$breakpoints: (
  "xs": 0,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
  "xxl": 1600px,
);

@mixin md {
  @media (min-width: map-get($breakpoints, "xs")) {
    @content;
  }
}
/*todo.scss*/ 
 @include md {
    color: $primary-orange;
    border: 1px solid $error;
  }

@include

Mixins are included into the current context using the @include at-rule, which is written @include or @include (), with the name of the mixin being included[5].

/*todo.scss*/ 
 @include md {
    color: $primary-orange;
    border: 1px solid $error;
  }

Media-query in SASS for React Projects

In this section, I will try to explain the $breakpoints on the template I use with the necessary changes when starting any project with SASS. When the code snippet below is examined, $breakpoints defines the necessary width values ​​for the devices for a responsive view. It is very convenient that it can be defined as more than one option here. As the next step, the name of the @mixin method, which will be called with @mixin, is determined (I usually use the same name as the breakpoint I use to avoid confusion). After the correct values ​​are determined, the media-query property to be set as responsive with @media will be assigned to the min-witdh attribute with the corresponding $breakpoints value using the map-get method. Finally, it is ensured that all the features that will be used in @mixin with @content are used for the defined media-query feature.

$breakpoints: (
  "xs": 0,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
  "xxl": 1600px,
);

@mixin xs {
  @media (min-width: map-get($breakpoints, "xs")) {
    @content;
  }
}
@mixin sm {
  @media (min-width: map-get($breakpoints, "sm")) {
    @content;
  }
}
@mixin md {
  @media (min-width: map-get($breakpoints, "md")) {
    @content;
  }
}
@mixin lg {
  @media (min-width: map-get($breakpoints, "lg")) {
    @content;
  }
}
@mixin xl {
  @media (min-width: map-get($breakpoints, "xl")) {
    @content;
  }
}
@mixin xxl {
  @media (min-width: map-get($breakpoints, "xxl")) {
    @content;
  }
}

@mixin breakpoint($bp: 0) {
  @media (max-width: $bp) {
    @content;
  }
}

Implementation in The Project

In the application phase, we import the _breakpoints.scss file that we have created to the file we want to use, as follows. Then, we add one of the $breakpoints media-query classes that we have created in accordance with the desired device specifications with the @include method, and then add its content in accordance with our design.

@import "./breakpoints";

$error: red;
$success: green;
$warning: orange;
$info: #6204ac;

.optionalBreakPointsForText {
  // for mobile
  color: $info;

  // for md media-query
  @include md {
    display: none;
    color: $success;
  }

  // for xl media-query
  @include xl {
    display: block;
    color: $error;
  }

  // for xl media-query
  @include xxl {
    display: block;
    color: $warning;
  }
}

Conclusion

In this article, I tried to explain the _breakpoints.scss style I created for the dynamic media query feature, which I researched from social media and SASS documentation and also had a chance to deployed many times. This study, which provides an opportunity to review the literature, provides an important explanation for the dynamic use of media query functionality and offers the opportunity to start a project with a structure faster at the inception stage. With this little background knowledge, I hope I can now explain how I myself understand and use media query expressions in SASS. If you want to know a little more about this, please see the links that I have referenced below.

References

1. https://sass-lang.com/documentation/at-rules/mixin
2. https://sass-lang.com/documentation/at-rules/mixin#arguments
3. https://sass-lang.com/documentation/at-rules/mixin#optional-arguments
4. https://sass-lang.com/blog/feature-watchcontent-arguments-and-color-functions#content-arguments
5. https://sass-lang.com/documentation/at-rules/mixin
6. https://sass-lang.com/documentation/modules/map#get