mirror of
https://github.com/haml/haml.git
synced 2022-11-09 12:33:31 -05:00
[Sass] Update documentation to use $ rather than !.
This commit is contained in:
parent
41d2178b77
commit
41775e86f4
8 changed files with 92 additions and 92 deletions
18
README.md
18
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:
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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 <var> from <start> to <end>` or
|
||||
`@for <var> from <start> through <end>`.
|
||||
`<var>` is a variable name, like `!i`,
|
||||
`<var>` is a variable name, like `$i`,
|
||||
and `<start>` and `<end>` are SassScript expressions
|
||||
that should return integers.
|
||||
|
||||
|
@ -750,13 +750,13 @@ including `<end>` 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"); }
|
||||
|
|
|
@ -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}.
|
||||
#
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue