Create a gist now

Instantly share code, notes, and snippets.

Sass Script function to get breakpoint values from a JSON file.
{
"phone" : "all and (max-width: 603px)",
"desktop": "all and (min-width: 1025px)",
"tablet" : "all and (min-width: 604px) and (max-width: 1024px)"
}
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
require(['nbd/util/media', 'lib/breakpoints'], function(media, breakpoints) {
media(breakpoints);
});
/* 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;
}
}
$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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment