Skip to content

Instantly share code, notes, and snippets.

@chrislloyd
Created May 5, 2015 02:00
Show Gist options
  • Save chrislloyd/3f5491e2a4270f39ad40 to your computer and use it in GitHub Desktop.
Save chrislloyd/3f5491e2a4270f39ad40 to your computer and use it in GitHub Desktop.
BASS Responsive whitespace helpers
# ruby whitespace.rb | pbcopy
%w(sm md lg).each do |breakpoint|
puts "@media (--breakpoint-#{breakpoint}) {"
{
0 => ['0', '0'],
1 => ['var(--space-1)', 'calc(0 - var(--space-1))'],
2 => ['var(--space-2)', 'calc(0 - var(--space-2))'],
3 => ['var(--space-3)', 'calc(0 - var(--space-3))'],
4 => ['var(--space-4)', 'calc(0 - var(--space-4))']
}.each do |i, value|
puts <<-CSS
.#{breakpoint}-m#{i} { margin: #{value.first} }
.#{breakpoint}-mt#{i} { margin-top: #{value.first} }
.#{breakpoint}-mr#{i} { margin-right: #{value.first} }
.#{breakpoint}-mb#{i} { margin-bottom: #{value.first} }
.#{breakpoint}-ml#{i} { margin-left: #{value.first} }
.#{breakpoint}-mxn#{i} { margin-right: #{value.last}; margin-left: #{value.last} }
.#{breakpoint}-p#{i} { padding: #{value.first} }
.#{breakpoint}-px#{i} { padding-left: #{value.first}; padding-right: #{value.first} }
.#{breakpoint}-py#{i} { padding-top: #{value.first}; padding-bottom: #{value.first} }
CSS
end
puts "}"
puts
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment