Sassのインストールの基本と基本

この記事では、SassまたはCSSと呼ばれるCSSプリプロセッサについて説明します。 文法的に素晴らしいスタイルシート.

あなたがLESSに関するこれまでの投稿をフォローしているのであれば、あなたはに精通していると確信しています。 CSSプリプロセッサ. SassとLESSはどちらもCSSプリプロセッサで、主に変数、ミックスイン、関数などのプログラミング言語を使用してプレーンスタティックCSSの作成方法をより動的に拡張します。.

Sassをインストールする

Sassを作成する前に、インストールする必要があります. SassはRuby上に構築されています. もしあなたがMacで作業しているのであれば、あなたはすでにRubyをインストールしているでしょう。 WindowsにRubyをインストールする場合は、このRubyインストーラを使用してください。.

インストールが完了したら、ターミナル（Macの場合）またはコマンドプロンプト（Windowsの場合）に移動して、そこに次のコマンドラインを入力します。

Macの場合;

 sudo gem install sass

Windowsの場合;

 宝石インストールsass

インストールが成功すると、ターミナル/コマンドプロンプトに次のように通知されます。.

次に、次のコマンドを使用してSassがどのディレクトリを監視するかを選択する必要があります。

 sass  - 監視パス/ sassディレクトリ

上記のコマンドラインは毎回監視します。 .scss/.セス のファイル パス/ディレクトリ そのディレクトリ内のファイルのいずれかが変更されると、Sassは対応するファイルを更新するか、存在しない場合はそれを作成します。.

Sassが特定のディレクトリにファイルを生成する必要がある場合は、この方法で実行できます。

 sass  - 監視パス/ sass-directory：パス/ css-directory

このコマンドラインで、ディレクトリではなく特定のファイルを見ることもできます。

 sass  - 監視パス/ sass-directory / styles.css

watchコマンドが成功すると、以下のような通知がターミナル/コマンドプロンプトに表示されます。.

参考文献：Sass 3を使用してSassファイルを自動コンパイルする

Sassアプリケーション

ただし、ターミナルまたはコマンドプロンプトで作業するのが嫌な場合は、Sass用のアプリケーションをいくつか使用できます。無料のオプションはスカウトです。 Adobe Air上に構築されているため、すべてのOS（Windows、OSX、およびLinux）で実行できます。.

ただし、以前に報告されているように、実行は非常に遅くなります。.

あなたがそれに忍耐力を持っていないのであれば、いくつかの有料オプションもあります。価格はアプリごとに異なり、Compass.appは10ドル、Fire.appは14ドル、Codekitは25ドルです。.

コードの強調表示

Sassは主にCSSの拡張機能ですが、現在のエディタでは構文が正しく強調表示されない場合があります。幸い、ほぼすべてのコードエディタを有効にするためのパッケージがすでにいくつかあります。 .セス または .scss コードの強調表示.

私のようにSublime Text 2を使用している場合は、これらのパッケージを使用できます。 Sublime Text HAML＆SassとSublime Text 2 Sass Package、そしてもっと簡単な方法のために、あなたはPackage Controlを通してこれらのパッケージの一つをインストールすることができます。.

他のコードエディタについては、下記を参照するか、またはGooglingを試してください。.

これは、Dreamweaverを使用してSassで作業する際の素晴らしいスクリーンキャストチュートリアルです。
コーダのためのSassモード。しかし、このモードはバージョン2の時点でCodaと統合されているようです
TextMateオフィシャルSCSSバンドル
エスプレッソシュガー
InTypeバンドル

セス言語

SassとLESSは実際にはいくつかの共通言語を共有しています。以下にそのうちのいくつかを示します。.

変数

 $ color-base：＃000; $幅：100ピクセル。

LESS変数との唯一の違いは、Sassの変数が次のように定義されていることです。 $ 符号.

入れ子の規則

 ヘッダー幅：980ピクセル;高さ：80ピクセル。 nav ul リストスタイル：なし;パディング：なし。マージン：なし。  li display：inline; テキスト装飾：なし。

ミックスインと関数

 @mixin border-radius（$ radius）-moz-border-radius：$ radius; -webkit-border-radius：$ radius; -ms-border-radius：$ radius; border-radius：$ radius;

オペレーション

 li width：$ width / 5  -  10px;

条件付きステートメント

 明度（$色ベース）> = 51％背景色：＃333333; background-color：#ffffff;

LESSでは、このチュートリアルで取り上げたGuard式を介して同様のことを実行できます。.

最終的な考え

以上です。次の記事では、Sass言語とそのコンパニオンであるCompassの調査を開始します。乞うご期待.