Conditionals with @if and @else if

Conditionals in Sass output blocks of styles only under certain conditions.

_mixins.scss

// Media queries
@mixin mq($break) {            
  @if $break == 'xs' {
    @media (max-width: $break-xs) {
      @content;       
    }          
  }    
  @else if $break == 'sm' {
    @media (min-width: $break-s) {
      @content;       
    }             
  }  
  @else if $break == 'med' {
    @media (min-width: $break-m) {
      @content;       
    }             
  } 
  @else if $break == 'lg' {
    @media (min-width: $break-l) {
      @content;       
    }             
  } 
}

_images.scss

.img-featured {
  @include roundy($brdr: 4px solid $white, $dim: 165px);
  margin-top: 75px;
  position: relative;
  z-index: 100;
  @include mq('xs') {
    display: none;
  }
}

Maps with map-get()

Maps are like dictionaries in Python and object literals in JavaScript. Sass maps provide a flexible way to keep track of data by associating a name with a particular value.

Map

// Breakpoints map
$breakpoints: (
  'xs': 575px, 
  'sm': 576px,
 'med': 768px,
  'lg': 992px,  
);

_mixins.scss You get a map using map-get($map, key).
Now, the long list of else-if statements is no longer necessary.

// Media queries
@mixin mq($break) {  
  $value: map-get($breakpoints, $break);
  $sm: map-get($breakpoints, 'sm');            
            
  @if $value < $sm {
    @media (max-width: $value) {
      @content;       
    }          
  }    
  @else {
    @media (min-width: $value) {
      @content;       
    }             
  }  
}

_containers.scss

.intro {
  margin: auto;
  padding: 1em 1em 3em; 
  p {
    font-size: 1.2em; 
  } 
  @include mq('lg') {
    width: 45%;
  }
}