Sass 3.3 が リリースされました

2014年3月8日 Natalie Weizenbaum 投稿

多数のリリース候補版でのバグ修正を経て、ついに Sass 3.3.0、コードネーム Maptastic Maple を一般公開する準備が整いました。このリリースには、チェンジログに詳しく記載されているエキサイティングな新機能がたくさんありますが、特に注目していただきたい点が3つあります。

SassScriptのマップSassScriptのマップ パーマリンク

言語設計者として、私たちの仕事のほとんどは、ユーザーからのフィードバックを聞き、それに基づいて行動することです。これは、見た目以上に難しいことです。ユーザーは自分が達成したいことを正確に知っていますが、それが全体像の中でどのように位置づけられるかについては、あまり意識していない傾向があります。そこで、私たちは大量のユーザーリクエストを受け取り、満たされていないコアなニーズを抽出し、できるだけシンプルにそれらのニーズをできるだけ多く満たすことができる機能を生み出すことができるか検討します。

SassScriptのマップは、この良い例です。多くのユーザーが、変数補間のようなものを要求しており、例えば$#{$theme-name}-background-colorのようなものを書けるようにしたいと考えていました。また、ペアのリストを扱う組み込み関数や、関数に渡された変数の名前を取得する方法を求めるユーザーもいました。最終的に、人々が実際に求めている根本的な機能は、値と 名前を関連付ける方法であることに気づきました。

ほとんどのプログラミング言語には、"キー"オブジェクトから "値"オブジェクトへの関連付けであるマップ[1]の概念があります。Sass 3.3 では、これらを第一級のデータ構造としてサポートします。構文は、@mediaクエリで使用されるものと非常によく似るように設計されています。次のようになります。

$map: (key1: value1, key2: value2, key3: value3);

リストとは異なり、マップは常に括弧で囲む必要があります。以前は空のリストを参照していた()は、空のマップも参照するようになりました。リストとマップの両方の操作が可能です。

マップは有効なCSS構文ではないため、CSSの値として使用することはできません。ただし、ユーザー定義のmixinや関数で使用できる新しい組み込み関数が多数あります。特に便利なものをいくつか紹介します。

  • map-get($map, $key) は、キーを使用してマップ内の値を検索します。たとえば、上記の例を使用すると、map-get($map, key2) は value2 を返します。

  • map-merge($map1, $map2) は、2つのマップをマージします。$map2のキーは$map1のキーを上書きするため、マップに値を追加するのにも適しています。たとえば、map-merge($map, (key1: new-value)) は (key1: new-value, key2: value2, key3: value3) を返します。

  • map-remove($map, $key) は、マップ内の値を削除します。たとえば、map-remove($map, $key) は (key: value2, key3: value3) を返します。

新しいマップ関数に加えて、既存のすべてのリスト関数もマップで動作します。リスト関数は、各マップをペアのリストとして認識します。たとえば、nth($map, 1) は (key1 value1) を返します。それだけでなく、@each には、マップとペアのリストの両方を操作するための新しい構文があります。例として

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

は次を生成します

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

ソースマップソースマップ パーマリンク

マップのテーマを継続すると、Sass 3.3 には、CSSにコンパイルする際にソースマップを生成するサポートが付属しています。ソースマップは、ブラウザが消費するファイルがどのように生成されたかをブラウザに伝えるための標準形式です。Sassの場合、これは、ブラウザの開発ツールが、各スタイルルールがSassソースファイルのどの行から来たかを正確に伝えることができるようになったことを意味します。現在、これはChromeでしか十分にサポートされていませんが、他のブラウザでもすぐにサポートされることを願っています。

コマンドラインからSassをコンパイルする場合、ソースマップを生成するために必要なのは、--sourcemapフラグを渡すことだけです。Sassは、生成された.cssファイルの隣に.css.mapファイルを自動的に生成します。あとは、.scssまたは.sassファイルがブラウザに表示されるようにするだけで、準備完了です。

より柔軟な&より柔軟な& パーマリンク

Sass 3.0をリリースしたとき、SCSSのサポートを追加しました。つまり、ドキュメント内のすべてのセレクターを実際に解析する必要がありました。これは、親セレクター&をセレクターの任意の場所に配置できないことを意味していました。全体的に、これは改善でした。より多くのエラーをキャッチし、ユーザーに柔軟性の高い mixinを記述することを促しました。

残念ながら、これは1つの重要なユースケースをより困難にしました。BEM、OOCSS、SMACSSの普及に伴い、人々はクラスにサフィックスを追加することにますます関心を持つようになりました。Sassを使用するとき、彼らはこれを行うためのmixinを書きたいと思っていましたが、&の制限により、それが非常に困難になりました。

Sass 3.3では、これらの制限を緩和しています。&-suffix（または&_suffix、または本当に必要な場合は&suffixでも）と記述できるようになり、Sassがそれを機能させます。これが適用できない場合（たとえば、&が*の場合）、Sassは役立つエラー メッセージを出力します。

非推奨: 変数スコープと!global非推奨: 変数スコープと!global パーマリンク

私たちは常にすべてを最初に正しく行うことができるわけではなく、Sassを最高の言語にするために、古い動作を変更する必要がある場合があります。場合によっては、既存のスタイルシートが機能しなくなる可能性があるため、将来変更されるスタイルシートに対して警告を表示するポリシーがあります。

Sass 3.3では、多くの非推奨が追加されていますが、最も大きな変更は、変数スコープの動作に関するものです。これまで、Sassの関数、mixin、またはCSSルールで$var: valueを記述した場合、2つのことを行うことができました。$varという名前のグローバル変数がある場合、その変数を上書きします。それ以外の場合は、現在の波括弧のセット内でのみ表示されるローカル変数を 作成します。

これは非常に大きな問題でした。特定の変数代入が、存在することを知る由もない変数を変更している可能性があるからです。私たちは、ローカルスコープで変数に代入しても、代入が明示的にそうするように指示しない限り、グローバル変数を上書きしない、より良いシステムに移行したいと考えています。例えば$var: value !globalのように。

既存のスタイルシートが壊れるのを避けるために、まだこの変更を行っていません。代わりに、ローカル宣言によってグローバル変数が上書きされた場合、ユーザーに!globalを追加することを提案する非推奨警告が表示されるようになりました。今のところ、!globalは警告を消すこと以外にはあまり機能しませんが、将来のリリースでは、私が説明したとおりに動作するように なります。

以上です以上です パーマリンク

実際には、もっとたくさんありますが、この投稿にはすべてを記述するスペースがありません。新機能の全容を確認したい場合は、チェンジログを確認してください。SassMeisterで新機能を試したり、gem update sassを実行して自分のコンピューターで試したりすることもできます。お楽しみください！

  1. 一部の言語では、それらを「ハッシュ」、「辞書」、または「連想配列」と呼んでいます。JavaScriptでは、奇妙な歴史的理由から「オブジェクト」と呼んでいます。↩︎