Sass Script function to get breakpoint values from a JSON file.

breakpoints.json

{
  "phone"  : "all and (max-width: 603px)",
  "desktop": "all and (min-width: 1025px)",
  "tablet" : "all and (min-width: 604px) and (max-width: 1024px)"
}

breakpoints.rb

require 'json'

sass_options = { :custom => {'breakpoint_file' => 'breakpoints.json'} }

module Sass::Script::Functions
  def get_breakpoint(breakpoint)

    unless json = JSON.load(IO.read(options[:custom]['breakpoint_file']))
      raise Sass::SyntaxError.new("Error: File '#{options[:custom]['breakpoint_file']}' does not exist")
    end

    if json[breakpoint.to_s]
      Sass::Script::String.new(json[breakpoint.to_s])
    else
      raise Sass::SyntaxError.new("Error: Breakpoint '#{breakpoint}' does not exist, choose from the following: #{json.keys.join(', ')}")
    end
  end

  declare :get_breakpoint, [:breakpoint]
end

site.js

require(['nbd/util/media', 'lib/breakpoints'], function(media, breakpoints) {
  
  media(breakpoints);
  
});

style.css

/* compiled CSS */

@media all and (min-width: 1025px) {
  body {
    background: red;
  }
}

@media all and (min-width: 604px) and (max-width: 1024px) {
  body {
    background: blue;
  }
}

@media all and (max-width: 603px) {
  body {
    background: yellow;
  }
}

style.scss

$break-desktop: get_breakpoint(desktop);
$break-tablet: get_breakpoint(tablet);
$break-phone: get_breakpoint(phone);

@media #{$break-desktop} {

  body {
    background: red;
  }

}

@media #{$break-tablet} {
  
  body {
    background: blue;
  }
  
}

@media #{$break-phone} {
  
  body {
    background: yellow;
  }
  
}