From 27b821617afd0d3c4d0359070582980260d1e72e Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sat, 20 Jun 2009 18:06:47 -0700 Subject: [PATCH] [Compass Core] +reset-display mixin and Sass Extensions for appending selectors and enumerating the elements for a given display type. --- .../compass/utilities/general/_reset.sass | 25 ++++++++++++ lib/compass/sass_extensions/functions.rb | 5 ++- .../sass_extensions/functions/display.rb | 22 +++++++++++ lib/compass/sass_extensions/functions/nest.rb | 12 ------ .../sass_extensions/functions/selectors.rb | 39 +++++++++++++++++++ .../stylesheets/compass/css/reset.css | 13 +++++++ .../stylesheets/compass/sass/reset.sass | 9 +++++ 7 files changed, 111 insertions(+), 14 deletions(-) create mode 100644 lib/compass/sass_extensions/functions/display.rb delete mode 100644 lib/compass/sass_extensions/functions/nest.rb create mode 100644 lib/compass/sass_extensions/functions/selectors.rb diff --git a/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass b/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass index 7351ea2e..8d968e53 100644 --- a/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass +++ b/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass @@ -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 \ No newline at end of file diff --git a/lib/compass/sass_extensions/functions.rb b/lib/compass/sass_extensions/functions.rb index f33513b6..7ba70db3 100644 --- a/lib/compass/sass_extensions/functions.rb +++ b/lib/compass/sass_extensions/functions.rb @@ -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? diff --git a/lib/compass/sass_extensions/functions/display.rb b/lib/compass/sass_extensions/functions/display.rb new file mode 100644 index 00000000..bea06200 --- /dev/null +++ b/lib/compass/sass_extensions/functions/display.rb @@ -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 \ No newline at end of file diff --git a/lib/compass/sass_extensions/functions/nest.rb b/lib/compass/sass_extensions/functions/nest.rb deleted file mode 100644 index 8981f79e..00000000 --- a/lib/compass/sass_extensions/functions/nest.rb +++ /dev/null @@ -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 \ No newline at end of file diff --git a/lib/compass/sass_extensions/functions/selectors.rb b/lib/compass/sass_extensions/functions/selectors.rb new file mode 100644 index 00000000..fecaab73 --- /dev/null +++ b/lib/compass/sass_extensions/functions/selectors.rb @@ -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 \ No newline at end of file diff --git a/test/fixtures/stylesheets/compass/css/reset.css b/test/fixtures/stylesheets/compass/css/reset.css index 054631bf..e778b379 100644 --- a/test/fixtures/stylesheets/compass/css/reset.css +++ b/test/fixtures/stylesheets/compass/css/reset.css @@ -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; } \ No newline at end of file diff --git a/test/fixtures/stylesheets/compass/sass/reset.sass b/test/fixtures/stylesheets/compass/sass/reset.sass index 3ea3a5b2..3293dc6c 100644 --- a/test/fixtures/stylesheets/compass/sass/reset.sass +++ b/test/fixtures/stylesheets/compass/sass/reset.sass @@ -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")