[Compass Core] +reset-display mixin and Sass Extensions for appending selectors and enumerating the elements for a given display type.
This commit is contained in:
Chris Eppstein
parent
dc982841cf
commit
27b821617a
@ -107,3 +107,28 @@
|
||||
=reset-html5
|
||||
section, article, aside, header, footer, nav, dialog, figure
|
||||
display: block
|
||||
|
||||
//**
|
||||
Resets the display of inline and block elements to their default display
|
||||
according to their tag type. Elements that have a default display that varies across
|
||||
versions of html or browser are not handled here, but this covers the 90% use case.
|
||||
Usage Example:
|
||||
// Turn off the display for both of these classes
|
||||
.unregistered-only, .registered-only
|
||||
:display none
|
||||
// Now turn only one of them back on depending on some other context.
|
||||
body.registered
|
||||
+reset-display(".registered-only")
|
||||
body.unregistered
|
||||
+reset-display(".unregistered-only")
|
||||
=reset-display(!selector = "", !important = false)
|
||||
#{append_selector(elements_of_type("inline"), !selector)}
|
||||
@if !important
|
||||
display: inline !important
|
||||
@else
|
||||
display: inline
|
||||
#{append_selector(elements_of_type("block"), !selector)}
|
||||
@if !important
|
||||
display: block !important
|
||||
@else
|
||||
display: block
|
||||
@ -1,14 +1,15 @@
|
||||
module Compass::SassExtensions::Functions
|
||||
end
|
||||
|
||||
['nest', 'enumerate', 'image_url'].each do |func|
|
||||
['selectors', 'enumerate', 'image_url', 'display'].each do |func|
|
||||
require File.join(File.dirname(__FILE__), 'functions', func)
|
||||
end
|
||||
|
||||
module Sass::Script::Functions
|
||||
include Compass::SassExtensions::Functions::Nest
|
||||
include Compass::SassExtensions::Functions::Selectors
|
||||
include Compass::SassExtensions::Functions::Enumerate
|
||||
include Compass::SassExtensions::Functions::ImageUrl
|
||||
include Compass::SassExtensions::Functions::Display
|
||||
end
|
||||
|
||||
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
|
||||
|
||||
22
lib/compass/sass_extensions/functions/display.rb
Normal file
22
lib/compass/sass_extensions/functions/display.rb
Normal file
@ -0,0 +1,22 @@
|
||||
module Compass::SassExtensions::Functions::Display
|
||||
DEFAULT_DISPLAY = {
|
||||
:block => %w{address blockquote center dir div dd dl dt fieldset form
|
||||
frameset h1 h2 h3 h4 h5 h6 hr isindex menu noframes
|
||||
noscript ol p pre ul},
|
||||
:inline => %w{a abbr acronym b basefont bdo big br cite code dfn em
|
||||
font i img input kbd label q s samp select small span
|
||||
strike strong sub sup textarea tt u var},
|
||||
:table => %w{table},
|
||||
:"list-item" => %w{li},
|
||||
:"table-row-group" => %w{tbody},
|
||||
:"table-header-group" => %w{thead},
|
||||
:"table-footer-group" => %w{tfoot},
|
||||
:"table-row" => %w{tr},
|
||||
:"table-cell" => %w{th td}
|
||||
}
|
||||
|
||||
# returns a comma delimited string for all the elements according to their default css3 display value.
|
||||
def elements_of_type(display)
|
||||
Sass::Script::String.new(DEFAULT_DISPLAY.fetch(display.value.to_sym).join(", "))
|
||||
end
|
||||
end
|
||||
@ -1,12 +0,0 @@
|
||||
module Compass::SassExtensions::Functions::Nest
|
||||
COMMA_SEPARATOR = /\s*,\s*/
|
||||
|
||||
def nest(*arguments)
|
||||
nested = arguments.map{|a| a.value}.inject do |memo,arg|
|
||||
ancestors = memo.split(COMMA_SEPARATOR)
|
||||
descendants = arg.split(COMMA_SEPARATOR)
|
||||
ancestors.map{|a| descendants.map{|d| "#{a} #{d}"}.join(", ")}.join(", ")
|
||||
end
|
||||
Sass::Script::String.new(nested)
|
||||
end
|
||||
end
|
||||
39
lib/compass/sass_extensions/functions/selectors.rb
Normal file
39
lib/compass/sass_extensions/functions/selectors.rb
Normal file
@ -0,0 +1,39 @@
|
||||
module Compass::SassExtensions::Functions::Selectors
|
||||
COMMA_SEPARATOR = /\s*,\s*/
|
||||
|
||||
# Permute multiple selectors each of which may be comma delimited, the end result is
|
||||
# a new selector that is the equivalent of nesting each under the previous selector.
|
||||
# To illustrate, the following mixins are equivalent:
|
||||
# =mixin-a(!selector1, !selector2, !selector3)
|
||||
# #{!selector1}
|
||||
# #{selector2}
|
||||
# #{selector3}
|
||||
# width: 2px
|
||||
# =mixin-b(!selector1, !selector2)
|
||||
# #{nest(!selector, !selector2, !selector3)}
|
||||
# width: 2px
|
||||
def nest(*arguments)
|
||||
nested = arguments.map{|a| a.value}.inject do |memo,arg|
|
||||
ancestors = memo.split(COMMA_SEPARATOR)
|
||||
descendants = arg.split(COMMA_SEPARATOR)
|
||||
ancestors.map{|a| descendants.map{|d| "#{a} #{d}"}.join(", ")}.join(", ")
|
||||
end
|
||||
Sass::Script::String.new(nested)
|
||||
end
|
||||
|
||||
# Permute two selectors, the first may be comma delimited.
|
||||
# The end result is a new selector that is the equivalent of nesting the second
|
||||
# selector under the first one in a sass file and preceding it with an &.
|
||||
# To illustrate, the following mixins are equivalent:
|
||||
# =mixin-a(!selector, !to_append)
|
||||
# #{!selector}
|
||||
# &#{!to_append}
|
||||
# width: 2px
|
||||
# =mixin-b(!selector, !to_append)
|
||||
# #{append_selector(!selector, !to_append)}
|
||||
# width: 2px
|
||||
def append_selector(selector, to_append)
|
||||
Sass::Script::String.new(selector.value.split(COMMA_SEPARATOR).map{|s| "#{s}#{to_append}"}.join(", "))
|
||||
end
|
||||
|
||||
end
|
||||
13
test/fixtures/stylesheets/compass/css/reset.css
vendored
13
test/fixtures/stylesheets/compass/css/reset.css
vendored
@ -45,3 +45,16 @@ q, blockquote {
|
||||
|
||||
img a {
|
||||
border: none; }
|
||||
|
||||
.unregistered-only, .registered-only {
|
||||
display: none; }
|
||||
|
||||
body.registered a.registered-only, body.registered abbr.registered-only, body.registered acronym.registered-only, body.registered b.registered-only, body.registered basefont.registered-only, body.registered bdo.registered-only, body.registered big.registered-only, body.registered br.registered-only, body.registered cite.registered-only, body.registered code.registered-only, body.registered dfn.registered-only, body.registered em.registered-only, body.registered font.registered-only, body.registered i.registered-only, body.registered img.registered-only, body.registered input.registered-only, body.registered kbd.registered-only, body.registered label.registered-only, body.registered q.registered-only, body.registered s.registered-only, body.registered samp.registered-only, body.registered select.registered-only, body.registered small.registered-only, body.registered span.registered-only, body.registered strike.registered-only, body.registered strong.registered-only, body.registered sub.registered-only, body.registered sup.registered-only, body.registered textarea.registered-only, body.registered tt.registered-only, body.registered u.registered-only, body.registered var.registered-only {
|
||||
display: inline; }
|
||||
body.registered address.registered-only, body.registered blockquote.registered-only, body.registered center.registered-only, body.registered dir.registered-only, body.registered div.registered-only, body.registered dd.registered-only, body.registered dl.registered-only, body.registered dt.registered-only, body.registered fieldset.registered-only, body.registered form.registered-only, body.registered frameset.registered-only, body.registered h1.registered-only, body.registered h2.registered-only, body.registered h3.registered-only, body.registered h4.registered-only, body.registered h5.registered-only, body.registered h6.registered-only, body.registered hr.registered-only, body.registered isindex.registered-only, body.registered menu.registered-only, body.registered noframes.registered-only, body.registered noscript.registered-only, body.registered ol.registered-only, body.registered p.registered-only, body.registered pre.registered-only, body.registered ul.registered-only {
|
||||
display: block; }
|
||||
|
||||
body.unregistered a.unregistered-only, body.unregistered abbr.unregistered-only, body.unregistered acronym.unregistered-only, body.unregistered b.unregistered-only, body.unregistered basefont.unregistered-only, body.unregistered bdo.unregistered-only, body.unregistered big.unregistered-only, body.unregistered br.unregistered-only, body.unregistered cite.unregistered-only, body.unregistered code.unregistered-only, body.unregistered dfn.unregistered-only, body.unregistered em.unregistered-only, body.unregistered font.unregistered-only, body.unregistered i.unregistered-only, body.unregistered img.unregistered-only, body.unregistered input.unregistered-only, body.unregistered kbd.unregistered-only, body.unregistered label.unregistered-only, body.unregistered q.unregistered-only, body.unregistered s.unregistered-only, body.unregistered samp.unregistered-only, body.unregistered select.unregistered-only, body.unregistered small.unregistered-only, body.unregistered span.unregistered-only, body.unregistered strike.unregistered-only, body.unregistered strong.unregistered-only, body.unregistered sub.unregistered-only, body.unregistered sup.unregistered-only, body.unregistered textarea.unregistered-only, body.unregistered tt.unregistered-only, body.unregistered u.unregistered-only, body.unregistered var.unregistered-only {
|
||||
display: inline; }
|
||||
body.unregistered address.unregistered-only, body.unregistered blockquote.unregistered-only, body.unregistered center.unregistered-only, body.unregistered dir.unregistered-only, body.unregistered div.unregistered-only, body.unregistered dd.unregistered-only, body.unregistered dl.unregistered-only, body.unregistered dt.unregistered-only, body.unregistered fieldset.unregistered-only, body.unregistered form.unregistered-only, body.unregistered frameset.unregistered-only, body.unregistered h1.unregistered-only, body.unregistered h2.unregistered-only, body.unregistered h3.unregistered-only, body.unregistered h4.unregistered-only, body.unregistered h5.unregistered-only, body.unregistered h6.unregistered-only, body.unregistered hr.unregistered-only, body.unregistered isindex.unregistered-only, body.unregistered menu.unregistered-only, body.unregistered noframes.unregistered-only, body.unregistered noscript.unregistered-only, body.unregistered ol.unregistered-only, body.unregistered p.unregistered-only, body.unregistered pre.unregistered-only, body.unregistered ul.unregistered-only {
|
||||
display: block; }
|
||||
@ -1 +1,10 @@
|
||||
@import compass/reset.sass
|
||||
|
||||
// Turn off the display for both of these classes
|
||||
.unregistered-only, .registered-only
|
||||
:display none
|
||||
// Now turn only one of them back on depending on some other context.
|
||||
body.registered
|
||||
+reset-display(".registered-only")
|
||||
body.unregistered
|
||||
+reset-display(".unregistered-only")
|
||||
|
||||
Loading…
Reference in New Issue
Block a user