diff --git a/doc-src/SASS_CHANGELOG.md b/doc-src/SASS_CHANGELOG.md index 7dadcdf6..ffc13ece 100644 --- a/doc-src/SASS_CHANGELOG.md +++ b/doc-src/SASS_CHANGELOG.md @@ -5,6 +5,34 @@ ## 3.0.5 (Unreleased) +### `#{}` Interpolation in Properties + +Previously, using `#{}` in some places in properties +would cause a syntax error. +Now it can be used just about anywhere. + +Note that when `#{}` is used near operators like `/`, +those operators are treated as plain CSS +rather than math operators. +For example: + + p { + $font-size: 12px; + $line-height: 30px; + font: #{$font-size}/#{$line-height}; + } + +is compiled to: + + p { + font: 12px/30px; + } + +This is useful, since normally {file:SASS_REFERENCE.md#division-and-slash +a slash with variables is treated as division}. + +### Rails 3 Support + * Fix Sass configuration under Rails 3. Thanks [Dan Cheail](http://github.com/codeape). diff --git a/doc-src/SASS_REFERENCE.md b/doc-src/SASS_REFERENCE.md index 9e0bea88..5f3afbe5 100644 --- a/doc-src/SASS_REFERENCE.md +++ b/doc-src/SASS_REFERENCE.md @@ -614,6 +614,7 @@ and equality operators are supported for all types. ##### Division and `/` +{#division-and-slash} CSS allows `/` to appear in property values as a way of separating numbers. @@ -648,6 +649,22 @@ is compiled to: height: 250px; margin-left: 9px; } +If you want to use variables along with a plain CSS `/`, +you can use `#{}` to insert them. +For example: + + p { + $font-size: 12px; + $line-height: 30px; + font: #{$font-size}/#{$line-height}; + } + +is compiled to: + + p { + font: 12px/30px; + } + #### Color Operations All arithmetic operations are supported for color values, @@ -820,6 +837,24 @@ is compiled to: p.foo { border-color: blue; } +It's also possible to use `#{}` to put SassScript into property values. +In most cases this isn't any better than using a variable, +but using `#{}` does mean that any operations near it +will be treated as plain CSS. +For example: + + p { + $font-size: 12px; + $line-height: 30px; + font: #{$font-size}/#{$line-height}; + } + +is compiled to: + + p { + font: 12px/30px; + } + ### Variable Defaults: `!default` You can assign to variables if they aren't already assigned diff --git a/lib/sass/script/interpolation.rb b/lib/sass/script/interpolation.rb index 5ed0039d..e016fdb8 100644 --- a/lib/sass/script/interpolation.rb +++ b/lib/sass/script/interpolation.rb @@ -10,12 +10,17 @@ module Sass::Script # @param after [Node] The SassScript after the interpolation # @param wb [Boolean] Whether there was whitespace between `before` and `#{` # @param wa [Boolean] Whether there was whitespace between `}` and `after` - def initialize(before, mid, after, wb, wa) + # @param originally_text [Boolean] + # Whether the original format of the interpolation was plain text, + # not an interpolation. + # This is used when converting back to SassScript. + def initialize(before, mid, after, wb, wa, originally_text = false) @before = before @mid = mid @after = after @whitespace_before = wb @whitespace_after = wa + @originally_text = originally_text end # @return [String] A human-readable s-expression representation of the interpolation @@ -28,7 +33,9 @@ module Sass::Script res = "" res << @before.to_sass(opts) if @before res << ' ' if @before && @whitespace_before - res << '#{' << @mid.to_sass(opts) << '}' + res << '#{' unless @originally_text + res << @mid.to_sass(opts) + res << '}' unless @originally_text res << ' ' if @after && @whitespace_after res << @after.to_sass(opts) if @after res diff --git a/lib/sass/script/lexer.rb b/lib/sass/script/lexer.rb index d88e5da1..c3387dcd 100644 --- a/lib/sass/script/lexer.rb +++ b/lib/sass/script/lexer.rb @@ -175,6 +175,11 @@ module Sass @scanner.eos? && @tok.nil? end + # @return [Boolean] Whether or not the last token lexed was `:end_interpolation`. + def after_interpolation? + @prev && @prev.type == :end_interpolation + end + # Raise an error to the effect that `name` was expected in the input stream # and wasn't found. # @@ -327,10 +332,6 @@ MESSAGE def current_position @offset + 1 end - - def after_interpolation? - @prev && @prev.type == :end_interpolation - end end end end diff --git a/lib/sass/script/parser.rb b/lib/sass/script/parser.rb index aa4eda0f..55b0782e 100644 --- a/lib/sass/script/parser.rb +++ b/lib/sass/script/parser.rb @@ -150,8 +150,10 @@ module Sass def production(name, sub, *ops) class_eval <