Share breakpoints between SCSS and JavaScript

In this example below you will see how to do a Share breakpoints between SCSS and JavaScript with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by toddprouty, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright toddprouty ©
  • HTML
  • CSS
  • JavaScript
    <div class="description">
  <h1>Share breakpoints between SCSS and JavaScript</h1>
  <p>Passes current breakpoint, set in SCSS through media queries, on to JavaScript. Based loosely on Jeremy Keith's work here: <a href="http://adactio.com/journal/5429">Conditional CSS</a>.</p>
  <p>Uses a bit of jQuery to detect browser resize, but that's it.</p>
</div>

<div class="instructions">
  <h2>Nothing to See Here</h2>
  <p>Open the CodePen console and resize the window to see how it works.
</div>

/*Downloaded from https://www.codeseek.co/toddprouty/share-breakpoints-between-scss-and-javascript-NjBBWP */
    /* Detecting desktop for JavaScript (see /assets/js/main.js) 
   Source: http://adactio.com/journal/5429 */

$screen-xs-max: 767px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;

@media all and (max-width: $screen-xs-max) {
  body:after {
    content: 'screen-xs';
    display: none;
  }
}
@media all and (min-width: $screen-sm) {
  body:after {
    content: 'screen-sm';
    display: none;
  }
}
@media all and (min-width: $screen-md) {
  body:after {
    content: 'screen-md';
    display: none;
  }
}
@media all and (min-width: $screen-lg) {
  body:after {
    content: 'screen-lg';
    display: none;
  }
}


/* Demo styles */
body {
  font-family: sans-serif;
  background: #333;
  color: #fff;
}
h1 {
  font-size: 1.5em;
}
a {
  &:link,
  &:visited,
  &:hover,
  &:active {
    color: #FF0;
  }
}
.description {
  padding: 0 10%;
  margin: 0 auto 40px;
}
.instructions {
  background: #555;
  padding: 10px 20px;
  width: 280px;
  margin: 0 auto;
}


/*Downloaded from https://www.codeseek.co/toddprouty/share-breakpoints-between-scss-and-javascript-NjBBWP */
    function breakpointCheck () {
/* Detecting desktop based on CSS rule (see /assets/sass/app/_memorycollector.scss) 
     Source: http://adactio.com/journal/5429/ */

  var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');

  if (size.indexOf("screen-xs") !=-1) {
    screenXS = true;
    console.log('screenXS: ' + screenXS); 
  } else if (size.indexOf("screen-sm") !=-1) {
    screenSM = true;
    console.log('screenSM: ' + screenSM); 
  } else if (size.indexOf("screen-md") !=-1) {
    screenMD = true;
    console.log('screenMD: ' + screenMD); 
  } else if (size.indexOf("screen-lg") !=-1) {
    screenLG = true;
    console.log('screenLG: ' + screenLG); 
  } 
}

document.addEventListener("DOMContentLoaded", function(event) { 
  breakpointCheck();
  
});

$(window).resize(function(){
  breakpointCheck();
});



Comments