Inline Media Queries

Using Inline Media Queries with a Custom Mixin

CSS Media Query

h1{

    font-size: 20px;

}

/* Medium Sizes */

@media only-screen and (min-width:500px){

    h1{

        font-size: 30px;

    }

}

/* Large Sizes */

@media only-screen and (min-width:800px){

    h1{

        font-size: 40px;

    }

}

SCSS Inline Media Query

h1{

    font-size: 20px;

    @media only-screen and (min-width: 500px){

        font-size: 30px;

    }

    @media only-screen and (min-width: 800px){

        font-size: 40px;        

    }

}

SCSS Breakpoint Mixin

$breakpoints: (
  'medium': 500px,
  'large':  800px
) !default;

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media only screen and (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

Media Query w/ SCSS Mixin

h1{

    font-size: 20px;

    @include respond-to('medium'){

        font-size: 30px;

    }

    @include respond-to('large'){

        font-size: 40px;        

    }

}

^ Borrowed from CSS-Tricks Resource (many similar variations of  breakpoint mixins exist)

Why?

This keeps your SCSS selectors DRY. If you were to look for a certain class or div, you would find all the styles for it in a single place, instead of finding it multiple times in media query range.

Mixins

Font Mixin

@mixin title-font($title-font-size: 12px, $title-font-color: orange){

     font-family: "Open Sans", sans-serif;

     font-style: italic;

     color: $title-font-color;

     font-size: $title-font-size;

     line-height: $title-font-size*1.5;

}

Use

h1.feature{

    @include title-font(32px, green);

}

 

h2.feature-subtitle{

    @include title-font(22px, purple);

}

Font Mixin

Font Mixin

@mixin contact-card(){

     border-radius: 3px;

     box-shadow:  0 0 5px 0 rgba(0, 0, 0, 0.45);

     background-color: #FFFFFF;

}

Use

.list-of-cards-layout .contact-card{

    @include contact-card;

    border: 1px solid red;

}

 

.single-card-layout .contact-photo{

   @include contact-card;

   border: 1px solid green;

}

Object Styling Mixin

SCSS Functions

Lighten

$primary-color: #727340

 

h1.feature{

   color: lighten($primary-color, 10%)

}

Darken

$primary-color: #727340

 

h2.feature{

   color: darken($primary-color, 10%)

}

Color Functions

Makes the color specified lighter by the percentage stated.

Makes the color specified darker by the percentage stated.

Look up more functions! I don't know anymore :/

&

SCSS

h1{

    font-family: "Helvetica Neue", sans-serif;

    color: $primary-color;

 

    &.feature{

        color: darken($primary-color, 10%)

    }

}

Outputs to CSS

h1{

    font-family: "Helvetica Neue", sans-serif;

    color: $primary-color;

}

 

h1.feature{

    color: darken($primary-color, 10%)

}

&thisotherthing

SCSS

h1{

    font-family: "Helvetica Neue", sans-serif;

    color: $primary-color;

 

    & .feature{

        color: darken($primary-color, 10%)

    }

}

Outputs to CSS

h1{

    font-family: "Helvetica Neue", sans-serif;

    color: $primary-color;

}

 

h1 .feature{

    color: darken($primary-color, 10%)

}

& thisotherthing

This Slide is VERY DIFFERENT. Can you spot the difference?

Without a space, we are targeting the h1 that ALSO has the class .feature.

&thisotherthing

<h1 class="feature">

    Target Me!

</h1>

& thisotherthing

<h1>

    <span class="feature">Target Me!</span>

</h1>

With a space, we are targeting the h1 that has an element somewhere INSIDE of it, with the class .feature.

h1{

    font-family: "Helvetica Neue", sans-serif;

    color: $primary-color;

 

    & .feature{

        color: darken($primary-color, 10%)

    }

}

h1{

    font-family: "Helvetica Neue", sans-serif;

    color: $primary-color;

 

    &.feature{

        color: darken($primary-color, 10%)

    }

}

SCSS

a{

    font-family: "Helvetica Neue", sans-serif;

    color: $primary-color;

 

    &:hover{

        color: darken($primary-color, 10%)

    }

}

Outputs to CSS

a{

    font-family: "Helvetica Neue", sans-serif;

    color: $primary-color;

}

 

a:hover{

    color: darken($primary-color, 10%)

}

&:hover

& can also be used to target pseudo-selectors, such as hover or focus states, or :before and :after.

SCSS

.fancy{

    color: #FF0000;

 

   .green-theme &{

        color: #00FF00;

   }

}

Outputs to CSS

.fancy{

    color: #FF0000;

}

.green-theme .fancy{

    color: #00F;

}

.parent-selector &

& can also be used to specify an item that has a parent element of a certain selector.

SCSS

.fancy{

    color: #FF0000;

 

   .green-theme &{

        color: #00FF00;

   }

}

Outputs to CSS

.fancy{

    color: #FF0000;

}

.green-theme .fancy{

    color: #00F;

}

& is especially useful if the child selector is nested very deep inside the parent element.

The above scss will apply to either of the html examples below.

<body class="green-theme">

    <h1>

         <a href="#">

            <span class="fancy">Hello There!</span>

         </a>

    </h1>

</body>

<h1 class="green-theme">

    <span class="fancy">Hello There!</span>

</h1>