haml 3.0.21 → 3.0.22
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of haml might be problematic. Click here for more details.
- data/Rakefile +1 -41
- data/VERSION +1 -1
- data/lib/haml/precompiler.rb +8 -6
- data/lib/haml/template/plugin.rb +16 -6
- data/lib/sass/less.rb +31 -12
- data/lib/sass/script/funcall.rb +2 -1
- data/lib/sass/script/operation.rb +10 -5
- data/lib/sass/script/parser.rb +9 -0
- data/test/haml/engine_test.rb +25 -0
- data/test/sass/less_conversion_test.rb +24 -3
- data/test/sass/script_conversion_test.rb +60 -0
- metadata +243 -426
- data/vendor/sass/CONTRIBUTING +0 -3
- data/vendor/sass/MIT-LICENSE +0 -20
- data/vendor/sass/README.md +0 -201
- data/vendor/sass/Rakefile +0 -363
- data/vendor/sass/TODO +0 -39
- data/vendor/sass/VERSION +0 -1
- data/vendor/sass/VERSION_NAME +0 -1
- data/vendor/sass/bin/css2sass +0 -13
- data/vendor/sass/bin/sass +0 -8
- data/vendor/sass/bin/sass-convert +0 -7
- data/vendor/sass/doc-src/FAQ.md +0 -35
- data/vendor/sass/doc-src/INDENTED_SYNTAX.md +0 -210
- data/vendor/sass/doc-src/SASS_CHANGELOG.md +0 -1870
- data/vendor/sass/doc-src/SASS_REFERENCE.md +0 -1713
- data/vendor/sass/doc-src/SCSS_FOR_SASS_USERS.md +0 -155
- data/vendor/sass/ext/extconf.rb +0 -10
- data/vendor/sass/extra/update_watch.rb +0 -13
- data/vendor/sass/init.rb +0 -18
- data/vendor/sass/lib/sass.rb +0 -71
- data/vendor/sass/lib/sass/cache_store.rb +0 -208
- data/vendor/sass/lib/sass/callbacks.rb +0 -66
- data/vendor/sass/lib/sass/css.rb +0 -294
- data/vendor/sass/lib/sass/engine.rb +0 -792
- data/vendor/sass/lib/sass/environment.rb +0 -143
- data/vendor/sass/lib/sass/error.rb +0 -201
- data/vendor/sass/lib/sass/exec.rb +0 -619
- data/vendor/sass/lib/sass/importers.rb +0 -22
- data/vendor/sass/lib/sass/importers/base.rb +0 -138
- data/vendor/sass/lib/sass/importers/filesystem.rb +0 -121
- data/vendor/sass/lib/sass/less.rb +0 -363
- data/vendor/sass/lib/sass/plugin.rb +0 -126
- data/vendor/sass/lib/sass/plugin/compiler.rb +0 -346
- data/vendor/sass/lib/sass/plugin/configuration.rb +0 -123
- data/vendor/sass/lib/sass/plugin/generic.rb +0 -15
- data/vendor/sass/lib/sass/plugin/merb.rb +0 -48
- data/vendor/sass/lib/sass/plugin/rack.rb +0 -47
- data/vendor/sass/lib/sass/plugin/rails.rb +0 -41
- data/vendor/sass/lib/sass/plugin/staleness_checker.rb +0 -145
- data/vendor/sass/lib/sass/railtie.rb +0 -8
- data/vendor/sass/lib/sass/repl.rb +0 -58
- data/vendor/sass/lib/sass/root.rb +0 -7
- data/vendor/sass/lib/sass/script.rb +0 -63
- data/vendor/sass/lib/sass/script/bool.rb +0 -18
- data/vendor/sass/lib/sass/script/color.rb +0 -491
- data/vendor/sass/lib/sass/script/css_lexer.rb +0 -29
- data/vendor/sass/lib/sass/script/css_parser.rb +0 -31
- data/vendor/sass/lib/sass/script/funcall.rb +0 -79
- data/vendor/sass/lib/sass/script/functions.rb +0 -852
- data/vendor/sass/lib/sass/script/interpolation.rb +0 -70
- data/vendor/sass/lib/sass/script/lexer.rb +0 -337
- data/vendor/sass/lib/sass/script/literal.rb +0 -236
- data/vendor/sass/lib/sass/script/node.rb +0 -101
- data/vendor/sass/lib/sass/script/number.rb +0 -423
- data/vendor/sass/lib/sass/script/operation.rb +0 -92
- data/vendor/sass/lib/sass/script/parser.rb +0 -392
- data/vendor/sass/lib/sass/script/string.rb +0 -67
- data/vendor/sass/lib/sass/script/string_interpolation.rb +0 -93
- data/vendor/sass/lib/sass/script/unary_operation.rb +0 -57
- data/vendor/sass/lib/sass/script/variable.rb +0 -48
- data/vendor/sass/lib/sass/scss.rb +0 -17
- data/vendor/sass/lib/sass/scss/css_parser.rb +0 -51
- data/vendor/sass/lib/sass/scss/parser.rb +0 -838
- data/vendor/sass/lib/sass/scss/rx.rb +0 -126
- data/vendor/sass/lib/sass/scss/sass_parser.rb +0 -11
- data/vendor/sass/lib/sass/scss/script_lexer.rb +0 -15
- data/vendor/sass/lib/sass/scss/script_parser.rb +0 -25
- data/vendor/sass/lib/sass/scss/static_parser.rb +0 -40
- data/vendor/sass/lib/sass/selector.rb +0 -361
- data/vendor/sass/lib/sass/selector/abstract_sequence.rb +0 -62
- data/vendor/sass/lib/sass/selector/comma_sequence.rb +0 -82
- data/vendor/sass/lib/sass/selector/sequence.rb +0 -236
- data/vendor/sass/lib/sass/selector/simple.rb +0 -113
- data/vendor/sass/lib/sass/selector/simple_sequence.rb +0 -135
- data/vendor/sass/lib/sass/shared.rb +0 -78
- data/vendor/sass/lib/sass/tree/comment_node.rb +0 -128
- data/vendor/sass/lib/sass/tree/debug_node.rb +0 -36
- data/vendor/sass/lib/sass/tree/directive_node.rb +0 -75
- data/vendor/sass/lib/sass/tree/extend_node.rb +0 -65
- data/vendor/sass/lib/sass/tree/for_node.rb +0 -67
- data/vendor/sass/lib/sass/tree/if_node.rb +0 -81
- data/vendor/sass/lib/sass/tree/import_node.rb +0 -124
- data/vendor/sass/lib/sass/tree/mixin_def_node.rb +0 -60
- data/vendor/sass/lib/sass/tree/mixin_node.rb +0 -123
- data/vendor/sass/lib/sass/tree/node.rb +0 -490
- data/vendor/sass/lib/sass/tree/prop_node.rb +0 -220
- data/vendor/sass/lib/sass/tree/root_node.rb +0 -125
- data/vendor/sass/lib/sass/tree/rule_node.rb +0 -273
- data/vendor/sass/lib/sass/tree/variable_node.rb +0 -39
- data/vendor/sass/lib/sass/tree/warn_node.rb +0 -42
- data/vendor/sass/lib/sass/tree/while_node.rb +0 -48
- data/vendor/sass/lib/sass/util.rb +0 -700
- data/vendor/sass/lib/sass/util/subset_map.rb +0 -101
- data/vendor/sass/lib/sass/version.rb +0 -109
- data/vendor/sass/rails/init.rb +0 -1
- data/vendor/sass/sass.gemspec +0 -32
- data/vendor/sass/test/sass/cache_test.rb +0 -74
- data/vendor/sass/test/sass/callbacks_test.rb +0 -61
- data/vendor/sass/test/sass/conversion_test.rb +0 -1210
- data/vendor/sass/test/sass/css2sass_test.rb +0 -364
- data/vendor/sass/test/sass/data/hsl-rgb.txt +0 -319
- data/vendor/sass/test/sass/engine_test.rb +0 -2283
- data/vendor/sass/test/sass/extend_test.rb +0 -1348
- data/vendor/sass/test/sass/functions_test.rb +0 -565
- data/vendor/sass/test/sass/importer_test.rb +0 -104
- data/vendor/sass/test/sass/less_conversion_test.rb +0 -632
- data/vendor/sass/test/sass/mock_importer.rb +0 -49
- data/vendor/sass/test/sass/more_results/more1.css +0 -9
- data/vendor/sass/test/sass/more_results/more1_with_line_comments.css +0 -26
- data/vendor/sass/test/sass/more_results/more_import.css +0 -29
- data/vendor/sass/test/sass/more_templates/_more_partial.sass +0 -2
- data/vendor/sass/test/sass/more_templates/more1.sass +0 -23
- data/vendor/sass/test/sass/more_templates/more_import.sass +0 -11
- data/vendor/sass/test/sass/plugin_test.rb +0 -430
- data/vendor/sass/test/sass/results/alt.css +0 -4
- data/vendor/sass/test/sass/results/basic.css +0 -9
- data/vendor/sass/test/sass/results/compact.css +0 -5
- data/vendor/sass/test/sass/results/complex.css +0 -86
- data/vendor/sass/test/sass/results/compressed.css +0 -1
- data/vendor/sass/test/sass/results/expanded.css +0 -19
- data/vendor/sass/test/sass/results/import.css +0 -31
- data/vendor/sass/test/sass/results/line_numbers.css +0 -49
- data/vendor/sass/test/sass/results/mixins.css +0 -95
- data/vendor/sass/test/sass/results/multiline.css +0 -24
- data/vendor/sass/test/sass/results/nested.css +0 -22
- data/vendor/sass/test/sass/results/options.css +0 -1
- data/vendor/sass/test/sass/results/parent_ref.css +0 -13
- data/vendor/sass/test/sass/results/script.css +0 -16
- data/vendor/sass/test/sass/results/scss_import.css +0 -31
- data/vendor/sass/test/sass/results/scss_importee.css +0 -2
- data/vendor/sass/test/sass/results/subdir/nested_subdir/nested_subdir.css +0 -1
- data/vendor/sass/test/sass/results/subdir/subdir.css +0 -3
- data/vendor/sass/test/sass/results/units.css +0 -11
- data/vendor/sass/test/sass/results/warn.css +0 -0
- data/vendor/sass/test/sass/results/warn_imported.css +0 -0
- data/vendor/sass/test/sass/script_conversion_test.rb +0 -254
- data/vendor/sass/test/sass/script_test.rb +0 -470
- data/vendor/sass/test/sass/scss/css_test.rb +0 -897
- data/vendor/sass/test/sass/scss/rx_test.rb +0 -156
- data/vendor/sass/test/sass/scss/scss_test.rb +0 -1088
- data/vendor/sass/test/sass/scss/test_helper.rb +0 -37
- data/vendor/sass/test/sass/templates/_partial.sass +0 -2
- data/vendor/sass/test/sass/templates/alt.sass +0 -16
- data/vendor/sass/test/sass/templates/basic.sass +0 -23
- data/vendor/sass/test/sass/templates/bork1.sass +0 -2
- data/vendor/sass/test/sass/templates/bork2.sass +0 -2
- data/vendor/sass/test/sass/templates/bork3.sass +0 -2
- data/vendor/sass/test/sass/templates/bork4.sass +0 -2
- data/vendor/sass/test/sass/templates/compact.sass +0 -17
- data/vendor/sass/test/sass/templates/complex.sass +0 -305
- data/vendor/sass/test/sass/templates/compressed.sass +0 -15
- data/vendor/sass/test/sass/templates/expanded.sass +0 -17
- data/vendor/sass/test/sass/templates/import.sass +0 -12
- data/vendor/sass/test/sass/templates/importee.less +0 -2
- data/vendor/sass/test/sass/templates/importee.sass +0 -19
- data/vendor/sass/test/sass/templates/line_numbers.sass +0 -13
- data/vendor/sass/test/sass/templates/mixin_bork.sass +0 -5
- data/vendor/sass/test/sass/templates/mixins.sass +0 -76
- data/vendor/sass/test/sass/templates/multiline.sass +0 -20
- data/vendor/sass/test/sass/templates/nested.sass +0 -25
- data/vendor/sass/test/sass/templates/nested_bork1.sass +0 -2
- data/vendor/sass/test/sass/templates/nested_bork2.sass +0 -2
- data/vendor/sass/test/sass/templates/nested_bork3.sass +0 -2
- data/vendor/sass/test/sass/templates/nested_bork4.sass +0 -2
- data/vendor/sass/test/sass/templates/nested_mixin_bork.sass +0 -6
- data/vendor/sass/test/sass/templates/options.sass +0 -2
- data/vendor/sass/test/sass/templates/parent_ref.sass +0 -25
- data/vendor/sass/test/sass/templates/script.sass +0 -101
- data/vendor/sass/test/sass/templates/scss_import.scss +0 -11
- data/vendor/sass/test/sass/templates/scss_importee.scss +0 -1
- data/vendor/sass/test/sass/templates/subdir/nested_subdir/_nested_partial.sass +0 -2
- data/vendor/sass/test/sass/templates/subdir/nested_subdir/nested_subdir.sass +0 -3
- data/vendor/sass/test/sass/templates/subdir/subdir.sass +0 -6
- data/vendor/sass/test/sass/templates/units.sass +0 -11
- data/vendor/sass/test/sass/templates/warn.sass +0 -3
- data/vendor/sass/test/sass/templates/warn_imported.sass +0 -4
- data/vendor/sass/test/sass/test_helper.rb +0 -8
- data/vendor/sass/test/sass/util/subset_map_test.rb +0 -91
- data/vendor/sass/test/sass/util_test.rb +0 -275
- data/vendor/sass/test/test_helper.rb +0 -64
- data/vendor/sass/yard/callbacks.rb +0 -29
- data/vendor/sass/yard/default/fulldoc/html/css/common.sass +0 -26
- data/vendor/sass/yard/default/layout/html/footer.erb +0 -12
- data/vendor/sass/yard/inherited_hash.rb +0 -41
data/vendor/sass/TODO
DELETED
@@ -1,39 +0,0 @@
|
|
1
|
-
# -*- mode: org -*-
|
2
|
-
#+STARTUP: nofold
|
3
|
-
|
4
|
-
* Documentation
|
5
|
-
Redo tutorial?
|
6
|
-
Syntax highlighting?
|
7
|
-
|
8
|
-
* Code
|
9
|
-
Keep track of error offsets everywhere
|
10
|
-
Use this to show error location in messages
|
11
|
-
Just clean up SassScript syntax errors in general
|
12
|
-
Lexer errors in particular are icky
|
13
|
-
See in particular error changes made in c07b5c8
|
14
|
-
** Sass
|
15
|
-
Benchmark the effects of storing the raw template in sassc
|
16
|
-
If it's expensive, overload RootNode dumping/loading to dup and set @template to nil
|
17
|
-
Then fall back on reading from actual file
|
18
|
-
Make Rack middleware the default for Rails and Merb versions that support it
|
19
|
-
CSS superset
|
20
|
-
Classes are mixins
|
21
|
-
Can refer to specific property values? Syntax?
|
22
|
-
Pull in Compass watcher stuff
|
23
|
-
Internationalization
|
24
|
-
Particularly word constituents in Regexps
|
25
|
-
Optimization
|
26
|
-
http://csstidy.sourceforge.net/
|
27
|
-
http://developer.yahoo.com/yui/compressor/
|
28
|
-
Also comma-folding identical rules where possible
|
29
|
-
Multiple levels
|
30
|
-
0: No optimization
|
31
|
-
1: Nothing that changes doc structure
|
32
|
-
No comma-folding
|
33
|
-
2: Anything that keeps functionality identical to O2 (default)
|
34
|
-
3: Assume order of rules doesn't matter
|
35
|
-
Comma-fold even if there are intervening rules that might interfere
|
36
|
-
CSS3
|
37
|
-
Add (optional) support for http://www.w3.org/TR/css3-values/#calc
|
38
|
-
Cross-unit arithmetic should compile into this
|
39
|
-
Should we use "mod" in Sass for consistency?
|
data/vendor/sass/VERSION
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
3.1.0.alpha.0
|
data/vendor/sass/VERSION_NAME
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
Bleeding Edge
|
data/vendor/sass/bin/css2sass
DELETED
@@ -1,13 +0,0 @@
|
|
1
|
-
#!/usr/bin/env ruby
|
2
|
-
|
3
|
-
require File.dirname(__FILE__) + '/../lib/sass'
|
4
|
-
require 'sass/exec'
|
5
|
-
|
6
|
-
warn <<END
|
7
|
-
DEPRECATION WARNING:
|
8
|
-
The css2sass tool is deprecated and will be removed in Sass 3.2.
|
9
|
-
Use the sass-convert tool instead.
|
10
|
-
END
|
11
|
-
|
12
|
-
opts = Sass::Exec::SassConvert.new(%w[--from css --to sass] + ARGV)
|
13
|
-
opts.parse!
|
data/vendor/sass/bin/sass
DELETED
data/vendor/sass/doc-src/FAQ.md
DELETED
@@ -1,35 +0,0 @@
|
|
1
|
-
# Frequently Asked Questions
|
2
|
-
|
3
|
-
* Table of contents
|
4
|
-
{:toc}
|
5
|
-
|
6
|
-
## Can I use a variable from my controller in my Sass file?
|
7
|
-
{#q-ruby-code}
|
8
|
-
|
9
|
-
No. Sass files aren't views.
|
10
|
-
They're compiled once into static CSS files,
|
11
|
-
then left along until they're changed and need to be compiled again.
|
12
|
-
Not only don't you want to be running a full request cycle
|
13
|
-
every time someone requests a stylesheet,
|
14
|
-
but it's not a great idea to put much logic in there anyway
|
15
|
-
due to how browsers handle them.
|
16
|
-
|
17
|
-
If you really need some sort of dynamic CSS,
|
18
|
-
you can define your own {Sass::Script::Functions Sass functions} using Ruby
|
19
|
-
that can access the database or other configuration.
|
20
|
-
*Be aware when doing this that Sass files are by default only compiled once
|
21
|
-
and then served statically.*
|
22
|
-
|
23
|
-
If you really, really need to compile Sass on each request,
|
24
|
-
first make sure you have adequate caching set up.
|
25
|
-
Then you can use {Sass::Engine} to render the code,
|
26
|
-
using the {file:SASS_REFERENCE.md#custom-option `:custom` option}
|
27
|
-
to pass in data that {Sass::Script::Functions::EvaluationContext#options can be accessed}
|
28
|
-
from your Sass functions.
|
29
|
-
|
30
|
-
# You still haven't answered my question!
|
31
|
-
|
32
|
-
Sorry! Try looking at the [Sass](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html) reference,
|
33
|
-
If you can't find an answer there,
|
34
|
-
feel free to ask in `#sass` on irc.freenode.net
|
35
|
-
or send an email to the [mailing list](http://groups.google.com/group/sass-lang).
|
@@ -1,210 +0,0 @@
|
|
1
|
-
# Sass Indented Syntax
|
2
|
-
|
3
|
-
* Table of contents
|
4
|
-
{:toc}
|
5
|
-
|
6
|
-
Sass's indented syntax (also known simply as "Sass")
|
7
|
-
is designed to provide a more concise
|
8
|
-
and, for some, more aesthetically appealing alternative
|
9
|
-
to the CSS-based SCSS syntax.
|
10
|
-
It's not compatible with CSS;
|
11
|
-
instead of using `{` and `}` to delimit blocks of styles,
|
12
|
-
it uses indentation,
|
13
|
-
and instead of using semicolons to separate statements it uses newlines.
|
14
|
-
This usually leads to substantially less text
|
15
|
-
when saying the same thing.
|
16
|
-
|
17
|
-
Each statement in Sass, such as property declarations and selectors,
|
18
|
-
must be placed on its own line.
|
19
|
-
In addition, everything that would be within `{` and `}` after a statement
|
20
|
-
must be on a new line and indented one level deeper than that statement.
|
21
|
-
For example, this CSS:
|
22
|
-
|
23
|
-
#main {
|
24
|
-
color: blue;
|
25
|
-
font-size: 0.3em;
|
26
|
-
}
|
27
|
-
|
28
|
-
would be this Sass:
|
29
|
-
|
30
|
-
#main
|
31
|
-
color: blue
|
32
|
-
font-size: 0.3em
|
33
|
-
|
34
|
-
Similarly, this SCSS:
|
35
|
-
|
36
|
-
#main {
|
37
|
-
color: blue;
|
38
|
-
font-size: 0.3em;
|
39
|
-
|
40
|
-
a {
|
41
|
-
font: {
|
42
|
-
weight: bold;
|
43
|
-
family: serif;
|
44
|
-
}
|
45
|
-
&:hover {
|
46
|
-
background-color: #eee;
|
47
|
-
}
|
48
|
-
}
|
49
|
-
}
|
50
|
-
|
51
|
-
would be this Sass:
|
52
|
-
|
53
|
-
#main
|
54
|
-
color: blue
|
55
|
-
font-size: 0.3em
|
56
|
-
|
57
|
-
a
|
58
|
-
font:
|
59
|
-
weight: bold
|
60
|
-
family: serif
|
61
|
-
&:hover
|
62
|
-
background-color: #eee
|
63
|
-
|
64
|
-
## Sass Syntax Differences
|
65
|
-
|
66
|
-
In general, most CSS and SCSS syntax
|
67
|
-
works straightforwardly in Sass
|
68
|
-
by using newlines instead of semicolons
|
69
|
-
and indentation instead of braces.
|
70
|
-
However, there are some cases where there are differences or subtleties,
|
71
|
-
which are detailed below.
|
72
|
-
|
73
|
-
## Property Synax
|
74
|
-
|
75
|
-
The indented syntax supports two ways of declaring CSS properties.
|
76
|
-
The first is just like CSS, except without the semicolon.
|
77
|
-
The second, however, places the colon *before* the property name.
|
78
|
-
For example:
|
79
|
-
|
80
|
-
#main
|
81
|
-
:color blue
|
82
|
-
:font-size 0.3em
|
83
|
-
|
84
|
-
By default, both ways may be used.
|
85
|
-
However, the {file:SASS_REFERENCE.md#property_syntax-option `:property_syntax` option}
|
86
|
-
may be used to specify that only one property syntax is allowed.
|
87
|
-
|
88
|
-
### Multiline Selectors
|
89
|
-
|
90
|
-
Normally in the indented syntax, a single selector must take up a single line.
|
91
|
-
There is one exception, however:
|
92
|
-
selectors can contain newlines as long as they only appear after commas.
|
93
|
-
For example:
|
94
|
-
|
95
|
-
.users #userTab,
|
96
|
-
.posts #postTab
|
97
|
-
width: 100px
|
98
|
-
height: 30px
|
99
|
-
|
100
|
-
### Comments
|
101
|
-
|
102
|
-
Like everything else in the indented syntax,
|
103
|
-
comments are line-based.
|
104
|
-
This means that they don't work the same way as in SCSS.
|
105
|
-
They must take up an entire line,
|
106
|
-
and they also encompass all text nested beneath them.
|
107
|
-
|
108
|
-
Like SCSS, the indented syntax supports two kinds of comments.
|
109
|
-
Comments beginning with `/*` are preserved in the CSS output,
|
110
|
-
although unlike SCSS they don't require a closing `*/`.
|
111
|
-
Comments beginning with `//` are removed entirely.
|
112
|
-
For example:
|
113
|
-
|
114
|
-
/* This comment will appear in the CSS output.
|
115
|
-
This is nested beneath the comment,
|
116
|
-
so it's part of it
|
117
|
-
body
|
118
|
-
color: black
|
119
|
-
|
120
|
-
// This comment will not appear in the CSS output.
|
121
|
-
This is nested beneath the comment as well,
|
122
|
-
so it also won't appear
|
123
|
-
a
|
124
|
-
color: green
|
125
|
-
|
126
|
-
is compiled to:
|
127
|
-
|
128
|
-
/* This comment will appear in the CSS output.
|
129
|
-
* This is nested beneath the comment,
|
130
|
-
* so it's part of it */
|
131
|
-
body {
|
132
|
-
color: black; }
|
133
|
-
|
134
|
-
a {
|
135
|
-
color: green; }
|
136
|
-
|
137
|
-
### `@import`
|
138
|
-
|
139
|
-
The `@import` directive in Sass does not require quotes, although they may be used.
|
140
|
-
For example, this SCSS:
|
141
|
-
|
142
|
-
@import "themes/dark";
|
143
|
-
@import "font.sass";
|
144
|
-
|
145
|
-
would be this Sass:
|
146
|
-
|
147
|
-
@import themes/dark
|
148
|
-
@import font.sass
|
149
|
-
|
150
|
-
### Mixin Directives
|
151
|
-
|
152
|
-
Sass supports shorthands for the `@mixin` and `@include` directives.
|
153
|
-
Instead of writing `@mixin`, you can use the character `=`;
|
154
|
-
instead of writing `@include`, you can use the character `+`.
|
155
|
-
For example:
|
156
|
-
|
157
|
-
=large-text
|
158
|
-
font:
|
159
|
-
family: Arial
|
160
|
-
size: 20px
|
161
|
-
weight: bold
|
162
|
-
color: #ff0000
|
163
|
-
|
164
|
-
h1
|
165
|
-
+large-text
|
166
|
-
|
167
|
-
is the same as:
|
168
|
-
|
169
|
-
@mixin large-text
|
170
|
-
font:
|
171
|
-
family: Arial
|
172
|
-
size: 20px
|
173
|
-
weight: bold
|
174
|
-
color: #ff0000
|
175
|
-
|
176
|
-
h1
|
177
|
-
@include large-text
|
178
|
-
|
179
|
-
## Deprecated Syntax
|
180
|
-
|
181
|
-
Since the indented syntax has been around for a while,
|
182
|
-
previous versions have made some syntactic decisions
|
183
|
-
that have since been changed.
|
184
|
-
Some of the old syntax still works, though,
|
185
|
-
so it's documented here.
|
186
|
-
|
187
|
-
**Note that this syntax is not recommended
|
188
|
-
for use in new Sass files**.
|
189
|
-
It will print a warning if it's used,
|
190
|
-
and it will be removed in a future version.
|
191
|
-
|
192
|
-
### `=` for Properties and Variables
|
193
|
-
|
194
|
-
`=` used to be used instead of `:` when setting variables
|
195
|
-
and when setting properties to SassScript values.
|
196
|
-
It has slightly different semantics than `:`;
|
197
|
-
see {file:SASS_CHANGELOG.md#3-0-0-sass-script-context this changelog entry} for details.
|
198
|
-
|
199
|
-
### `||=` for Default Variables
|
200
|
-
|
201
|
-
`||=` used to be used instead of `:` when setting the default value of a variable.
|
202
|
-
The `!default` flag was not used.
|
203
|
-
The variable value has the same semantics as `=`;
|
204
|
-
see {file:SASS_CHANGELOG.md#3-0-0-sass-script-context this changelog entry} for details.
|
205
|
-
|
206
|
-
### `!` Prefix for Variables
|
207
|
-
|
208
|
-
`!` used to be used as the variable prefix instead of `$`.
|
209
|
-
This had no difference in functionality;
|
210
|
-
it was a purely aesthetic change.
|
@@ -1,1870 +0,0 @@
|
|
1
|
-
# Sass Changelog
|
2
|
-
|
3
|
-
* Table of contents
|
4
|
-
{:toc}
|
5
|
-
|
6
|
-
## 3.2.0 (Unreleased)
|
7
|
-
|
8
|
-
* Add an {Sass::Script::Functions#invert `invert` function} that takes the inverse of colors.
|
9
|
-
|
10
|
-
### Backwards Incompatibilities -- Must Read!
|
11
|
-
|
12
|
-
* When `@import` is given a path without `.sass`, `.scss`, or `.css` extension,
|
13
|
-
and no file exists at that path, it will now throw an error.
|
14
|
-
The old behavior of becoming a plain-CSS `@import` was deprecated
|
15
|
-
and has now been removed.
|
16
|
-
|
17
|
-
* Get rid of the `--rails` flag for the `sass` executable.
|
18
|
-
This flag hasn't been necessary since Rails 2.0.
|
19
|
-
Existing Rails 2.0 installations will continue to work.
|
20
|
-
|
21
|
-
## 3.0.20
|
22
|
-
|
23
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.20).
|
24
|
-
|
25
|
-
* Fix some permissions errors.
|
26
|
-
|
27
|
-
* Fix `#options` attribute errors when CSS functions were used with commas.
|
28
|
-
|
29
|
-
## 3.0.19
|
30
|
-
|
31
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.19).
|
32
|
-
|
33
|
-
* Make the alpha value for `rgba` colors respect {Sass::Script::Number::PRECISION}.
|
34
|
-
|
35
|
-
* Remove all newlines in selectors in `:compressed` mode.
|
36
|
-
|
37
|
-
* Make color names case-insensitive.
|
38
|
-
|
39
|
-
* Properly detect SCSS files when using `sass -c`.
|
40
|
-
|
41
|
-
* Remove spaces after commas in `:compressed` mode.
|
42
|
-
|
43
|
-
* Allow the `--unix-newlines` flag to work on Unix, where it's a no-op.
|
44
|
-
|
45
|
-
## 3.0.18
|
46
|
-
|
47
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.18).
|
48
|
-
|
49
|
-
* Don't require `rake` in the gemspec, for bundler compatibility under
|
50
|
-
JRuby. Thanks to [Gordon McCreight](http://www.gmccreight.com/blog).
|
51
|
-
|
52
|
-
* Add a command-line option `--stop-on-error` that causes Sass to exit
|
53
|
-
when a file fails to compile using `--watch` or `--update`.
|
54
|
-
|
55
|
-
* Fix a bug in `haml_tag` that would allow duplicate attributes to be added
|
56
|
-
and make `data-` attributes not work.
|
57
|
-
|
58
|
-
* Get rid of the annoying RDoc errors on install.
|
59
|
-
|
60
|
-
* Disambiguate references to the `Rails` module when `haml-rails` is installed.
|
61
|
-
|
62
|
-
* Allow `@import` in SCSS to import multiple files in the same `@import` rule.
|
63
|
-
|
64
|
-
## 3.0.17
|
65
|
-
|
66
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.17).
|
67
|
-
|
68
|
-
* Disallow `#{}` interpolation in `@media` queries or unrecognized directives.
|
69
|
-
This was never allowed, but now it explicitly throws an error
|
70
|
-
rather than just producing invalid CSS.
|
71
|
-
|
72
|
-
* Make `sass --watch` not throw an error when passed a single file or directory.
|
73
|
-
|
74
|
-
* Understand that mingw counts as Windows.
|
75
|
-
|
76
|
-
* Make `sass --update` return a non-0 exit code if one or more files being updated
|
77
|
-
contained an error.
|
78
|
-
|
79
|
-
## 3.0.16
|
80
|
-
|
81
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.16).
|
82
|
-
|
83
|
-
* Fix a bug where certain sorts of comments would get improperly
|
84
|
-
rendered in the `:compact` style.
|
85
|
-
|
86
|
-
* Always allow a trailing `*/` in loud comments in the indented syntax.
|
87
|
-
|
88
|
-
* Fix a performance issue with SCSS parsing in rare cases.
|
89
|
-
Thanks to [Chris Eppstein](http://chriseppstein.github.com).
|
90
|
-
|
91
|
-
* Use better heuristics for figuring out when someone might be using
|
92
|
-
the wrong syntax with `sass --watch`.
|
93
|
-
|
94
|
-
## 3.0.15
|
95
|
-
|
96
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.15).
|
97
|
-
|
98
|
-
* Fix a bug where `sass --watch` and `sass --update` were completely broken.
|
99
|
-
|
100
|
-
* Allow `@import`ed values to contain commas.
|
101
|
-
|
102
|
-
## 3.0.14
|
103
|
-
|
104
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.14).
|
105
|
-
|
106
|
-
* Properly parse paths with drive letters on Windows (e.g. `C:\Foo\Bar.sass`)
|
107
|
-
in the Sass executable.
|
108
|
-
|
109
|
-
* Compile Sass files in a deterministic order.
|
110
|
-
|
111
|
-
* Fix a bug where comments after `@if` statements in SCSS
|
112
|
-
weren't getting passed through to the output document.
|
113
|
-
|
114
|
-
## 3.0.13
|
115
|
-
|
116
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.13).
|
117
|
-
|
118
|
-
## CSS `@import` Directives
|
119
|
-
|
120
|
-
Sass is now more intelligent about when to compile `@import` directives to plain CSS.
|
121
|
-
Any of the following conditions will cause a literal CSS `@import`:
|
122
|
-
|
123
|
-
* Importing a path with a `.css` extension (e.g. `@import "foo.css"`).
|
124
|
-
* Importing a path with a media type (e.g. `@import "foo" screen;`).
|
125
|
-
* Importing an HTTP path (e.g. `@import "http://foo.com/style.css"`).
|
126
|
-
* Importing any URL (e.g. `@import url(foo)`).
|
127
|
-
|
128
|
-
The former two conditions always worked, but the latter two are new.
|
129
|
-
|
130
|
-
## `-moz-calc` Support
|
131
|
-
|
132
|
-
The new [`-moz-calc()` function](http://hacks.mozilla.org/2010/06/css3-calc/) in Firefox 4
|
133
|
-
will now be properly parsed by Sass.
|
134
|
-
`calc()` was already supported, but because the parsing rules are different
|
135
|
-
than for normal CSS functions, this had to be expanded to include `-moz-calc`.
|
136
|
-
|
137
|
-
In anticipation of wider browser support, in fact,
|
138
|
-
*any* function named `-*-calc` (such as `-webkit-calc` or `-ms-calc`)
|
139
|
-
will be parsed the same as the `calc` function.
|
140
|
-
|
141
|
-
## `:-moz-any` Support
|
142
|
-
|
143
|
-
The [`:-moz-any` pseudoclass selector](http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/)
|
144
|
-
is now parsed by Sass.
|
145
|
-
|
146
|
-
## `--require` Flag
|
147
|
-
|
148
|
-
The Sass command-line executable can now require Ruby files
|
149
|
-
using the `--require` flag (or `-r` for short).
|
150
|
-
|
151
|
-
## Rails Support
|
152
|
-
|
153
|
-
Make sure the default Rails options take precedence over the default non-Rails options.
|
154
|
-
This makes `./script/server --daemon` work again.
|
155
|
-
|
156
|
-
### Rails 3 Support
|
157
|
-
|
158
|
-
Support for Rails 3 versions prior to beta 4 has been removed.
|
159
|
-
Upgrade to Rails 3.0.0.beta4 if you haven't already.
|
160
|
-
|
161
|
-
## 3.0.12
|
162
|
-
|
163
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.12).
|
164
|
-
|
165
|
-
## Rails 3 Support
|
166
|
-
|
167
|
-
Apparently the last version broke in new and exciting ways under Rails 3,
|
168
|
-
due to the inconsistent load order caused by certain combinations of gems.
|
169
|
-
3.0.12 hacks around that inconsistency, and *should* be fully Rails 3-compatible.
|
170
|
-
|
171
|
-
### Deprecated: Rails 3 Beta 3
|
172
|
-
|
173
|
-
Haml's support for Rails 3.0.0.beta.3 has been deprecated.
|
174
|
-
Haml 3.0.13 will only support 3.0.0.beta.4.
|
175
|
-
|
176
|
-
## 3.0.11
|
177
|
-
|
178
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.11).
|
179
|
-
|
180
|
-
There were no changes made to Haml between versions 3.0.10 and 3.0.11.
|
181
|
-
|
182
|
-
## Rails 3 Support
|
183
|
-
|
184
|
-
Make sure Sass *actually* regenerates stylesheets under Rails 3.
|
185
|
-
The fix in 3.0.10 didn't work because the Rack stack we were modifying
|
186
|
-
wasn't reloaded at the proper time.
|
187
|
-
|
188
|
-
## Bug Fixes
|
189
|
-
|
190
|
-
* Give a decent error message when `--recursive` is used
|
191
|
-
in `sass-convert` without a directory.
|
192
|
-
|
193
|
-
## 3.0.10
|
194
|
-
|
195
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.10).
|
196
|
-
|
197
|
-
### Appengine-JRuby Support
|
198
|
-
|
199
|
-
The way we determine the location of the Haml installation
|
200
|
-
no longer breaks the version of JRuby
|
201
|
-
used by [`appengine-jruby`](http://code.google.com/p/appengine-jruby/).
|
202
|
-
|
203
|
-
### Rails 3 Support
|
204
|
-
|
205
|
-
Sass will regenerate stylesheets under Rails 3
|
206
|
-
even when no controllers are being accessed.
|
207
|
-
|
208
|
-
### Other Improvements
|
209
|
-
|
210
|
-
* When using `sass-convert --from sass2 --to sass --recursive`,
|
211
|
-
suggest the use of `--in-place` as well.
|
212
|
-
|
213
|
-
## 3.0.9
|
214
|
-
|
215
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.9).
|
216
|
-
|
217
|
-
There were no changes made to Sass between versions 3.0.8 and 3.0.9.
|
218
|
-
A bug in Gemcutter caused the gem to be uploaded improperly.
|
219
|
-
|
220
|
-
## 3.0.8
|
221
|
-
|
222
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.8).
|
223
|
-
|
224
|
-
* Fix a bug with Rails versions prior to Rails 3.
|
225
|
-
|
226
|
-
## 3.0.7
|
227
|
-
|
228
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.7).
|
229
|
-
|
230
|
-
### Encoding Support
|
231
|
-
|
232
|
-
Sass 3.0.7 adds support for `@charset` for declaring the encoding of a stylesheet.
|
233
|
-
For details see {file:SASS_REFERENCE.md#encodings the reference}.
|
234
|
-
|
235
|
-
The `sass` and `sass-convert` executables also now take an `-E` option
|
236
|
-
for specifying the encoding of Sass/SCSS/CSS files.
|
237
|
-
|
238
|
-
### Bug Fixes
|
239
|
-
|
240
|
-
* When compiling a file named `.sass` but with SCSS syntax specified,
|
241
|
-
use the latter (and vice versa).
|
242
|
-
|
243
|
-
* Fix a bug where interpolation would cause some selectors to render improperly.
|
244
|
-
|
245
|
-
* If a line in a Sass comment starts with `*foo`,
|
246
|
-
render it as `*foo` rather than `* *foo`.
|
247
|
-
|
248
|
-
## 3.0.6
|
249
|
-
|
250
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.6).
|
251
|
-
|
252
|
-
There were no changes made to Sass between versions 3.0.5 and 3.0.6.
|
253
|
-
|
254
|
-
## 3.0.5
|
255
|
-
|
256
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.5).
|
257
|
-
|
258
|
-
### `#{}` Interpolation in Properties
|
259
|
-
|
260
|
-
Previously, using `#{}` in some places in properties
|
261
|
-
would cause a syntax error.
|
262
|
-
Now it can be used just about anywhere.
|
263
|
-
|
264
|
-
Note that when `#{}` is used near operators like `/`,
|
265
|
-
those operators are treated as plain CSS
|
266
|
-
rather than math operators.
|
267
|
-
For example:
|
268
|
-
|
269
|
-
p {
|
270
|
-
$font-size: 12px;
|
271
|
-
$line-height: 30px;
|
272
|
-
font: #{$font-size}/#{$line-height};
|
273
|
-
}
|
274
|
-
|
275
|
-
is compiled to:
|
276
|
-
|
277
|
-
p {
|
278
|
-
font: 12px/30px;
|
279
|
-
}
|
280
|
-
|
281
|
-
This is useful, since normally {file:SASS_REFERENCE.md#division-and-slash
|
282
|
-
a slash with variables is treated as division}.
|
283
|
-
|
284
|
-
### Recursive Mixins
|
285
|
-
|
286
|
-
Mixins that include themselves will now print
|
287
|
-
much more informative error messages.
|
288
|
-
For example:
|
289
|
-
|
290
|
-
@mixin foo {@include bar}
|
291
|
-
@mixin bar {@include foo}
|
292
|
-
@include foo
|
293
|
-
|
294
|
-
will print:
|
295
|
-
|
296
|
-
An @include loop has been found:
|
297
|
-
foo includes bar
|
298
|
-
bar includes foo
|
299
|
-
|
300
|
-
Although it was previously possible to use recursive mixins
|
301
|
-
without causing infinite looping, this is now disallowed,
|
302
|
-
since there's no good reason to do it.
|
303
|
-
|
304
|
-
### Rails 3 Support
|
305
|
-
|
306
|
-
Fix Sass configuration under Rails 3.
|
307
|
-
Thanks [Dan Cheail](http://github.com/codeape).
|
308
|
-
|
309
|
-
### `sass --no-cache`
|
310
|
-
|
311
|
-
Make the `--no-cache` flag properly forbid Sass from writing `.sass-cache` files.
|
312
|
-
|
313
|
-
## 3.0.4
|
314
|
-
|
315
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.4).
|
316
|
-
|
317
|
-
* Raise an informative error when function arguments have a mispaced comma,
|
318
|
-
as in `foo(bar, )`.
|
319
|
-
|
320
|
-
* Fix a performance problem when using long function names
|
321
|
-
such as `-moz-linear-gradient`.
|
322
|
-
|
323
|
-
## 3.0.3
|
324
|
-
|
325
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.3).
|
326
|
-
|
327
|
-
### Rails 3 Support
|
328
|
-
|
329
|
-
Make sure Sass is loaded properly when using Rails 3
|
330
|
-
along with non-Rails-3-compatible plugins like some versions of `will_paginate`.
|
331
|
-
|
332
|
-
Also, In order to make some Rails loading errors like the above easier to debug,
|
333
|
-
Sass will now raise an error if `Rails.root` is `nil` when Sass is loading.
|
334
|
-
Previously, this would just cause the paths to be mis-set.
|
335
|
-
|
336
|
-
### Merb Support
|
337
|
-
|
338
|
-
Merb, including 1.1.0 as well as earlier versions,
|
339
|
-
should *really* work with this release.
|
340
|
-
|
341
|
-
### Bug Fixes
|
342
|
-
|
343
|
-
* Raise an informative error when mixin arguments have a mispaced comma,
|
344
|
-
as in `@include foo(bar, )`.
|
345
|
-
|
346
|
-
* Make sure SassScript subtraction happens even when nothing else dynamic is going on.
|
347
|
-
|
348
|
-
* Raise an error when colors are used with the wrong number of digits.
|
349
|
-
|
350
|
-
## 3.0.2
|
351
|
-
|
352
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.2).
|
353
|
-
|
354
|
-
### Merb 1.1.0 Support
|
355
|
-
|
356
|
-
Fixed a bug inserting the Sass plugin into the Merb 1.1.0 Rack application.
|
357
|
-
|
358
|
-
### Bug Fixes
|
359
|
-
|
360
|
-
* Allow identifiers to begin with multiple underscores.
|
361
|
-
|
362
|
-
* Don't raise an error when using `haml --rails` with older Rails versions.
|
363
|
-
|
364
|
-
## 3.0.1
|
365
|
-
|
366
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.1).
|
367
|
-
|
368
|
-
### Installation in Rails
|
369
|
-
|
370
|
-
`haml --rails` is no longer necessary for installing Sass in Rails.
|
371
|
-
Now all you need to do is add `gem "haml"` to the Gemfile for Rails 3,
|
372
|
-
or add `config.gem "haml"` to `config/environment.rb` for previous versions.
|
373
|
-
|
374
|
-
`haml --rails` will still work,
|
375
|
-
but it has been deprecated and will print an error message.
|
376
|
-
It will not work in the next version of Sass.
|
377
|
-
|
378
|
-
### Rails 3 Beta Integration
|
379
|
-
|
380
|
-
* Make sure manually importing the Sass Rack plugin still works with Rails,
|
381
|
-
even though it's not necessary now.
|
382
|
-
|
383
|
-
* Allow Sass to be configured in Rails even when it's being lazy-loaded.
|
384
|
-
|
385
|
-
### `:template_location` Methods
|
386
|
-
|
387
|
-
The {file:SASS_REFERENCE.md#template_location-option `:template_location` option}
|
388
|
-
can be either a String, a Hash, or an Array.
|
389
|
-
This makes it difficult to modify or use with confidence.
|
390
|
-
Thus, three new methods have been added for handling it:
|
391
|
-
|
392
|
-
* {Sass::Plugin::Configuration#template_location_array Sass::Plugin#template_location_array} --
|
393
|
-
Returns the template locations and CSS locations formatted as an array.
|
394
|
-
|
395
|
-
* {Sass::Plugin::Configuration#add_template_location Sass::Plugin#add_template_location} --
|
396
|
-
Converts the template location option to an array and adds a new location.
|
397
|
-
|
398
|
-
* {Sass::Plugin::Configuration#remove_template_location Sass::Plugin#remove_template_location} --
|
399
|
-
Converts the template location option to an array and removes an existing location.
|
400
|
-
|
401
|
-
## 3.0.0
|
402
|
-
{#3-0-0}
|
403
|
-
|
404
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/3.0.0).
|
405
|
-
|
406
|
-
### Deprecations -- Must Read!
|
407
|
-
{#3-0-0-deprecations}
|
408
|
-
|
409
|
-
* Using `=` for SassScript properties and variables is deprecated,
|
410
|
-
and will be removed in Sass 3.2.
|
411
|
-
Use `:` instead.
|
412
|
-
See also [this changelog entry](#3-0-0-sass-script-context)
|
413
|
-
|
414
|
-
* Because of the above, property values using `:`
|
415
|
-
will be parsed more thoroughly than they were before.
|
416
|
-
Although all valid CSS3 properties
|
417
|
-
as well as most hacks and proprietary syntax should be supported,
|
418
|
-
it's possible that some properties will break.
|
419
|
-
If this happens, please report it to [the Sass mailing list](http://groups.google.com/group/haml).
|
420
|
-
|
421
|
-
* In addition, setting the default value of variables
|
422
|
-
with `||=` is now deprecated
|
423
|
-
and will be removed in Sass 3.2.
|
424
|
-
Instead, add `!default` to the end of the value.
|
425
|
-
See also [this changelog entry](#3-0-0-default-flag)
|
426
|
-
|
427
|
-
* The `!` prefix for variables is deprecated,
|
428
|
-
and will be removed in Sass 3.2.
|
429
|
-
Use `$` as a prefix instead.
|
430
|
-
See also [this changelog entry](#3-0-0-dollar-prefix).
|
431
|
-
|
432
|
-
* The `css2sass` command-line tool has been deprecated,
|
433
|
-
and will be removed in Sass 3.2.
|
434
|
-
Use the new `sass-convert` tool instead.
|
435
|
-
See also [this changelog entry](#3-0-0-sass-convert).
|
436
|
-
|
437
|
-
* Selector parent references using `&` can now only be used
|
438
|
-
where element names are valid.
|
439
|
-
This is because Sass 3 fully parses selectors
|
440
|
-
to support the new [`@extend` directive](#3-0-0-extend),
|
441
|
-
and it's possible that the `&` could be replaced by an element name.
|
442
|
-
|
443
|
-
### SCSS (Sassy CSS)
|
444
|
-
|
445
|
-
Sass 3 introduces a new syntax known as SCSS
|
446
|
-
which is fully compatible with the syntax of CSS3,
|
447
|
-
while still supporting the full power of Sass.
|
448
|
-
This means that every valid CSS3 stylesheet
|
449
|
-
is a valid SCSS file with the same meaning.
|
450
|
-
In addition, SCSS understands most CSS hacks
|
451
|
-
and vendor-specific syntax, such as [IE's old `filter` syntax](http://msdn.microsoft.com/en-us/library/ms533754%28VS.85%29.aspx).
|
452
|
-
|
453
|
-
SCSS files use the `.scss` extension.
|
454
|
-
They can import `.sass` files, and vice-versa.
|
455
|
-
Their syntax is fully described in the {file:SASS_REFERENCE.md Sass reference};
|
456
|
-
if you're already familiar with Sass, though,
|
457
|
-
you may prefer the {file:SCSS_FOR_SASS_USERS.md intro to SCSS for Sass users}.
|
458
|
-
|
459
|
-
Since SCSS is a much more approachable syntax for those new to Sass,
|
460
|
-
it will be used as the default syntax for the reference,
|
461
|
-
as well as for most other Sass documentation.
|
462
|
-
The indented syntax will continue to be fully supported, however.
|
463
|
-
|
464
|
-
Sass files can be converted to SCSS using the new `sass-convert` command-line tool.
|
465
|
-
For example:
|
466
|
-
|
467
|
-
# Convert a Sass file to SCSS
|
468
|
-
$ sass-convert style.sass style.scss
|
469
|
-
|
470
|
-
**Note that if you're converting a Sass file written for Sass 2**,
|
471
|
-
you should use the `--from sass2` flag.
|
472
|
-
For example:
|
473
|
-
|
474
|
-
# Convert a Sass file to SCSS
|
475
|
-
$ sass-convert --from sass2 style.sass style.scss
|
476
|
-
|
477
|
-
# Convert all Sass files to SCSS
|
478
|
-
$ sass-convert --recursive --in-place --from sass2 --to scss stylesheets/
|
479
|
-
|
480
|
-
### Syntax Changes {#3-0-0-syntax-changes}
|
481
|
-
|
482
|
-
#### SassScript Context
|
483
|
-
{#3-0-0-sass-script-context}
|
484
|
-
|
485
|
-
The `=` character is no longer required for properties that use SassScript
|
486
|
-
(that is, variables and operations).
|
487
|
-
All properties now use SassScript automatically;
|
488
|
-
this means that `:` should be used instead.
|
489
|
-
Variables should also be set with `:`.
|
490
|
-
For example, what used to be
|
491
|
-
|
492
|
-
// Indented syntax
|
493
|
-
.page
|
494
|
-
color = 5px + 9px
|
495
|
-
|
496
|
-
should now be
|
497
|
-
|
498
|
-
// Indented syntax
|
499
|
-
.page
|
500
|
-
color: 5px + 9px
|
501
|
-
|
502
|
-
This means that SassScript is now an extension of the CSS3 property syntax.
|
503
|
-
All valid CSS3 properties are valid SassScript,
|
504
|
-
and will compile without modification
|
505
|
-
(some invalid properties work as well, such as Microsoft's proprietary `filter` syntax).
|
506
|
-
This entails a few changes to SassScript to make it fully CSS3-compatible,
|
507
|
-
which are detailed below.
|
508
|
-
|
509
|
-
This also means that Sass will now be fully parsing all property values,
|
510
|
-
rather than passing them through unchanged to the CSS.
|
511
|
-
Although care has been taken to support all valid CSS3,
|
512
|
-
as well as hacks and proprietary syntax,
|
513
|
-
it's possible that a property that worked in Sass 2 won't work in Sass 3.
|
514
|
-
If this happens, please report it to [the Sass mailing list](http://groups.google.com/group/haml).
|
515
|
-
|
516
|
-
Note that if `=` is used,
|
517
|
-
SassScript will be interpreted as backwards-compatibly as posssible.
|
518
|
-
In particular, the changes listed below don't apply in an `=` context.
|
519
|
-
|
520
|
-
The `sass-convert` command-line tool can be used
|
521
|
-
to upgrade Sass files to the new syntax using the `--in-place` flag.
|
522
|
-
For example:
|
523
|
-
|
524
|
-
# Upgrade style.sass:
|
525
|
-
$ sass-convert --in-place style.sass
|
526
|
-
|
527
|
-
# Upgrade all Sass files:
|
528
|
-
$ sass-convert --recursive --in-place --from sass2 --to sass stylesheets/
|
529
|
-
|
530
|
-
##### Quoted Strings
|
531
|
-
|
532
|
-
Quoted strings (e.g. `"foo"`) in SassScript now render with quotes.
|
533
|
-
In addition, unquoted strings are no longer deprecated,
|
534
|
-
and render without quotes.
|
535
|
-
This means that almost all strings that had quotes in Sass 2
|
536
|
-
should not have quotes in Sass 3.
|
537
|
-
|
538
|
-
Although quoted strings render with quotes when used with `:`,
|
539
|
-
they do not render with quotes when used with `#{}`.
|
540
|
-
This allows quoted strings to be used for e.g. selectors
|
541
|
-
that are passed to mixins.
|
542
|
-
|
543
|
-
Strings can be forced to be quoted and unquoted using the new
|
544
|
-
\{Sass::Script::Functions#unquote unquote} and \{Sass::Script::Functions#quote quote}
|
545
|
-
functions.
|
546
|
-
|
547
|
-
##### Division and `/`
|
548
|
-
|
549
|
-
Two numbers separated by a `/` character
|
550
|
-
are allowed as property syntax in CSS,
|
551
|
-
e.g. for the `font` property.
|
552
|
-
SassScript also uses `/` for division, however,
|
553
|
-
which means it must decide what to do
|
554
|
-
when it encounters numbers separated by `/`.
|
555
|
-
|
556
|
-
For CSS compatibility, SassScript does not perform division by default.
|
557
|
-
However, division will be done in almost all cases where division is intended.
|
558
|
-
In particular, SassScript will perform division
|
559
|
-
in the following three situations:
|
560
|
-
|
561
|
-
1. If the value, or any part of it, is stored in a variable.
|
562
|
-
2. If the value is surrounded by parentheses.
|
563
|
-
3. If the value is used as part of another arithmetic expression.
|
564
|
-
|
565
|
-
For example:
|
566
|
-
|
567
|
-
p
|
568
|
-
font: 10px/8px
|
569
|
-
$width: 1000px
|
570
|
-
width: $width/2
|
571
|
-
height: (500px/2)
|
572
|
-
margin-left: 5px + 8px/2px
|
573
|
-
|
574
|
-
is compiled to:
|
575
|
-
|
576
|
-
p {
|
577
|
-
font: 10px/8px;
|
578
|
-
width: 500px;
|
579
|
-
height: 250px;
|
580
|
-
margin-left: 9px; }
|
581
|
-
|
582
|
-
##### Variable Defaults
|
583
|
-
|
584
|
-
Since `=` is no longer used for variable assignment,
|
585
|
-
assigning defaults to variables with `||=` no longer makes sense.
|
586
|
-
Instead, the `!default` flag
|
587
|
-
should be added to the end of the variable value.
|
588
|
-
This syntax is meant to be similar to CSS's `!important` flag.
|
589
|
-
For example:
|
590
|
-
|
591
|
-
$var: 12px !default;
|
592
|
-
|
593
|
-
#### Variable Prefix Character
|
594
|
-
{#3-0-0-dollar-prefix}
|
595
|
-
|
596
|
-
The Sass variable character has been changed from `!`
|
597
|
-
to the more aesthetically-appealing `$`.
|
598
|
-
For example, what used to be
|
599
|
-
|
600
|
-
!width = 13px
|
601
|
-
.icon
|
602
|
-
width = !width
|
603
|
-
|
604
|
-
should now be
|
605
|
-
|
606
|
-
$width: 13px
|
607
|
-
.icon
|
608
|
-
width: $width
|
609
|
-
|
610
|
-
The `sass-convert` command-line tool can be used
|
611
|
-
to upgrade Sass files to the new syntax using the `--in-place` flag.
|
612
|
-
For example:
|
613
|
-
|
614
|
-
# Upgrade style.sass:
|
615
|
-
$ sass-convert --in-place style.sass
|
616
|
-
|
617
|
-
# Upgrade all Sass files:
|
618
|
-
$ sass-convert --recursive --in-place --from sass2 --to sass stylesheets/
|
619
|
-
|
620
|
-
`!` may still be used, but it's deprecated and will print a warning.
|
621
|
-
It will be removed in the next version of Sass, 3.2.
|
622
|
-
|
623
|
-
#### Variable and Mixin Names
|
624
|
-
|
625
|
-
SassScript variable and mixin names may now contain hyphens.
|
626
|
-
In fact, they may be any valid CSS3 identifier.
|
627
|
-
For example:
|
628
|
-
|
629
|
-
$prettiest-color: #542FA9
|
630
|
-
=pretty-text
|
631
|
-
color: $prettiest-color
|
632
|
-
|
633
|
-
In order to allow frameworks like [Compass](http://compass-style.org)
|
634
|
-
to use hyphens in variable names
|
635
|
-
while maintaining backwards-compatibility,
|
636
|
-
variables and mixins using hyphens may be referred to
|
637
|
-
with underscores, and vice versa.
|
638
|
-
For example:
|
639
|
-
|
640
|
-
$prettiest-color: #542FA9
|
641
|
-
.pretty
|
642
|
-
// Using an underscore instead of a hyphen works
|
643
|
-
color: $prettiest_color
|
644
|
-
|
645
|
-
#### Single-Quoted Strings
|
646
|
-
|
647
|
-
SassScript now supports single-quoted strings.
|
648
|
-
They behave identically to double-quoted strings,
|
649
|
-
except that single quotes need to be backslash-escaped
|
650
|
-
and double quotes do not.
|
651
|
-
|
652
|
-
#### Mixin Definition and Inclusion
|
653
|
-
|
654
|
-
Sass now supports the `@mixin` directive as a way of defining mixins (like `=`),
|
655
|
-
as well as the `@include` directive as a way of including them (like `+`).
|
656
|
-
The old syntax is *not* deprecated,
|
657
|
-
and the two are fully compatible.
|
658
|
-
For example:
|
659
|
-
|
660
|
-
@mixin pretty-text
|
661
|
-
color: $prettiest-color
|
662
|
-
|
663
|
-
a
|
664
|
-
@include pretty-text
|
665
|
-
|
666
|
-
is the same as:
|
667
|
-
|
668
|
-
=pretty-text
|
669
|
-
color: $prettiest-color
|
670
|
-
|
671
|
-
a
|
672
|
-
+pretty-text
|
673
|
-
|
674
|
-
#### Sass Properties
|
675
|
-
|
676
|
-
New-style properties (with the colon after the name) in indented syntax
|
677
|
-
now allow whitespace before the colon. For example:
|
678
|
-
|
679
|
-
foo
|
680
|
-
color : blue
|
681
|
-
|
682
|
-
#### Sass `@import`
|
683
|
-
|
684
|
-
The Sass `@import` statement now allows non-CSS files to be specified with quotes,
|
685
|
-
for similarity with the SCSS syntax. For example, `@import "foo.sass"`
|
686
|
-
will now import the `foo.sass` file, rather than compiling to `@import "foo.sass";`.
|
687
|
-
|
688
|
-
### `@extend`
|
689
|
-
{#3-0-0-extend}
|
690
|
-
|
691
|
-
There are often cases when designing a page
|
692
|
-
when one class should have all the styles of another class,
|
693
|
-
as well as its own specific styles.
|
694
|
-
The most common way of handling this is to use both the more general class
|
695
|
-
and the more specific class in the HTML.
|
696
|
-
For example, suppose we have a design for a normal error
|
697
|
-
and also for a serious error. We might write our markup like so:
|
698
|
-
|
699
|
-
<div class="error seriousError">
|
700
|
-
Oh no! You've been hacked!
|
701
|
-
</div>
|
702
|
-
|
703
|
-
And our styles like so:
|
704
|
-
|
705
|
-
.error {
|
706
|
-
border: 1px #f00;
|
707
|
-
background-color: #fdd;
|
708
|
-
}
|
709
|
-
.seriousError {
|
710
|
-
border-width: 3px;
|
711
|
-
}
|
712
|
-
|
713
|
-
Unfortunately, this means that we have to always remember
|
714
|
-
to use `.error` with `.seriousError`.
|
715
|
-
This is a maintenance burden, leads to tricky bugs,
|
716
|
-
and can bring non-semantic style concerns into the markup.
|
717
|
-
|
718
|
-
The `@extend` directive avoids these problems
|
719
|
-
by telling Sass that one selector should inherit the styles of another selector.
|
720
|
-
For example:
|
721
|
-
|
722
|
-
.error {
|
723
|
-
border: 1px #f00;
|
724
|
-
background-color: #fdd;
|
725
|
-
}
|
726
|
-
.seriousError {
|
727
|
-
@extend .error;
|
728
|
-
border-width: 3px;
|
729
|
-
}
|
730
|
-
|
731
|
-
This means that all styles defined for `.error`
|
732
|
-
are also applied to `.seriousError`,
|
733
|
-
in addition to the styles specific to `.seriousError`.
|
734
|
-
In effect, everything with class `.seriousError` also has class `.error`.
|
735
|
-
|
736
|
-
Other rules that use `.error` will work for `.seriousError` as well.
|
737
|
-
For example, if we have special styles for errors caused by hackers:
|
738
|
-
|
739
|
-
.error.intrusion {
|
740
|
-
background-image: url("/image/hacked.png");
|
741
|
-
}
|
742
|
-
|
743
|
-
Then `<div class="seriousError intrusion">`
|
744
|
-
will have the `hacked.png` background image as well.
|
745
|
-
|
746
|
-
#### How it Works
|
747
|
-
|
748
|
-
`@extend` works by inserting the extending selector (e.g. `.seriousError`)
|
749
|
-
anywhere in the stylesheet that the extended selector (.e.g `.error`) appears.
|
750
|
-
Thus the example above:
|
751
|
-
|
752
|
-
.error {
|
753
|
-
border: 1px #f00;
|
754
|
-
background-color: #fdd;
|
755
|
-
}
|
756
|
-
.error.intrusion {
|
757
|
-
background-image: url("/image/hacked.png");
|
758
|
-
}
|
759
|
-
.seriousError {
|
760
|
-
@extend .error;
|
761
|
-
border-width: 3px;
|
762
|
-
}
|
763
|
-
|
764
|
-
is compiled to:
|
765
|
-
|
766
|
-
.error, .seriousError {
|
767
|
-
border: 1px #f00;
|
768
|
-
background-color: #fdd; }
|
769
|
-
|
770
|
-
.error.intrusion, .seriousError.intrusion {
|
771
|
-
background-image: url("/image/hacked.png"); }
|
772
|
-
|
773
|
-
.seriousError {
|
774
|
-
border-width: 3px; }
|
775
|
-
|
776
|
-
When merging selectors, `@extend` is smart enough
|
777
|
-
to avoid unnecessary duplication,
|
778
|
-
so something like `.seriousError.seriousError` gets translated to `.seriousError`.
|
779
|
-
In addition, it won't produce selectors that can't match anything, like `#main#footer`.
|
780
|
-
|
781
|
-
See also {file:SASS_REFERENCE.md#extend the `@extend` reference documentation}.
|
782
|
-
|
783
|
-
### Colors
|
784
|
-
|
785
|
-
SassScript color values are much more powerful than they were before.
|
786
|
-
Support was added for alpha channels,
|
787
|
-
and most of Chris Eppstein's [compass-colors](http://chriseppstein.github.com/compass-colors) plugin
|
788
|
-
was merged in, providing color-theoretic functions for modifying colors.
|
789
|
-
|
790
|
-
One of the most interesting of these functions is {Sass::Script::Functions#mix mix},
|
791
|
-
which mixes two colors together.
|
792
|
-
This provides a much better way of combining colors and creating themes
|
793
|
-
than standard color arithmetic.
|
794
|
-
|
795
|
-
#### Alpha Channels
|
796
|
-
|
797
|
-
Sass now supports colors with alpha channels,
|
798
|
-
constructed via the {Sass::Script::Functions#rgba rgba}
|
799
|
-
and {Sass::Script::Functions#hsla hsla} functions.
|
800
|
-
Alpha channels are unaffected by color arithmetic.
|
801
|
-
However, the {Sass::Script::Functions#opacify opacify}
|
802
|
-
and {Sass::Script::Functions#transparentize transparentize} functions
|
803
|
-
allow colors to be made more and less opaque, respectively.
|
804
|
-
|
805
|
-
Sass now also supports functions that return the values of the
|
806
|
-
{Sass::Script::Functions#red red},
|
807
|
-
{Sass::Script::Functions#blue blue},
|
808
|
-
{Sass::Script::Functions#green green},
|
809
|
-
and {Sass::Script::Functions#alpha alpha}
|
810
|
-
components of colors.
|
811
|
-
|
812
|
-
#### HSL Colors
|
813
|
-
|
814
|
-
Sass has many new functions for using the HSL values of colors.
|
815
|
-
For an overview of HSL colors, check out [the CSS3 Spec](http://www.w3.org/TR/css3-color/#hsl-color).
|
816
|
-
All these functions work just as well on RGB colors
|
817
|
-
as on colors constructed with the {Sass::Script::Functions#hsl hsl} function.
|
818
|
-
|
819
|
-
* The {Sass::Script::Functions#lighten lighten}
|
820
|
-
and {Sass::Script::Functions#darken darken}
|
821
|
-
functions adjust the lightness of a color.
|
822
|
-
|
823
|
-
* The {Sass::Script::Functions#saturate saturate}
|
824
|
-
and {Sass::Script::Functions#desaturate desaturate}
|
825
|
-
functions adjust the saturation of a color.
|
826
|
-
|
827
|
-
* The {Sass::Script::Functions#adjust_hue adjust-hue}
|
828
|
-
function adjusts the hue of a color.
|
829
|
-
|
830
|
-
* The {Sass::Script::Functions#hue hue},
|
831
|
-
{Sass::Script::Functions#saturation saturation},
|
832
|
-
and {Sass::Script::Functions#lightness lightness}
|
833
|
-
functions return the corresponding HSL values of the color.
|
834
|
-
|
835
|
-
* The {Sass::Script::Functions#grayscale grayscale}
|
836
|
-
function converts a color to grayscale.
|
837
|
-
|
838
|
-
* The {Sass::Script::Functions#complement complement}
|
839
|
-
function returns the complement of a color.
|
840
|
-
|
841
|
-
### Other New Functions
|
842
|
-
|
843
|
-
Several other new functions were added to make it easier to have
|
844
|
-
more flexible arguments to mixins and to enable deprecation
|
845
|
-
of obsolete APIs.
|
846
|
-
|
847
|
-
* {Sass::Script::Functions#type_of `type-of`} -- Returns the type of a value.
|
848
|
-
* {Sass::Script::Functions#unit `unit`} --
|
849
|
-
Returns the units associated with a number.
|
850
|
-
* {Sass::Script::Functions#unitless `unitless`} --
|
851
|
-
Returns whether a number has units or not.
|
852
|
-
* {Sass::Script::Functions#comparable `comparable`} --
|
853
|
-
Returns whether two numbers can be added or compared.
|
854
|
-
|
855
|
-
### Watching for Updates
|
856
|
-
{#3-0-0-watch}
|
857
|
-
|
858
|
-
The `sass` command-line utility has a new flag: `--watch`.
|
859
|
-
`sass --watch` monitors files or directories for updated Sass files
|
860
|
-
and compiles those files to CSS automatically.
|
861
|
-
This will allow people not using Ruby or [Compass](http://compass-style.org)
|
862
|
-
to use Sass without having to manually recompile all the time.
|
863
|
-
|
864
|
-
Here's the syntax for watching a directory full of Sass files:
|
865
|
-
|
866
|
-
sass --watch app/stylesheets:public/stylesheets
|
867
|
-
|
868
|
-
This will watch every Sass file in `app/stylesheets`.
|
869
|
-
Whenever one of them changes,
|
870
|
-
the corresponding CSS file in `public/stylesheets` will be regenerated.
|
871
|
-
Any files that import that file will be regenerated, too.
|
872
|
-
|
873
|
-
The syntax for watching individual files is the same:
|
874
|
-
|
875
|
-
sass --watch style.sass:out.css
|
876
|
-
|
877
|
-
You can also omit the output filename if you just want it to compile to name.css.
|
878
|
-
For example:
|
879
|
-
|
880
|
-
sass --watch style.sass
|
881
|
-
|
882
|
-
This will update `style.css` whenever `style.sass` changes.
|
883
|
-
|
884
|
-
You can list more than one file and/or directory,
|
885
|
-
and all of them will be watched:
|
886
|
-
|
887
|
-
sass --watch foo/style:public/foo bar/style:public/bar
|
888
|
-
sass --watch screen.sass print.sass awful-hacks.sass:ie.css
|
889
|
-
sass --watch app/stylesheets:public/stylesheets public/stylesheets/test.sass
|
890
|
-
|
891
|
-
File and directory watching is accessible from Ruby,
|
892
|
-
using the {Sass::Plugin::Compiler#watch Sass::Plugin#watch} function.
|
893
|
-
|
894
|
-
#### Bulk Updating
|
895
|
-
|
896
|
-
Another new flag for the `sass` command-line utility is `--update`.
|
897
|
-
It checks a group of Sass files to see if their CSS needs to be updated,
|
898
|
-
and updates if so.
|
899
|
-
|
900
|
-
The syntax for `--update` is just like watch:
|
901
|
-
|
902
|
-
sass --update app/stylesheets:public/stylesheets
|
903
|
-
sass --update style.sass:out.css
|
904
|
-
sass --watch screen.sass print.sass awful-hacks.sass:ie.css
|
905
|
-
|
906
|
-
In fact, `--update` work exactly the same as `--watch`,
|
907
|
-
except that it doesn't continue watching the files
|
908
|
-
after the first check.
|
909
|
-
|
910
|
-
### `sass-convert` (née `css2sass`) {#3-0-0-sass-convert}
|
911
|
-
|
912
|
-
The `sass-convert` tool, which used to be known as `css2sass`,
|
913
|
-
has been greatly improved in various ways.
|
914
|
-
It now uses a full-fledged CSS3 parser,
|
915
|
-
so it should be able to handle any valid CSS3,
|
916
|
-
as well as most hacks and proprietary syntax.
|
917
|
-
|
918
|
-
`sass-convert` can now convert between Sass and SCSS.
|
919
|
-
This is normally inferred from the filename,
|
920
|
-
but it can also be specified using the `--from` and `--to` flags.
|
921
|
-
For example:
|
922
|
-
|
923
|
-
$ generate-sass | sass-convert --from sass --to scss | consume-scss
|
924
|
-
|
925
|
-
It's also now possible to convert a file in-place --
|
926
|
-
that is, overwrite the old file with the new file.
|
927
|
-
This is useful for converting files in the [Sass 2 syntax](#3-0-0-deprecations)
|
928
|
-
to the new Sass 3 syntax,
|
929
|
-
e.g. by doing `sass-convert --in-place --from sass2 style.sass`.
|
930
|
-
|
931
|
-
#### `--recursive`
|
932
|
-
|
933
|
-
The `--recursive` option allows `sass-convert` to convert an entire directory of files.
|
934
|
-
`--recursive` requires both the `--from` and `--to` flags to be specified.
|
935
|
-
For example:
|
936
|
-
|
937
|
-
# Convert all .sass files in stylesheets/ to SCSS.
|
938
|
-
# "sass2" means that these files are assumed to use the Sass 2 syntax.
|
939
|
-
$ sass-convert --recursive --from sass2 --to scss stylesheets/
|
940
|
-
|
941
|
-
#### `--dasherize`
|
942
|
-
|
943
|
-
The `--dasherize` options converts all underscores to hyphens,
|
944
|
-
which are now allowed as part of identifiers in Sass.
|
945
|
-
Note that since underscores may still be used in place of hyphens
|
946
|
-
when referring to mixins and variables,
|
947
|
-
this won't cause any backwards-incompatibilities.
|
948
|
-
|
949
|
-
#### Convert Less to SCSS
|
950
|
-
|
951
|
-
`sass-convert` can also convert [Less](http://lesscss.org) files
|
952
|
-
to SCSS (or the indented syntax, although I anticipate less interest in that).
|
953
|
-
For example:
|
954
|
-
|
955
|
-
# Convert all .less files in the current directory into .scss files
|
956
|
-
sass-convert --from less --to scss --recursive .
|
957
|
-
|
958
|
-
This is done using the Less parser, so it requires that the `less` RubyGem be installed.
|
959
|
-
|
960
|
-
##### Incompatibilities
|
961
|
-
|
962
|
-
Because of the reasonably substantial differences between Sass and Less,
|
963
|
-
there are some things that can't be directly translated,
|
964
|
-
and one feature that can't be translated at all.
|
965
|
-
In the tests I've run on open-source Less stylesheets,
|
966
|
-
none of these have presented issues, but it's good to be aware of them.
|
967
|
-
|
968
|
-
First, Less doesn't distinguish fully between mixins and selector inheritance.
|
969
|
-
In Less, all classes and some other selectors may be used as mixins,
|
970
|
-
alongside more Sass-like mixins.
|
971
|
-
If a class is being used as a mixin,
|
972
|
-
it may also be used directly in the HTML,
|
973
|
-
so it's not safe to translate it into a Sass mixin.
|
974
|
-
What `sass-convert` does instead is leave the class in the stylesheet as a class,
|
975
|
-
and use {file:SASS_REFERENCE.md#extend `@extend`}
|
976
|
-
rather than {file:SASS_REFERENCE.md#including_a_mixin `@include`}
|
977
|
-
to take on the styles of that class.
|
978
|
-
Although `@extend` and mixins work quite differently,
|
979
|
-
using `@extend` here doesn't actually seem to make a difference in practice.
|
980
|
-
|
981
|
-
Another issue with Less mixins is that Less allows nested selectors
|
982
|
-
(such as `.body .button` or `.colors > .teal`) to be used
|
983
|
-
as a means of "namespacing" mixins.
|
984
|
-
Sass's `@extend` doesn't work that way,
|
985
|
-
so it does away with the namespacing and just extends the base class
|
986
|
-
(so `.colors > .teal` becomes simply `@extend .teal`).
|
987
|
-
In practice, this feature doesn't seem to be widely-used,
|
988
|
-
but `sass-convert` will print a warning and leave a comment
|
989
|
-
when it encounters it just in case.
|
990
|
-
|
991
|
-
Finally, Less has the ability to directly access variables and property values
|
992
|
-
defined in other selectors, which Sass does not support.
|
993
|
-
Whenever such an accessor is used,
|
994
|
-
`sass-convert` will print a warning
|
995
|
-
and comment it out in the SCSS output.
|
996
|
-
Like namespaced mixins, though,
|
997
|
-
this does not seem to be a widely-used feature.
|
998
|
-
|
999
|
-
### `@warn` Directive
|
1000
|
-
|
1001
|
-
A new directive `@warn` has been added that allows Sass libraries to emit warnings.
|
1002
|
-
This can be used to issue deprecation warnings, discourage sloppy use of mixins, etc.
|
1003
|
-
`@warn` takes a single argument: a SassScript expression that will be
|
1004
|
-
displayed on the console along with a stylesheet trace for locating the warning.
|
1005
|
-
For example:
|
1006
|
-
|
1007
|
-
@mixin blue-text {
|
1008
|
-
@warn "The blue-text mixin is deprecated. Use new-blue-text instead.";
|
1009
|
-
color: #00f;
|
1010
|
-
}
|
1011
|
-
|
1012
|
-
Warnings may be silenced with the new `--quiet` command line option,
|
1013
|
-
or the corresponding {file:SASS_REFERENCE.md#quiet-option `:quiey` Sass option}.
|
1014
|
-
This option will also affect warnings printed by Sass itself.
|
1015
|
-
Warnings are off by default in the Rails, Rack, and Merb production environments.
|
1016
|
-
|
1017
|
-
### Sass::Plugin API
|
1018
|
-
|
1019
|
-
{Sass::Plugin} now has a large collection of callbacks that allow users
|
1020
|
-
to run code when various actions are performed.
|
1021
|
-
For example:
|
1022
|
-
|
1023
|
-
Sass::Plugin.on_updating_stylesheet do |template, css|
|
1024
|
-
puts "#{template} has been compiled to #{css}!"
|
1025
|
-
end
|
1026
|
-
|
1027
|
-
For a full list of callbacks and usage notes, see the {Sass::Plugin} documentation.
|
1028
|
-
|
1029
|
-
{Sass::Plugin} also has a new method,
|
1030
|
-
{Sass::Plugin#force_update_stylesheets force_update_stylesheets}.
|
1031
|
-
This works just like {Sass::Plugin#update_stylesheets},
|
1032
|
-
except that it doesn't check modification times and doesn't use the cache;
|
1033
|
-
all stylesheets are always compiled anew.
|
1034
|
-
|
1035
|
-
### Output Formatting
|
1036
|
-
|
1037
|
-
Properties with a value and *also* nested properties
|
1038
|
-
are now rendered with the nested properties indented.
|
1039
|
-
For example:
|
1040
|
-
|
1041
|
-
margin: auto
|
1042
|
-
top: 10px
|
1043
|
-
bottom: 20px
|
1044
|
-
|
1045
|
-
is now compiled to:
|
1046
|
-
|
1047
|
-
margin: auto;
|
1048
|
-
margin-top: 10px;
|
1049
|
-
margin-bottom: 20px;
|
1050
|
-
|
1051
|
-
#### `:compressed` Style
|
1052
|
-
|
1053
|
-
When the `:compressed` style is used,
|
1054
|
-
colors will be output as the minimal possible representation.
|
1055
|
-
This means whichever is smallest of the HTML4 color name
|
1056
|
-
and the hex representation (shortened to the three-letter version if possible).
|
1057
|
-
|
1058
|
-
### Stylesheet Updating Speed
|
1059
|
-
|
1060
|
-
Several caching layers were added to Sass's stylesheet updater.
|
1061
|
-
This means that it should run significantly faster.
|
1062
|
-
This benefit will be seen by people using Sass in development mode
|
1063
|
-
with Rails, Rack, and Merb,
|
1064
|
-
as well as people using `sass --watch` from the command line,
|
1065
|
-
and to a lesser (but still significant) extent `sass --update`.
|
1066
|
-
Thanks to [thedarkone](http://github.com/thedarkone).
|
1067
|
-
|
1068
|
-
### Error Backtraces
|
1069
|
-
|
1070
|
-
Numerous bugs were fixed with the backtraces given for Sass errors,
|
1071
|
-
especially when importing files and using mixins.
|
1072
|
-
All imports and mixins will now show up in the Ruby backtrace,
|
1073
|
-
with the proper filename and line number.
|
1074
|
-
|
1075
|
-
In addition, when the `sass` executable encounters an error,
|
1076
|
-
it now prints the filename where the error occurs,
|
1077
|
-
as well as a backtrace of Sass imports and mixins.
|
1078
|
-
|
1079
|
-
### Ruby 1.9 Support
|
1080
|
-
|
1081
|
-
* Sass and `css2sass` now produce more descriptive errors
|
1082
|
-
when given a template with invalid byte sequences for that template's encoding,
|
1083
|
-
including the line number and the offending character.
|
1084
|
-
|
1085
|
-
* Sass and `css2sass` now accept Unicode documents with a
|
1086
|
-
[byte-order-mark](http://en.wikipedia.org/wiki/Byte_order_mark).
|
1087
|
-
|
1088
|
-
### Firebug Support
|
1089
|
-
|
1090
|
-
A new {file:SASS_REFERENCE.md#debug_info-option `:debug_info` option}
|
1091
|
-
has been added that emits line-number and filename information
|
1092
|
-
to the CSS file in a browser-readable format.
|
1093
|
-
This can be used with the new [FireSass Firebug extension](https://addons.mozilla.org/en-US/firefox/addon/103988)
|
1094
|
-
to report the Sass filename and line number for generated CSS files.
|
1095
|
-
|
1096
|
-
This is also available via the `--debug-info` command-line flag.
|
1097
|
-
|
1098
|
-
### Minor Improvements
|
1099
|
-
|
1100
|
-
* If a CSS or Sass function is used that has the name of a color,
|
1101
|
-
it will now be parsed as a function rather than as a color.
|
1102
|
-
For example, `fuchsia(12)` now renders as `fuchsia(12)`
|
1103
|
-
rather than `fuchsia 12`,
|
1104
|
-
and `tealbang(12)` now renders as `tealbang(12)`
|
1105
|
-
rather than `teal bang(12)`.
|
1106
|
-
|
1107
|
-
* The Sass Rails and Merb plugins now use Rack middleware by default.
|
1108
|
-
|
1109
|
-
* Haml is now compatible with the [Rip](http://hellorip.com/) package management system.
|
1110
|
-
Thanks to [Josh Peek](http://joshpeek.com/).
|
1111
|
-
|
1112
|
-
* Indented-syntax `/*` comments may now include `*` on lines beyond the first.
|
1113
|
-
|
1114
|
-
* A {file:SASS_REFERENCE.md#read_cache-option `:read_cache`} option has been added
|
1115
|
-
to allow the Sass cache to be read from but not written to.
|
1116
|
-
|
1117
|
-
* Stylesheets are no longer checked during each request
|
1118
|
-
when running tests in Rails.
|
1119
|
-
This should speed up some tests significantly.
|
1120
|
-
|
1121
|
-
## 2.2.24
|
1122
|
-
|
1123
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.24).
|
1124
|
-
|
1125
|
-
* Parent references -- the `&` character --
|
1126
|
-
may only be placed at the beginning of simple selector sequences in Sass 3.
|
1127
|
-
Placing them elsewhere is deprecated in 2.2.24 and will print a warning.
|
1128
|
-
For example, `foo &.bar` is allowed, but `foo .bar&` is not.
|
1129
|
-
|
1130
|
-
## 2.2.23
|
1131
|
-
|
1132
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.23).
|
1133
|
-
|
1134
|
-
* Don't crash when `rake gems` is run in Rails with Sass installed.
|
1135
|
-
Thanks to [Florian Frank](http://github.com/flori).
|
1136
|
-
|
1137
|
-
* When raising a file-not-found error,
|
1138
|
-
add a list of load paths that were checked.
|
1139
|
-
|
1140
|
-
* If an import isn't found for a cached Sass file and the
|
1141
|
-
{file:SASS_REFERENCE.md#full_exception `:full_exception option`} is enabled,
|
1142
|
-
print the full exception rather than raising it.
|
1143
|
-
|
1144
|
-
* Fix a bug with a weird interaction with Haml, DataMapper, and Rails 3
|
1145
|
-
that caused some tag helpers to go into infinite recursion.
|
1146
|
-
|
1147
|
-
## 2.2.22
|
1148
|
-
|
1149
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.22).
|
1150
|
-
|
1151
|
-
* Add a railtie so Haml and Sass will be automatically loaded in Rails 3.
|
1152
|
-
Thanks to [Daniel Neighman](http://pancakestacks.wordpress.com/).
|
1153
|
-
|
1154
|
-
* Make loading the gemspec not crash on read-only filesystems like Heroku's.
|
1155
|
-
|
1156
|
-
## 2.2.21
|
1157
|
-
|
1158
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.21).
|
1159
|
-
|
1160
|
-
* Fix a few bugs in the git-revision-reporting in {Haml::Version#version}.
|
1161
|
-
In particular, it will still work if `git gc` has been called recently,
|
1162
|
-
or if various files are missing.
|
1163
|
-
|
1164
|
-
* Always use `__FILE__` when reading files within the Haml repo in the `Rakefile`.
|
1165
|
-
According to [this bug report](http://github.com/carlhuda/bundler/issues/issue/44),
|
1166
|
-
this should make Sass work better with Bundler.
|
1167
|
-
|
1168
|
-
## 2.2.20
|
1169
|
-
|
1170
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.20).
|
1171
|
-
|
1172
|
-
* If the cache file for a given Sass file is corrupt
|
1173
|
-
because it doesn't have enough content,
|
1174
|
-
produce a warning and read the Sass file
|
1175
|
-
rather than letting the exception bubble up.
|
1176
|
-
This is consistent with other sorts of sassc corruption handling.
|
1177
|
-
|
1178
|
-
* Calls to `defined?` shouldn't interfere with Rails' autoloading
|
1179
|
-
in very old versions (1.2.x).
|
1180
|
-
|
1181
|
-
## 2.2.19
|
1182
|
-
|
1183
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.18).
|
1184
|
-
|
1185
|
-
There were no changes made to Sass between versions 2.2.18 and 2.2.19.
|
1186
|
-
|
1187
|
-
## 2.2.18
|
1188
|
-
|
1189
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.18).
|
1190
|
-
|
1191
|
-
* Use `Rails.env` rather than `RAILS_ENV` when running under Rails 3.0.
|
1192
|
-
Thanks to [Duncan Grazier](http://duncangrazier.com/).
|
1193
|
-
|
1194
|
-
* Support `:line_numbers` as an alias for {file:SASS_REFERENCE.md#line_numbers-option `:line_comments`},
|
1195
|
-
since that's what the docs have said forever.
|
1196
|
-
Similarly, support `--line-numbers` as a command-line option.
|
1197
|
-
|
1198
|
-
* Add a `--unix-newlines` flag to all executables
|
1199
|
-
for outputting Unix-style newlines on Windows.
|
1200
|
-
|
1201
|
-
* Add a {file:SASS_REFERENCE.md#unix_newlines-option `:unix_newlines` option}
|
1202
|
-
for {Sass::Plugin} for outputting Unix-style newlines on Windows.
|
1203
|
-
|
1204
|
-
* Fix the `--cache-location` flag, which was previously throwing errors.
|
1205
|
-
Thanks to [tav](http://tav.espians.com/).
|
1206
|
-
|
1207
|
-
* Allow comments at the beginning of the document to have arbitrary indentation,
|
1208
|
-
just like comments elsewhere.
|
1209
|
-
Similarly, comment parsing is a little nicer than before.
|
1210
|
-
|
1211
|
-
## 2.2.17
|
1212
|
-
|
1213
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.16).
|
1214
|
-
|
1215
|
-
* When the {file:SASS_REFERENCE.md#full_exception-option `:full_exception` option}
|
1216
|
-
is false, raise the error in Ruby code rather than swallowing it
|
1217
|
-
and printing something uninformative.
|
1218
|
-
|
1219
|
-
* Fixed error-reporting when something goes wrong when loading Sass
|
1220
|
-
using the `sass` executable.
|
1221
|
-
This used to raise a NameError because `Sass::SyntaxError` wasn't defined.
|
1222
|
-
Now it'll raise the correct exception instead.
|
1223
|
-
|
1224
|
-
* Report the filename in warnings about selectors without properties.
|
1225
|
-
|
1226
|
-
* `nil` values for Sass options are now ignored,
|
1227
|
-
rather than raising errors.
|
1228
|
-
|
1229
|
-
* Fix a bug that appears when Plugin template locations
|
1230
|
-
have multiple trailing slashes.
|
1231
|
-
Thanks to [Jared Grippe](http://jaredgrippe.com/).
|
1232
|
-
|
1233
|
-
### Must Read!
|
1234
|
-
|
1235
|
-
* When `@import` is given a filename without an extension,
|
1236
|
-
the behavior of rendering a CSS `@import` if no Sass file is found
|
1237
|
-
is deprecated.
|
1238
|
-
In future versions, `@import foo` will either import the template
|
1239
|
-
or raise an error.
|
1240
|
-
|
1241
|
-
## 2.2.16
|
1242
|
-
|
1243
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.16).
|
1244
|
-
|
1245
|
-
* Fixed a bug where modules containing user-defined Sass functions
|
1246
|
-
weren't made available when simply included in {Sass::Script::Functions}
|
1247
|
-
({Sass::Script::Functions Functions} needed to be re-included in
|
1248
|
-
{Sass::Script::Functions::EvaluationContext Functions::EvaluationContext}).
|
1249
|
-
Now the module simply needs to be included in {Sass::Script::Functions}.
|
1250
|
-
|
1251
|
-
## 2.2.15
|
1252
|
-
|
1253
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.15).
|
1254
|
-
|
1255
|
-
* Added {Sass::Script::Color#with} for a way of setting color channels
|
1256
|
-
that's easier than manually constructing a new color
|
1257
|
-
and is forwards-compatible with alpha-channel colors
|
1258
|
-
(to be introduced in Sass 2.4).
|
1259
|
-
|
1260
|
-
* Added a missing require in Sass that caused crashes
|
1261
|
-
when it was being run standalone.
|
1262
|
-
|
1263
|
-
## 2.2.14
|
1264
|
-
|
1265
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.14).
|
1266
|
-
|
1267
|
-
* All Sass functions now raise explicit errors if their inputs
|
1268
|
-
are of the incorrect type.
|
1269
|
-
|
1270
|
-
* Allow the SassScript `rgb()` function to take percentages
|
1271
|
-
in addition to numerical values.
|
1272
|
-
|
1273
|
-
* Fixed a bug where SassScript strings with `#` followed by `#{}` interpolation
|
1274
|
-
didn't evaluate the interpolation.
|
1275
|
-
|
1276
|
-
### SassScript Ruby API
|
1277
|
-
|
1278
|
-
These changes only affect people defining their own Sass functions
|
1279
|
-
using {Sass::Script::Functions}.
|
1280
|
-
|
1281
|
-
* {Sass::Script::Color#value} attribute is deprecated.
|
1282
|
-
Use {Sass::Script::Color#rgb} instead.
|
1283
|
-
The returned array is now frozen as well.
|
1284
|
-
|
1285
|
-
* Add an `assert_type` function that's available to {Sass::Script::Functions}.
|
1286
|
-
This is useful for typechecking the inputs to functions.
|
1287
|
-
|
1288
|
-
### Rack Support
|
1289
|
-
|
1290
|
-
Sass 2.2.14 includes Rack middleware for running Sass,
|
1291
|
-
meaning that all Rack-enabled frameworks can now use Sass.
|
1292
|
-
To activate this, just add
|
1293
|
-
|
1294
|
-
require 'sass/plugin/rack'
|
1295
|
-
use Sass::Plugin::Rack
|
1296
|
-
|
1297
|
-
to your `config.ru`.
|
1298
|
-
See the {Sass::Plugin::Rack} documentation for more details.
|
1299
|
-
|
1300
|
-
## 2.2.13
|
1301
|
-
|
1302
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.13).
|
1303
|
-
|
1304
|
-
There were no changes made to Sass between versions 2.2.12 and 2.2.13.
|
1305
|
-
|
1306
|
-
## 2.2.12
|
1307
|
-
|
1308
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.12).
|
1309
|
-
|
1310
|
-
* Fix a stupid bug introduced in 2.2.11 that broke the Sass Rails plugin.
|
1311
|
-
|
1312
|
-
## 2.2.11
|
1313
|
-
|
1314
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.11).
|
1315
|
-
|
1316
|
-
* Added a note to errors on properties that could be pseudo-classes (e.g. `:focus`)
|
1317
|
-
indicating that they should be backslash-escaped.
|
1318
|
-
|
1319
|
-
* Automatically interpret properties that could be pseudo-classes as such
|
1320
|
-
if {file:SASS_REFERENCE.md.html#property_syntax-option `:property_syntax`}
|
1321
|
-
is set to `:new`.
|
1322
|
-
|
1323
|
-
* Fixed `css2sass`'s generation of pseudo-classes so that they're backslash-escaped.
|
1324
|
-
|
1325
|
-
* Don't crash if the Haml plugin skeleton is installed and `rake gems:install` is run.
|
1326
|
-
|
1327
|
-
* Don't use `RAILS_ROOT` directly.
|
1328
|
-
This no longer exists in Rails 3.0.
|
1329
|
-
Instead abstract this out as `Haml::Util.rails_root`.
|
1330
|
-
This changes makes Haml fully compatible with edge Rails as of this writing.
|
1331
|
-
|
1332
|
-
* Make use of a Rails callback rather than a monkeypatch to check for stylesheet updates
|
1333
|
-
in Rails 3.0+.
|
1334
|
-
|
1335
|
-
## 2.2.10
|
1336
|
-
|
1337
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.10).
|
1338
|
-
|
1339
|
-
* Add support for attribute selectors with spaces around the `=`.
|
1340
|
-
For example:
|
1341
|
-
|
1342
|
-
a[href = http://google.com]
|
1343
|
-
color: blue
|
1344
|
-
|
1345
|
-
## 2.2.9
|
1346
|
-
|
1347
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.9).
|
1348
|
-
|
1349
|
-
There were no changes made to Sass between versions 2.2.8 and 2.2.9.
|
1350
|
-
|
1351
|
-
## 2.2.8
|
1352
|
-
|
1353
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.8).
|
1354
|
-
|
1355
|
-
There were no changes made to Sass between versions 2.2.7 and 2.2.8.
|
1356
|
-
|
1357
|
-
## 2.2.7
|
1358
|
-
|
1359
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.7).
|
1360
|
-
|
1361
|
-
There were no changes made to Sass between versions 2.2.6 and 2.2.7.
|
1362
|
-
|
1363
|
-
## 2.2.6
|
1364
|
-
|
1365
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.6).
|
1366
|
-
|
1367
|
-
* Don't crash when the `__FILE__` constant of a Ruby file is a relative path,
|
1368
|
-
as apparently happens sometimes in TextMate
|
1369
|
-
(thanks to [Karl Varga](http://github.com/kjvarga)).
|
1370
|
-
|
1371
|
-
* Add "Sass" to the `--version` string for the executables.
|
1372
|
-
|
1373
|
-
## 2.2.5
|
1374
|
-
|
1375
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.5).
|
1376
|
-
|
1377
|
-
There were no changes made to Sass between versions 2.2.4 and 2.2.5.
|
1378
|
-
|
1379
|
-
## 2.2.4
|
1380
|
-
|
1381
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.4).
|
1382
|
-
|
1383
|
-
* Don't add `require 'rubygems'` to the top of init.rb when installed
|
1384
|
-
via `sass --rails`. This isn't necessary, and actually gets
|
1385
|
-
clobbered as soon as haml/template is loaded.
|
1386
|
-
|
1387
|
-
* Document the previously-undocumented {file:SASS_REFERENCE.md#line-option `:line` option},
|
1388
|
-
which allows the number of the first line of a Sass file to be set for error reporting.
|
1389
|
-
|
1390
|
-
## 2.2.3
|
1391
|
-
|
1392
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.3).
|
1393
|
-
|
1394
|
-
Sass 2.2.3 prints line numbers for warnings about selectors
|
1395
|
-
with no properties.
|
1396
|
-
|
1397
|
-
## 2.2.2
|
1398
|
-
|
1399
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.2).
|
1400
|
-
|
1401
|
-
Sass 2.2.2 is a minor bug-fix release.
|
1402
|
-
Notable changes include better parsing of mixin definitions and inclusions
|
1403
|
-
and better support for Ruby 1.9.
|
1404
|
-
|
1405
|
-
## 2.2.1
|
1406
|
-
|
1407
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.1).
|
1408
|
-
|
1409
|
-
Sass 2.2.1 is a minor bug-fix release.
|
1410
|
-
|
1411
|
-
### Must Read!
|
1412
|
-
|
1413
|
-
* It used to be acceptable to use `-` immediately following variable names,
|
1414
|
-
without any whitespace in between (for example, `!foo-!bar`).
|
1415
|
-
This is now deprecated, so that in the future variables with hyphens
|
1416
|
-
can be supported. Surround `-` with spaces.
|
1417
|
-
|
1418
|
-
## 2.2.0
|
1419
|
-
|
1420
|
-
[Tagged on GitHub](http://github.com/nex3/haml/commit/2.2.0).
|
1421
|
-
|
1422
|
-
The 2.2 release marks a significant step in the evolution of the Sass
|
1423
|
-
language. The focus has been to increase the power of Sass to keep
|
1424
|
-
your stylesheets maintainable by allowing new forms of abstraction to
|
1425
|
-
be created within your stylesheets and the stylesheets provided by
|
1426
|
-
others that you can download and import into your own. The fundamental
|
1427
|
-
units of abstraction in Sass are variables and mixins. Please read
|
1428
|
-
below for a list of changes:
|
1429
|
-
|
1430
|
-
### Must Read!
|
1431
|
-
|
1432
|
-
* Sass Comments (//) used to only comment out a single line. This was deprecated
|
1433
|
-
in 2.0.10 and starting in 2.2, Sass comments will comment out any lines indented
|
1434
|
-
under them. Upgrade to 2.0.10 in order to see deprecation warnings where this change
|
1435
|
-
affects you.
|
1436
|
-
|
1437
|
-
* Implicit Strings within SassScript are now deprecated and will be removed in 2.4.
|
1438
|
-
For example: `border= !width solid #00F` should now be written as `border: #{!width} solid #00F`
|
1439
|
-
or as `border= !width "solid" #00F`. After upgrading to 2.2, you will see deprecation warnings
|
1440
|
-
if you have sass files that use implicit strings.
|
1441
|
-
|
1442
|
-
|
1443
|
-
### Sass Syntax Changes
|
1444
|
-
|
1445
|
-
#### Flexible Indentation
|
1446
|
-
|
1447
|
-
The indentation of Sass documents is now flexible. The first indent
|
1448
|
-
that is detected will determine the indentation style for that
|
1449
|
-
document. Tabs and spaces may never be mixed, but within a document,
|
1450
|
-
you may choose to use tabs or a flexible number of spaces.
|
1451
|
-
|
1452
|
-
#### Multiline Sass Comments
|
1453
|
-
|
1454
|
-
Sass Comments (//) will now comment out whatever is indented beneath
|
1455
|
-
them. Previously they were single line when used at the top level of a
|
1456
|
-
document. Upgrading to the latest stable version will give you
|
1457
|
-
deprecation warnings if you have silent comments with indentation
|
1458
|
-
underneath them.
|
1459
|
-
|
1460
|
-
#### Mixin Arguments
|
1461
|
-
|
1462
|
-
Sass Mixins now accept any number of arguments. To define a mixin with
|
1463
|
-
arguments, specify the arguments as a comma-delimited list of
|
1464
|
-
variables like so:
|
1465
|
-
|
1466
|
-
=my-mixin(!arg1, !arg2, !arg3)
|
1467
|
-
|
1468
|
-
As before, the definition of the mixin is indented below the mixin
|
1469
|
-
declaration. The variables declared in the argument list may be used
|
1470
|
-
and will be bound to the values passed to the mixin when it is
|
1471
|
-
invoked. Trailing arguments may have default values as part of the
|
1472
|
-
declaration:
|
1473
|
-
|
1474
|
-
=my-mixin(!arg1, !arg2 = 1px, !arg3 = blue)
|
1475
|
-
|
1476
|
-
In the example above, the mixin may be invoked by passing 1, 2 or 3
|
1477
|
-
arguments to it. A similar syntax is used to invoke a mixin that
|
1478
|
-
accepts arguments:
|
1479
|
-
|
1480
|
-
div.foo
|
1481
|
-
+my-mixin(1em, 3px)
|
1482
|
-
|
1483
|
-
When a mixin has no required arguments, the parenthesis are optional.
|
1484
|
-
|
1485
|
-
The default values for mixin arguments are evaluated in the global
|
1486
|
-
context at the time when the mixin is invoked, they may also reference
|
1487
|
-
the previous arguments in the declaration. For example:
|
1488
|
-
|
1489
|
-
!default_width = 30px
|
1490
|
-
=my-fancy-mixin(!width = !default_width, !height = !width)
|
1491
|
-
width= !width
|
1492
|
-
height= !height
|
1493
|
-
|
1494
|
-
.default-box
|
1495
|
-
+my-fancy-mixin
|
1496
|
-
|
1497
|
-
.square-box
|
1498
|
-
+my-fancy-mixin(50px)
|
1499
|
-
|
1500
|
-
.rectangle-box
|
1501
|
-
+my-fancy-mixin(25px, 75px)
|
1502
|
-
|
1503
|
-
!default_width = 10px
|
1504
|
-
.small-default-box
|
1505
|
-
+my-fancy-mixin
|
1506
|
-
|
1507
|
-
|
1508
|
-
compiles to:
|
1509
|
-
|
1510
|
-
.default-box {
|
1511
|
-
width: 30px;
|
1512
|
-
height: 30px; }
|
1513
|
-
|
1514
|
-
.square-box {
|
1515
|
-
width: 50px;
|
1516
|
-
height: 50px; }
|
1517
|
-
|
1518
|
-
.rectangle-box {
|
1519
|
-
width: 25px;
|
1520
|
-
height: 75px; }
|
1521
|
-
|
1522
|
-
.small-default-box {
|
1523
|
-
width: 10px;
|
1524
|
-
height: 10px; }
|
1525
|
-
|
1526
|
-
|
1527
|
-
### Sass, Interactive
|
1528
|
-
|
1529
|
-
The sass command line option -i now allows you to quickly and
|
1530
|
-
interactively experiment with SassScript expressions. The value of the
|
1531
|
-
expression you enter will be printed out after each line. Example:
|
1532
|
-
|
1533
|
-
$ sass -i
|
1534
|
-
>> 5px
|
1535
|
-
5px
|
1536
|
-
>> 5px + 10px
|
1537
|
-
15px
|
1538
|
-
>> !five_pixels = 5px
|
1539
|
-
5px
|
1540
|
-
>> !five_pixels + 10px
|
1541
|
-
15px
|
1542
|
-
|
1543
|
-
### SassScript
|
1544
|
-
|
1545
|
-
The features of SassScript have been greatly enhanced with new control
|
1546
|
-
directives, new fundamental data types, and variable scoping.
|
1547
|
-
|
1548
|
-
#### New Data Types
|
1549
|
-
|
1550
|
-
SassScript now has four fundamental data types:
|
1551
|
-
|
1552
|
-
1. Number
|
1553
|
-
2. String
|
1554
|
-
3. Boolean (New in 2.2)
|
1555
|
-
4. Colors
|
1556
|
-
|
1557
|
-
#### More Flexible Numbers
|
1558
|
-
|
1559
|
-
Like JavaScript, SassScript numbers can now change between floating
|
1560
|
-
point and integers. No explicit casting or decimal syntax is
|
1561
|
-
required. When a number is emitted into a CSS file it will be rounded
|
1562
|
-
to the nearest thousandth, however the internal representation
|
1563
|
-
maintains much higher precision.
|
1564
|
-
|
1565
|
-
#### Improved Handling of Units
|
1566
|
-
|
1567
|
-
While Sass has long supported numbers with units, it now has a much
|
1568
|
-
deeper understanding of them. The following are examples of legal
|
1569
|
-
numbers in SassScript:
|
1570
|
-
|
1571
|
-
0, 1000, 6%, -2px, 5pc, 20em, or 2foo.
|
1572
|
-
|
1573
|
-
Numbers of the same unit may always be added and subtracted. Numbers
|
1574
|
-
that have units that Sass understands and finds comparable, can be
|
1575
|
-
combined, taking the unit of the first number. Numbers that have
|
1576
|
-
non-comparable units may not be added nor subtracted -- any attempt to
|
1577
|
-
do so will cause an error. However, a unitless number takes on the
|
1578
|
-
unit of the other number during a mathematical operation. For example:
|
1579
|
-
|
1580
|
-
>> 3mm + 4cm
|
1581
|
-
43mm
|
1582
|
-
>> 4cm + 3mm
|
1583
|
-
4.3cm
|
1584
|
-
>> 3cm + 2in
|
1585
|
-
8.08cm
|
1586
|
-
>> 5foo + 6foo
|
1587
|
-
11foo
|
1588
|
-
>> 4% + 5px
|
1589
|
-
SyntaxError: Incompatible units: 'px' and '%'.
|
1590
|
-
>> 5 + 10px
|
1591
|
-
15px
|
1592
|
-
|
1593
|
-
Sass allows compound units to be stored in any intermediate form, but
|
1594
|
-
will raise an error if you try to emit a compound unit into your css
|
1595
|
-
file.
|
1596
|
-
|
1597
|
-
>> !em_ratio = 1em / 16px
|
1598
|
-
0.063em/px
|
1599
|
-
>> !em_ratio * 32px
|
1600
|
-
2em
|
1601
|
-
>> !em_ratio * 40px
|
1602
|
-
2.5em
|
1603
|
-
|
1604
|
-
#### Colors
|
1605
|
-
|
1606
|
-
A color value can be declared using a color name, hexadecimal,
|
1607
|
-
shorthand hexadecimal, the rgb function, or the hsl function. When
|
1608
|
-
outputting a color into css, the color name is used, if any, otherwise
|
1609
|
-
it is emitted as hexadecimal value. Examples:
|
1610
|
-
|
1611
|
-
> #fff
|
1612
|
-
white
|
1613
|
-
>> white
|
1614
|
-
white
|
1615
|
-
>> #FFFFFF
|
1616
|
-
white
|
1617
|
-
>> hsl(180, 100, 100)
|
1618
|
-
white
|
1619
|
-
>> rgb(255, 255, 255)
|
1620
|
-
white
|
1621
|
-
>> #AAA
|
1622
|
-
#aaaaaa
|
1623
|
-
|
1624
|
-
Math on color objects is performed piecewise on the rgb
|
1625
|
-
components. However, these operations rarely have meaning in the
|
1626
|
-
design domain (mostly they make sense for gray-scale colors).
|
1627
|
-
|
1628
|
-
>> #aaa + #123
|
1629
|
-
#bbccdd
|
1630
|
-
>> #333 * 2
|
1631
|
-
#666666
|
1632
|
-
|
1633
|
-
#### Booleans
|
1634
|
-
|
1635
|
-
Boolean objects can be created by comparison operators or via the
|
1636
|
-
`true` and `false` keywords. Booleans can be combined using the
|
1637
|
-
`and`, `or`, and `not` keywords.
|
1638
|
-
|
1639
|
-
>> true
|
1640
|
-
true
|
1641
|
-
>> true and false
|
1642
|
-
false
|
1643
|
-
>> 5 < 10
|
1644
|
-
true
|
1645
|
-
>> not (5 < 10)
|
1646
|
-
false
|
1647
|
-
>> not (5 < 10) or not (10 < 5)
|
1648
|
-
true
|
1649
|
-
>> 30mm == 3cm
|
1650
|
-
true
|
1651
|
-
>> 1px == 1em
|
1652
|
-
false
|
1653
|
-
|
1654
|
-
#### Strings
|
1655
|
-
|
1656
|
-
Unicode escapes are now allowed within SassScript strings.
|
1657
|
-
|
1658
|
-
### Control Directives
|
1659
|
-
|
1660
|
-
New directives provide branching and looping within a sass stylesheet
|
1661
|
-
based on SassScript expressions. See the [Sass
|
1662
|
-
Reference](SASS_REFERENCE.md.html#control_directives) for complete
|
1663
|
-
details.
|
1664
|
-
|
1665
|
-
#### @for
|
1666
|
-
|
1667
|
-
The `@for` directive loops over a set of numbers in sequence, defining
|
1668
|
-
the current number into the variable specified for each loop. The
|
1669
|
-
`through` keyword means that the last iteration will include the
|
1670
|
-
number, the `to` keyword means that it will stop just before that
|
1671
|
-
number.
|
1672
|
-
|
1673
|
-
@for !x from 1px through 5px
|
1674
|
-
.border-#{!x}
|
1675
|
-
border-width= !x
|
1676
|
-
|
1677
|
-
compiles to:
|
1678
|
-
|
1679
|
-
.border-1px {
|
1680
|
-
border-width: 1px; }
|
1681
|
-
|
1682
|
-
.border-2px {
|
1683
|
-
border-width: 2px; }
|
1684
|
-
|
1685
|
-
.border-3px {
|
1686
|
-
border-width: 3px; }
|
1687
|
-
|
1688
|
-
.border-4px {
|
1689
|
-
border-width: 4px; }
|
1690
|
-
|
1691
|
-
.border-5px {
|
1692
|
-
border-width: 5px; }
|
1693
|
-
|
1694
|
-
#### @if / @else if / @else
|
1695
|
-
|
1696
|
-
The branching directives `@if`, `@else if`, and `@else` let you select
|
1697
|
-
between several branches of sass to be emitted, based on the result of
|
1698
|
-
a SassScript expression. Example:
|
1699
|
-
|
1700
|
-
!type = "monster"
|
1701
|
-
p
|
1702
|
-
@if !type == "ocean"
|
1703
|
-
color: blue
|
1704
|
-
@else if !type == "matador"
|
1705
|
-
color: red
|
1706
|
-
@else if !type == "monster"
|
1707
|
-
color: green
|
1708
|
-
@else
|
1709
|
-
color: black
|
1710
|
-
|
1711
|
-
is compiled to:
|
1712
|
-
|
1713
|
-
p {
|
1714
|
-
color: green; }
|
1715
|
-
|
1716
|
-
#### @while
|
1717
|
-
|
1718
|
-
The `@while` directive lets you iterate until a condition is
|
1719
|
-
met. Example:
|
1720
|
-
|
1721
|
-
!i = 6
|
1722
|
-
@while !i > 0
|
1723
|
-
.item-#{!i}
|
1724
|
-
width = 2em * !i
|
1725
|
-
!i = !i - 2
|
1726
|
-
|
1727
|
-
is compiled to:
|
1728
|
-
|
1729
|
-
.item-6 {
|
1730
|
-
width: 12em; }
|
1731
|
-
|
1732
|
-
.item-4 {
|
1733
|
-
width: 8em; }
|
1734
|
-
|
1735
|
-
.item-2 {
|
1736
|
-
width: 4em; }
|
1737
|
-
|
1738
|
-
### Variable Scoping
|
1739
|
-
|
1740
|
-
The term "constant" has been renamed to "variable." Variables can be
|
1741
|
-
declared at any scope (a.k.a. nesting level) and they will only be
|
1742
|
-
visible to the code until the next outdent. However, if a variable is
|
1743
|
-
already defined in a higher level scope, setting it will overwrite the
|
1744
|
-
value stored previously.
|
1745
|
-
|
1746
|
-
In this code, the `!local_var` variable is scoped and hidden from
|
1747
|
-
other higher level scopes or sibling scopes:
|
1748
|
-
|
1749
|
-
.foo
|
1750
|
-
.bar
|
1751
|
-
!local_var = 1px
|
1752
|
-
width= !local_var
|
1753
|
-
.baz
|
1754
|
-
// this will raise an undefined variable error.
|
1755
|
-
width= !local_var
|
1756
|
-
// as will this
|
1757
|
-
width= !local_var
|
1758
|
-
|
1759
|
-
In this example, since the `!global_var` variable is first declared at
|
1760
|
-
a higher scope, it is shared among all lower scopes:
|
1761
|
-
|
1762
|
-
!global_var = 1px
|
1763
|
-
.foo
|
1764
|
-
.bar
|
1765
|
-
!global_var = 2px
|
1766
|
-
width= !global_var
|
1767
|
-
.baz
|
1768
|
-
width= !global_var
|
1769
|
-
width= !global_var
|
1770
|
-
|
1771
|
-
compiles to:
|
1772
|
-
|
1773
|
-
.foo {
|
1774
|
-
width: 2px; }
|
1775
|
-
.foo .bar {
|
1776
|
-
width: 2px; }
|
1777
|
-
.foo .baz {
|
1778
|
-
width: 2px; }
|
1779
|
-
|
1780
|
-
|
1781
|
-
### Interpolation
|
1782
|
-
|
1783
|
-
Interpolation has been added. This allows SassScript to be used to
|
1784
|
-
create dynamic properties and selectors. It also cleans up some uses
|
1785
|
-
of dynamic values when dealing with compound properties. Using
|
1786
|
-
interpolation, the result of a SassScript expression can be placed
|
1787
|
-
anywhere:
|
1788
|
-
|
1789
|
-
!x = 1
|
1790
|
-
!d = 3
|
1791
|
-
!property = "border"
|
1792
|
-
div.#{!property}
|
1793
|
-
#{!property}: #{!x + !d}px solid
|
1794
|
-
#{!property}-color: blue
|
1795
|
-
|
1796
|
-
is compiled to:
|
1797
|
-
|
1798
|
-
div.border {
|
1799
|
-
border: 4px solid;
|
1800
|
-
border-color: blue; }
|
1801
|
-
|
1802
|
-
### Sass Functions
|
1803
|
-
|
1804
|
-
SassScript defines some useful functions that are called using the
|
1805
|
-
normal CSS function syntax:
|
1806
|
-
|
1807
|
-
p
|
1808
|
-
color = hsl(0, 100%, 50%)
|
1809
|
-
|
1810
|
-
is compiled to:
|
1811
|
-
|
1812
|
-
#main {
|
1813
|
-
color: #ff0000; }
|
1814
|
-
|
1815
|
-
The following functions are provided: `hsl`, `percentage`, `round`,
|
1816
|
-
`ceil`, `floor`, and `abs`. You can define additional functions in
|
1817
|
-
ruby.
|
1818
|
-
|
1819
|
-
See {Sass::Script::Functions} for more information.
|
1820
|
-
|
1821
|
-
|
1822
|
-
### New Options
|
1823
|
-
|
1824
|
-
#### `:line_comments`
|
1825
|
-
|
1826
|
-
To aid in debugging, You may set the `:line_comments` option to
|
1827
|
-
`true`. This will cause the sass engine to insert a comment before
|
1828
|
-
each selector saying where that selector was defined in your sass
|
1829
|
-
code.
|
1830
|
-
|
1831
|
-
#### `:template_location`
|
1832
|
-
|
1833
|
-
The {Sass::Plugin} `:template_location` option now accepts a hash of
|
1834
|
-
sass paths to corresponding css paths. Please be aware that it is
|
1835
|
-
possible to import sass files between these separate locations -- they
|
1836
|
-
are not isolated from each other.
|
1837
|
-
|
1838
|
-
### Miscellaneous Features
|
1839
|
-
|
1840
|
-
#### `@debug` Directive
|
1841
|
-
|
1842
|
-
The `@debug` directive accepts a SassScript expression and emits the
|
1843
|
-
value of that expression to the terminal (stderr).
|
1844
|
-
|
1845
|
-
Example:
|
1846
|
-
|
1847
|
-
@debug 1px + 2px
|
1848
|
-
|
1849
|
-
During compilation the following will be printed:
|
1850
|
-
|
1851
|
-
Line 1 DEBUG: 3px
|
1852
|
-
|
1853
|
-
#### Ruby 1.9 Support
|
1854
|
-
|
1855
|
-
Sass now fully supports Ruby 1.9.1.
|
1856
|
-
|
1857
|
-
#### Sass Cache
|
1858
|
-
|
1859
|
-
By default, Sass caches compiled templates and
|
1860
|
-
[partials](SASS_REFERENCE.md.html#partials). This dramatically speeds
|
1861
|
-
up re-compilation of large collections of Sass files, and works best
|
1862
|
-
if the Sass templates are split up into separate files that are all
|
1863
|
-
[`@import`](SASS_REFERENCE.md.html#import)ed into one large file.
|
1864
|
-
|
1865
|
-
Without a framework, Sass puts the cached templates in the
|
1866
|
-
`.sass-cache` directory. In Rails and Merb, they go in
|
1867
|
-
`tmp/sass-cache`. The directory can be customized with the
|
1868
|
-
[`:cache_location`](#cache_location-option) option. If you don't want
|
1869
|
-
Sass to use caching at all, set the [`:cache`](#cache-option) option
|
1870
|
-
to `false`.
|