Sass 2.2.0 の Changelog を日本語に訳してみた

間違ってたらごめんなさい＞＜

Sass 2.2.0 が出た事ですし、変更点が File: SASS_CHANGELOG に記載されていますから、そこを翻訳してみようと思います。
違っている部分等がありましたら、ご指摘お願いします。英語は苦手なので Excite翻訳だよりです＞＜

2.2.0

Sass 2.2.0 は意義のある発展を遂げた。焦点として、新しい抽象化機構及び import や download により高いメンテナンス性を発揮できるでしょう。

Must Read!（とりあえず読め！）

Sass コメント

Sass のみのコメント文*1 は、単に先頭の / 以降を読み飛ばしていただけである。この仕様 2.0.10 で廃止され、 2.2.0 より開始されることとなっている。また、 Sass コメントはコメント行以降でインデントされている場合、それらもコメントと認識する事でしょう。
この変更の影響を確認するために、2.0.10 にアップグレードしてください。
（訳注：うーん、gem で 2.0.10 が無いので確認できてないのですけど、 / コメントの次のインデントがコメント扱いになるのって、2.0.9 でも 2.2.0 でも同じ動きなんですよね。自分が意味をはき違えてるのかな？）

implement

Implicit Strings （以下でいう solid 等の CSS リテラル *2）は 2.4 で廃止される予定になっています。

border= !width solid #00F

のような記述は以下のように記述されるべきです。
border: の形の場合は変数は #{} で記述し、CSS リテラルは直接記述できます。

border: #{!width} solid #00F

または、以下のように border = の形であれば CSS リテラルを " でくくるように記述します。

border= !width "solid" #00F

Implicit Strings を使用している場合、 2.2.0 より警告が発生します。

Sass Syntax Changes

Flexible Indentation（柔軟なインデント）

現在の Sass Document は柔軟なインデントです。一番最初に見つけたインデント幅をドキュメント内で使用されるインデントスタイルとして認識します。ただし、Tabとスペースの混在はよきに計らえません。
そのため、あなたはインデントとして、 Tab か任意の数スペースのどちらかを選択することができます。

Multiline Sass Comments（複数行コメント）

なにがどう変わったかわかんね／(^o^)＼
ある Sass 構文の最後にコメントアウトした場合に警告がでるようになったということ？？

border= !width "solid" #00F // ここのコメントで警告がでるようになった

Mixin Arguments（Mixin の引数）

Sass では、 Mixin に複数の引数を許容できます。複数の引数を定義する場合、カンマで区切って定義する必要があります。

=my-mixin(!arg1, !arg2, !arg3)

従来と同じく、Mixin の宣言の後に、インデントをすることで内容*3を記載することができます。
引数は Mixin の呼び出し時の値になります。また、引数にはデフォルト値を設定することが可能です。

=my-mixin(!arg1, !arg2 = 1px, !arg3 = blue)

この例では、上記の Mixin が呼び出され、実行されます。引数の数は 1 つでも、 2 つでも、 3 つでも同じ Mixin を呼び出す事になります。

div.foo
  +my-mixin(1em, 3px)

Mixin の引数を省略する事も可能です。その際、丸カッコは省略可能となります。
また、Mixin を呼び出すタイミングで Mixin のデフォルト引数に指定されたグローバル変数（!default_width）を参照します。また、宣言時に前に定義された変数を使用する事も可能となります（!height = !width の部分）。
実際に Sass Script の例を記載すると、以下のようになります。

!default_width = 30px
=my-fancy-mixin(!width = !default_width, !height = !width)
  width= !width
  height= !height

.default-box
  +my-fancy-mixin

.square-box
  +my-fancy-mixin(50px)

.rectangle-box
  +my-fancy-mixin(25px, 75px)

!default_width = 10px
.small-default-box
  +my-fancy-mixin

それが、こーなる

.default-box {
  width: 30px;
  height: 30px; }

.square-box {
  width: 50px;
  height: 50px; }

.rectangle-box {
  width: 25px;
  height: 75px; }

.small-default-box {
  width: 10px;
  height: 10px; }

Sass Interactive（Sass の対話型シェル）

sass のコマンドラインオプションとして -i を使用すると、対話型に Sass Script を実行することができます。入力された式の値を改行後に出力します。*4。

$ sass -i
>> 5px
5px
>> 5px + 10px
15px
>> !five_pixels = 5px
5px
>> !five_pixels + 10px
15px

SassScript

SassScript の特徴として、新しい制御ディレクティブ、新しい基本データ型、及び変数スコープがあります。

New Data Types（新しいデータ型）

SassScript には 4 つのデータ型が存在します。

Number
String
Boolean (New in 2.2)
Colors

More Flexible Numbers（より柔軟な数値の扱い）

Sass は大きな数値をサポートしています。が、今ではそれらをより深く理解しています。許容される単位は、以下のようになっています（最後の例の 2foo は、つまり単位の部分はなんでもOKということを現している。例えば。 2bar とかでも許容される）。

0, 1000, 6%, -2px, 5pc, 20em, or 2foo.

同じ単位での演算は + と - が使用できます。数値は Sass が理解できている単位の場合、単位が違っても最初の数値の単位をベースに計算することができます。ただし、比較できない単位同士での演算はエラーが発生します。
なお、単位のない数値と単位のある数値の演算の場合は単純に数値同士の演算を行います。

>> 3mm + 4cm
43mm
>> 4cm + 3mm
4.3cm
>> 3cm + 2in
8.08cm
>> 5foo + 6foo
11foo
>> 4% + 5px
SyntaxError: Incompatible units: 'px' and '%'.
>> 5 + 10px
15px

Sass の対話型シェルでは単位が中間形式で表示されるが、このような形式のまま CSS ファイルに変換する際にはエラーとなります*5。

>> !em_ratio = 1em / 16px
0.063em/px
>> !em_ratio * 32px
2em
>> !em_ratio * 40px
2.5em

Colors

色の値として、色名、16進数（6桁と3桁表記）を使用することができます。 RGB 関数、及び hsl 関数を用いる事でも色を指定することが可能です。また、色に名前がついていれば名前を、そうでなければ 16 進数を CSS の値として出力します。

> #fff
white
>> white
white
>> #FFFFFF
white
>> hsl(180, 100, 100)
white
>> rgb(255, 255, 255)
white
>> #AAA
#aaaaaa

色を現すオブジェクトは rgb のコンポーネントによって現されています。しかし、これらの操作はほぼ使用しないでしょう（大抵はグレースケールを扱う時に使用することになるでしょう）。

>> #aaa + #123
#bbccdd
>> #333 * 2
#666666

Booleans

Boolean は比較演算子を使用することで ture と false のキーワードで作成することができます。
Boolean の組み合わせとして、 and, or, not をキーワードとして使用することができます。

>> true
true
>> true and false
false
>> 5 < 10
true
>> not (5 < 10)
false
>> not (5 < 10) or not (10 < 5)
true
>> 30mm == 3cm
true
>> 1px == 1em
false

Strings

SassScript 内では、 Unicode による文字コードのエスケープを許容しています。

Control Directives

SassScript 内で条件分岐やループ処理が可能となります。詳しくは File: SASS_REFERENCE を参照してください。

@for

指定した、開始の値からループを開始し、終端の値まで繰り返します。その際、終端の値を含みます。

@for !x from 1px through 5px
  .border-#{!x}
    border-width= !x

こーなる

.border-1px {
  border-width: 1px; }

.border-2px {
  border-width: 2px; }

.border-3px {
  border-width: 3px; }

.border-4px {
  border-width: 4px; }

.border-5px {
  border-width: 5px; }

@if / @else if / @else

@if, @else if, @else の構文が使用できます。以下のようにして使用できます。

!type = "monster"
p
  @if !type == "ocean"
    color: blue
  @else if !type == "matador"
    color: red
  @else if !type == "monster"
    color: green
  @else
    color: black

こーなる

p {
  color: green; }

@while

特定の状態まで処理を繰り返します。以下のように使用できます。

!i = 6
@while !i > 0
  .item-#{!i}
    width = 2em * !i
  !i = !i - 2

こーなる

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

Variable Scoping

変数にはスコープが与えられている。そのため、あるインデント内で宣言した変数はそのインデントが終了するまでが有効な範囲となる。
以下の例では .bar 内で変数を宣言しているため、その他の要素からは隠蔽されます。

.foo
  .bar
    !local_var = 1px
    width= !local_var
  .baz
    // this will raise an undefined variable error.（ undefined variable なエラーになるよ）
    width= !local_var
  // as will this（ここも）
  width= !local_var

以下の例のように、 !global_var を高いスコープで宣言してる場合はすげてのスコープ内で共有されます。

!global_var = 1px
.foo
  .bar
    !global_var = 2px
    width= !global_var
  .baz
    width= !global_var
  width= !global_var

こーなる

.foo {
  width: 2px; }
  .foo .bar {
    width: 2px; }
  .foo .baz {
    width: 2px; }

Interpolation（内挿）

SassScript内でセレクタやプロパティ等を指定する際に使用される事を許可しています。
この機能を用いる事でSassScript をきれいに記載することができます。

!x = 1
!d = 3
!property = "border"
div.#{!property}
  #{!property}: #{!x + !d}px solid
  #{!property}-color: blue

こーなる

div.border {
  border: 4px solid;
  border-color: blue; }

Sass Functions

SassScript では、いくつかの便利な関数を提供しています。

p
  color = hsl(0, 100%, 50%)

こーなる

#main {
  color: #ff0000; }

Sass では以下の関数を提供しています。

hsl
percentage
round
ceil
floor
abs

その他の独自関数を、Ruby で定義することも可能です。
詳細は Module: Sass::Script::Functions を参照下さい。

New Options（追加されたオプション）

（訳注）以下に記載されているのは、Ruby スクリプトとして Sass を使用した場合に使用できるオプションであって、 sass コマンドを実行する際に有効なオプションではない（:line_comments とかは引数からでも使えますけど）

:line_comments

このオプション指定する（または true にする）ことで、デバッグ時の支援することができます。CSSへ変換した際に、元の Sass コードの行数等をコメントとして出力します。

:template_location

ごめ、よくわかんね／(^o^)＼

Miscellaneous Features（その他の特徴）

@debug Directive

@debug に続いて SassScript を記載すると、 STDERR にその値を出力します。

@debug 1px + 2px

以下のように出力されます

Line 1 DEBUG: 3px

Ruby 1.9 Support

Ruby 1.9.1 を完全にサポートしています。

Sass Cache

デフォルトではコンパイル済みの templates 及び partials（File: SASS_REFERENCE）をキャッシュします。
だめだ、ここもよくわかんね／(^o^)＼
多分、sass コマンドで使うのではなく動的に生成している時に*6 Cashe を使うとか、そーいう話だと思うんだが。。。

というわけで

ひどい訳（というか、諦めたの多すぎ）ですけど、新機能の理解に役立てれば幸いです。また、訳がおかしい等があればご指摘頂けると嬉しいです。

*1://

*2:だと思う・・・

*3:Mixinの定義

*4:訳注:どうも、Mixin の定義等はできないようです。できるのは変数の定義や演算くらいか？

*5:足し算とか引き算なら大丈夫なんですけどね

*6:Rails 等で使う時に

すがブロ

sugamasaoのhatenablogだよ

Sass 2.2.0 の Changelog を日本語に訳してみた

間違ってたらごめんなさい＞＜

2.2.0

Must Read!（とりあえず読め！）

Sass コメント

implement

Sass Syntax Changes

Flexible Indentation（柔軟なインデント）

Multiline Sass Comments（複数行コメント）

Mixin Arguments（Mixin の引数）

Sass Interactive（Sass の対話型シェル）

SassScript

New Data Types（新しいデータ型）

More Flexible Numbers（より柔軟な数値の扱い）

Colors

Booleans

Strings

Control Directives

@for

@if / @else if / @else

@while

Variable Scoping

Interpolation（内挿）

Sass Functions

New Options（追加されたオプション）

:line_comments

:template_location

Miscellaneous Features（その他の特徴）

@debug Directive

Ruby 1.9 Support

Sass Cache

というわけで