Ampersands in Sass selectors refer to the parent selectors.
git-svn-id: svn://hamptoncatlin.com/haml/trunk@420 7063305b-7217-0410-af8c-cdc13e5119b9
This commit is contained in:
parent
0dfae72c4a
commit
989004d354
51
lib/sass.rb
51
lib/sass.rb
|
@ -142,6 +142,57 @@ $LOAD_PATH << dir unless $LOAD_PATH.include?(dir)
|
|||
# #main pre {
|
||||
# font-size: 3em; }
|
||||
#
|
||||
# === Referencing Parent Rules
|
||||
#
|
||||
# In addition to the default behavior of inserting the parent selector
|
||||
# as a CSS parent of the current selector
|
||||
# (e.g. above, "#main" is the parent of "p"),
|
||||
# you can have more fine-grained control over what's done with the parent selector
|
||||
# by using the ampersand character "&" in your selectors.
|
||||
#
|
||||
# The ampersand is automatically replaced by the parent selector,
|
||||
# instead of having it prepended.
|
||||
# This allows you to cleanly create pseudo-attributes:
|
||||
#
|
||||
# a
|
||||
# :font-weight bold
|
||||
# :text-decoration none
|
||||
# &:hover
|
||||
# :text-decoration underline
|
||||
# &:visited
|
||||
# :font-weight normal
|
||||
#
|
||||
# Which would become:
|
||||
#
|
||||
# a {
|
||||
# font-weight: bold;
|
||||
# text-decoration: none; }
|
||||
# a:hover {
|
||||
# text-decoration: underline; }
|
||||
# a:visited {
|
||||
# font-weight: normal; }
|
||||
#
|
||||
# It also allows you to add selectors at the base of the hierarchy,
|
||||
# which can be useuful for targeting certain styles to certain browsers:
|
||||
#
|
||||
# #main
|
||||
# :width 90%
|
||||
# #sidebar
|
||||
# :float left
|
||||
# :margin-left 20%
|
||||
# .ie6 &
|
||||
# :margin-left 40%
|
||||
#
|
||||
# Which would become:
|
||||
#
|
||||
# #main {
|
||||
# width: 90%; }
|
||||
# #main #sidebar {
|
||||
# float: left;
|
||||
# margin-left: 20%; }
|
||||
# .ie6 #main #sidebar {
|
||||
# margin-left: 40%; }
|
||||
#
|
||||
# === Attribute Namespaces
|
||||
#
|
||||
# CSS has quite a few attributes that are in "namespaces;"
|
||||
|
|
|
@ -3,16 +3,26 @@ require 'sass/tree/attr_node'
|
|||
|
||||
module Sass::Tree
|
||||
class RuleNode < ValueNode
|
||||
# The character used to include the parent selector
|
||||
PARENT = '&'
|
||||
|
||||
alias_method :rule, :value
|
||||
alias_method :rule=, :value=
|
||||
|
||||
def to_s(tabs, super_rules = nil)
|
||||
attributes = []
|
||||
sub_rules = []
|
||||
refs_parent = self.rule.include? PARENT
|
||||
total_rule = if super_rules
|
||||
super_rules.split(/,\s*/).collect! do |s|
|
||||
self.rule.split(/,\s*/).collect! {|r| "#{s} #{r}"}.join(", ")
|
||||
if refs_parent
|
||||
self.rule.gsub(PARENT, s)
|
||||
else
|
||||
self.rule.split(/,\s*/).collect {|r| "#{s} #{r}"}.join(", ")
|
||||
end
|
||||
end.join(", ")
|
||||
elsif refs_parent
|
||||
raise Sass::SyntaxError.new("Base-level rules cannot contain the parent-selector-referencing character '#{PARENT}'", line)
|
||||
else
|
||||
self.rule
|
||||
end
|
||||
|
|
|
@ -32,7 +32,8 @@ class SassEngineTest < Test::Unit::TestCase
|
|||
"a\n :b c" => "Illegal Indentation: Only two space characters are allowed as tabulation.",
|
||||
"a\n :b c" => "Illegal Indentation: Only two space characters are allowed as tabulation.",
|
||||
"a\n :b\n !c = 3" => "Constants may only be declared at the root of a document.",
|
||||
"!a = 1b + 2c" => "Incompatible units: b and c"
|
||||
"!a = 1b + 2c" => "Incompatible units: b and c",
|
||||
"& a\n :b c" => "Base-level rules cannot contain the parent-selector-referencing character '&'"
|
||||
}
|
||||
|
||||
def test_basic_render
|
||||
|
|
|
@ -8,7 +8,7 @@ RAILS_ENV = 'testing'
|
|||
require 'sass/plugin'
|
||||
|
||||
class SassPluginTest < Test::Unit::TestCase
|
||||
@@templates = %w{ complex constants }
|
||||
@@templates = %w{ complex constants parent_ref }
|
||||
|
||||
def setup
|
||||
Sass::Plugin.options = {
|
||||
|
|
Loading…
Reference in New Issue