at-rules.scss

/* At-rules */
/* @import */
// @import "_variables";
// @import "_demo";

// .selector {
//   margin: $size;
//   background-color: $brandColor;

//   .nested {
//     margin: $size / 2;
//   }
// }

/* @mixin and @include */
// @mixin screen($type) {
//   @if $type == phone {
//     @media screen and (max-width: 576px) {
//       @content;
//     }
//   } @else if $type == tablet {
//     @media screen and (max-width: 768px) {
//       @content;
//     }
//   } @else if $type == laptop {
//     @media screen and (max-width: 992px) {
//       @content;
//     }
//   } @else if $type == desktop {
//     @media screen and (max-width: 1200px) {
//       @content;
//     }
//   } @else {
//     @media screen and (max-width: $type) {
//       @content;
//     }
//   }
// }

// .testFirst {
//     @include screen(tablet) {
//         border: 1px solid red;
//     }
// }

// @include screen(tablet) {
//     .testSecond {
//         border: 1px solid blue;
//     }
// }

/* @extend */

// %placeholderSelector {
//     color: red;
//     border: 1px solid blue;
//     font-size: 10px;
//     font-weight: bold;
// }

// .extendingClass {
//     @extend %placeholderSelector;
//     padding: 5px;
// }