title: setting the browser's width as a variable in scss
body: <p>How to get the browser's width to use it as a VARIABLE?</p>
  
  <p>I know about the @media. what I need is getting the width and do some calculation to it</p>
  
  <p>I tried using jQuery, it works great if the browser's width is <strong>FIXED</strong>, but when I resize the browse window it doesn't work</p>
  
  <p>here is what I want to do:</p>
  
  <p>html </p>
  
  <pre><code>&lt;section id="slider"&gt;
      &lt;div class="slides"&gt;
        &lt;div class="slide"&gt;
          &lt;h1&gt;silde 1&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor&lt;/p&gt;
        &lt;/div&gt;
       &lt;div class="slide"&gt;
          &lt;h1&gt;silde 2&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt; &lt;/section&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>$browser-width: (BROWSER WIDTH HERE) * .75 ;
  #slider {
    overflow: hidden;
    position: relative;
    margin: auto;
    width: $browser-width;
    .slides {
      display: block;
      margin: 0;
      padding: 0;
      width: 6000px;
    }
    .slide {
      width: $browser-width;
      display: inline-block;
      float: left;
      text-align: center;
    }
  }
  </code></pre>
  
  <p>What I did as a temporary solution is this:
  using jQuery:</p>
  
  <pre><code>$(document).ready(function(){   
    var width = $(window).width() * .75;   
    var $slider = $('#slider');   
    var $slideContainer = $slider.find('.slides');   
    var $slides = $slideContainer.find('.slide');   
  
    $slider.css("width", width);   
    $slides.css("width", width);
  
    /* function to make the slider here */ 
  });
  </code></pre>
  
  <p>width = 75% doesn't work nor does width = 75vw </p>