From 41775e86f4e8de151a102efc35641481876529f9 Mon Sep 17 00:00:00 2001 From: Nathan Weizenbaum Date: Sat, 6 Mar 2010 16:13:29 -0800 Subject: [PATCH] [Sass] Update documentation to use $ rather than !. --- README.md | 18 ++-- doc-src/SASS_CHANGELOG.md | 8 +- doc-src/SASS_REFERENCE.md | 140 ++++++++++++++--------------- lib/sass/script/functions.rb | 2 +- lib/sass/script/literal.rb | 8 +- lib/sass/script/number.rb | 4 +- lib/sass/script/operation.rb | 2 +- lib/sass/script/unary_operation.rb | 2 +- 8 files changed, 92 insertions(+), 92 deletions(-) diff --git a/README.md b/README.md index 27490349..8d01b89f 100644 --- a/README.md +++ b/README.md @@ -209,15 +209,15 @@ Then, if you put `=` after your property name, you can set it to a variable. For example: - !note_bg= #55aaff + $note_bg= #55aaff #main width: 70% .note - background-color = !note_bg + background-color = $note_bg p width: 5em - background-color = !note_bg + background-color = $note_bg becomes: @@ -232,15 +232,15 @@ becomes: You can even do simple arithmetic operations with variables, adding numbers and even colors together: - !main_bg= #46ar12 - !main_width= 40em + $main_bg= #46ar12 + $main_width= 40em #main - background-color = !main_bg - width = !main_width + background-color = $main_bg + width = $main_width .sidebar - background-color = !main_bg + #333333 - width = !main_width - 25em + background-color = $main_bg + #333333 + width = $main_width - 25em becomes: diff --git a/doc-src/SASS_CHANGELOG.md b/doc-src/SASS_CHANGELOG.md index 1126854e..f7ef044c 100644 --- a/doc-src/SASS_CHANGELOG.md +++ b/doc-src/SASS_CHANGELOG.md @@ -126,9 +126,9 @@ SassScript variable and mixin names may now contain hyphens. In fact, they may be any valid CSS3 identifier. For example: - !prettiest-color = #542FA9 + $prettiest-color = #542FA9 =pretty-text - color = !prettiest-color + color = $prettiest-color In order to allow frameworks like [Compass](http://compass-style.org) to use hyphens in variable names @@ -137,10 +137,10 @@ variables and mixins using hyphens may be referred to with underscores, and vice versa. For example: - !prettiest-color = #542FA9 + $prettiest-color = #542FA9 .pretty // Using an underscore instead of a hyphen works - color = !prettiest_color + color = $prettiest_color #### Single-Quoted Strings diff --git a/doc-src/SASS_REFERENCE.md b/doc-src/SASS_REFERENCE.md index 01010ec0..790b91d7 100644 --- a/doc-src/SASS_REFERENCE.md +++ b/doc-src/SASS_REFERENCE.md @@ -116,11 +116,11 @@ Available options are: `:new` forces the use of a colon or equals sign after the property name. For example: `color: #0f3` - or `width = !main_width`. + or `width = $main_width`. `:old` forces the use of a colon before the property name. For example: `:color #0f3` - or `:width = !main_width`. + or `:width = $main_width`. By default, either syntax is valid. {#cache-option} `:cache` @@ -705,25 +705,25 @@ until one succeeds or the `@else` is reached. For example: {.sass-ex} - !type = "monster" + $type = "monster" p - @if !type == "ocean" + @if $type == "ocean" color: blue - @else if !type == "matador" + @else if $type == "matador" color: red - @else if !type == "monster" + @else if $type == "monster" color: green @else color: black {.scss-ex} - !type = "monster"; + $type = "monster"; p { - @if !type == "ocean" { + @if $type == "ocean" { color: blue; - } @else if !type == "matador" { + } @else if $type == "matador" { color: red; - } @else if !type == "monster" { + } @else if $type == "monster" { color: green; } @else { color: black; @@ -740,7 +740,7 @@ is compiled to: The `@for` statement has two forms: `@for from to ` or `@for from through `. -`` is a variable name, like `!i`, +`` is a variable name, like `$i`, and `` and `` are SassScript expressions that should return integers. @@ -750,13 +750,13 @@ including `` if `through` is used. For example: {.sass-ex} - @for !i from 1 through 3 - .item-#{!i} - width = 2em * !i + @for $i from 1 through 3 + .item-#{$i} + width = 2em * $i {.scss-ex} - @for !i from 1 through 3 { - .item-#{!i} { width = 2em * !i; } + @for $i from 1 through 3 { + .item-#{$i} { width = 2em * $i; } } is compiled to: @@ -777,17 +777,17 @@ statement is capable of. For example: {.sass-ex} - !i = 6 - @while !i > 0 - .item-#{!i} - width = 2em * !i - !i = !i - 2 + $i = 6 + @while $i > 0 + .item-#{$i} + width = 2em * $i + $i = $i - 2 {.scss-ex} - !i = 6; - @while !i > 0 { - .item-#{!i} { width = 2em * !i; } - !i = !i - 2; + $i = 6; + @while $i > 0 { + .item-#{$i} { width = 2em * $i; } + $i = $i - 2; } is compiled to: @@ -856,21 +856,21 @@ Variables begin with exclamation marks, and are set like so: {.sass-ex} - !width = 5em + $width = 5em {.scss-ex} - !width = 5em; + $width = 5em; You can then refer to them by putting an equals sign after your properties: {.sass-ex} #main - width = !width + width = $width {.scss-ex} #main { - width = !width; + width = $width; } Variables that are first defined in a scoped context are only @@ -889,21 +889,21 @@ in a SassScript context will cause an error: {.sass-ex} p - !width = 5em + $width = 5em // This will cause an error - border = !width solid blue + border = $width solid blue // Use one of the following forms instead: - border = "#{!width} solid blue" - border = !width "solid" "blue" + border = "#{$width} solid blue" + border = $width "solid" "blue" {.scss-ex} p { - !width = 5em; + $width = 5em; /* This will cause an error */ - /* border = !width solid blue; */ + /* border = $width solid blue; */ /* Use one of the following forms instead: */ - border = "#{!width} solid blue"; - border = !width "solid" "blue"; + border = "#{$width} solid blue"; + border = $width "solid" "blue"; } is compiled to: @@ -1012,16 +1012,16 @@ The alpha channel of a color can be adjusted using the For example: {.sass-ex} - !translucent-red = rgba(255, 0, 0, 0.5) + $translucent-red = rgba(255, 0, 0, 0.5) p - color = opacify(!translucent-red, 80%) - background-color = transparentize(!translucent-red, 50%) + color = opacify($translucent-red, 80%) + background-color = transparentize($translucent-red, 50%) {.scss-ex} - !translucent-red = rgba(255, 0, 0, 0.5); + $translucent-red = rgba(255, 0, 0, 0.5); p { - color = opacify(!translucent-red, 80%); - background-color = transparentize(!translucent-red, 50%); + color = opacify($translucent-red, 80%); + background-color = transparentize($translucent-red, 50%); } is compiled to: @@ -1126,15 +1126,15 @@ You can also use SassScript variables in selectors and property names using #{} interpolation syntax: {.sass-ex} - !name = foo - !attr = border - p.#{!name} - #{!attr}-color: blue + $name = foo + $attr = border + p.#{$name} + #{$attr}-color: blue {.scss-ex} - !name = foo; - !attr = border; - p.#{!name} { #{!attr}-color: blue } + $name = foo; + $attr = border; + p.#{$name} { #{$attr}-color: blue } is compiled to: @@ -1151,22 +1151,22 @@ but if it doesn't have a value yet, it will be given one. For example: {.sass-ex} - !content = "First content" - !content ||= "Second content?" - !new_content ||= "First time reference" + $content = "First content" + $content ||= "Second content?" + $new_content ||= "First time reference" #main - content = !content - new-content = !new_content + content = $content + new-content = $new_content {.scss-ex} - !content = "First content"; - !content ||= "Second content?"; - !new_content ||= "First time reference"; + $content = "First content"; + $content ||= "Second content?"; + $new_content ||= "First time reference"; #main { - content = !content; - new-content = !new_content; + content = $content; + new-content = $new_content; } is compiled to: @@ -1304,18 +1304,18 @@ into the top most level of a document. Mixins can take arguments which can be used with SassScript: {.sass-ex} - =sexy-border(!color) + =sexy-border($color) border: - color = !color + color = $color width: 1in style: dashed p +sexy-border("blue") {.scss-ex} - @mixin sexy-border(!color) { + @mixin sexy-border($color) { border: { - color = !color; + color = $color; width: 1in; style: dashed; } @@ -1333,19 +1333,19 @@ is compiled to: Mixins can also specify default values for their arguments: {.sass-ex} - =sexy-border(!color, !width = 1in) + =sexy-border($color, $width = 1in) border: - color = !color - width = !width + color = $color + width = $width style: dashed p +sexy-border("blue") {.scss-ex} - @mixin sexy-border(!color, !width = 1in) { + @mixin sexy-border($color, $width = 1in) { border: { - color = !color; - width = !width; + color = $color; + width = $width; style: dashed; } p { @include sexy-border("blue"); } diff --git a/lib/sass/script/functions.rb b/lib/sass/script/functions.rb index 17c08b25..a876af13 100644 --- a/lib/sass/script/functions.rb +++ b/lib/sass/script/functions.rb @@ -2,7 +2,7 @@ module Sass::Script # Methods in this module are accessible from the SassScript context. # For example, you can write # - # !color = hsl(120deg, 100%, 50%) + # $color = hsl(120deg, 100%, 50%) # # and it will call {Sass::Script::Functions#hsl}. # diff --git a/lib/sass/script/literal.rb b/lib/sass/script/literal.rb index ae6a431c..4b9bf542 100644 --- a/lib/sass/script/literal.rb +++ b/lib/sass/script/literal.rb @@ -101,7 +101,7 @@ MSG Sass::Script::Bool.new(!to_bool) end - # The SassScript default operation (e.g. `!a !b`, `"foo" "bar"`). + # The SassScript default operation (e.g. `$a $b`, `"foo" "bar"`). # # @param other [Literal] The right-hand side of the operator # @return [Script::String] A string containing both literals @@ -110,7 +110,7 @@ MSG Sass::Script::String.new("#{self.to_s} #{other.to_s}") end - # The SassScript `,` operation (e.g. `!a, !b`, `"foo", "bar"`). + # The SassScript `,` operation (e.g. `$a, $b`, `"foo", "bar"`). # # @param other [Literal] The right-hand side of the operator # @return [Script::String] A string containing both literals @@ -146,7 +146,7 @@ MSG Sass::Script::String.new("#{self.to_s}/#{other.to_s}") end - # The SassScript unary `-` operation (e.g. `-!a`). + # The SassScript unary `-` operation (e.g. `-$a`). # # @param other [Literal] The right-hand side of the operator # @return [Script::String] A string containing the literal @@ -155,7 +155,7 @@ MSG Sass::Script::String.new("-#{self.to_s}") end - # The SassScript unary `/` operation (e.g. `/!a`). + # The SassScript unary `/` operation (e.g. `/$a`). # # @param other [Literal] The right-hand side of the operator # @return [Script::String] A string containing the literal diff --git a/lib/sass/script/number.rb b/lib/sass/script/number.rb index e5581fbf..3453b5fd 100644 --- a/lib/sass/script/number.rb +++ b/lib/sass/script/number.rb @@ -65,7 +65,7 @@ module Sass::Script end end - # The SassScript binary `-` operation (e.g. `!a - !b`). + # The SassScript binary `-` operation (e.g. `$a - $b`). # Its functionality depends on the type of its argument: # # {Number} @@ -85,7 +85,7 @@ module Sass::Script end end - # The SassScript unary `-` operation (e.g. `-!a`). + # The SassScript unary `-` operation (e.g. `-$a`). # # @return [Number] The negative value of this number def unary_minus diff --git a/lib/sass/script/operation.rb b/lib/sass/script/operation.rb index d53c8a88..e2cdf2d6 100644 --- a/lib/sass/script/operation.rb +++ b/lib/sass/script/operation.rb @@ -7,7 +7,7 @@ require 'sass/script/unary_operation' module Sass::Script # A SassScript parse node representing a binary operation, - # such as `!a + !b` or `"foo" + 1`. + # such as `$a + $b` or `"foo" + 1`. class Operation < Node attr_reader :operator diff --git a/lib/sass/script/unary_operation.rb b/lib/sass/script/unary_operation.rb index 42a717a1..c9d6552f 100644 --- a/lib/sass/script/unary_operation.rb +++ b/lib/sass/script/unary_operation.rb @@ -1,6 +1,6 @@ module Sass::Script # A SassScript parse node representing a unary operation, - # such as `-!b` or `not true`. + # such as `-$b` or `not true`. # # Currently only `-`, `/`, and `not` are unary operators. class UnaryOperation < Node