<?xml version="1.0"?>
<api>
  <query-continue>
    <allpages gapcontinue="Scala_クイックリファレンス" />
  </query-continue>
  <query>
    <pages>
      <page pageid="6" ns="0" title="Sass クイックリファレンス">
        <revisions>
          <rev contentformat="text/x-wiki" contentmodel="wikitext" xml:space="preserve">== はじめに ==
[http://sass-lang.com/ Sass](Syntactically Awesome Stylesheets)はCSS(cascading stylesheets)のメタ言語。Sassは変数、インポート、ミックスイン、拡張／継承やオペレータ／演算子などを利用できます。Sassファイル(拡張子:*.scss)を作成し、コンパイルするとCSSファイルを生成できます。

== インストール ==
SassはRubyで実装されています。インストールにはRubyが必要です。


SassはRubyGemsからインストールします。
 gem install sass

パーミッションエラーが出るときは
 sudo gem install sass

動作確認
 sass -v

== Sassの使い方 ==
=== 開発の流れ ===
* 拡張子を*.scssとし、Sassファイルを作成する。
* Sassファイルをsassコマンドを使用しコンパイルする。
* SassファイルからCSSファイルが生成される。

=== コマンド ===
'''SassファイルをCSSファイルにコンパイルする'''

 sass input.scss output.css

'''ファイルの更新を監視する'''

&quot;--watch&quot;オプションを指定すると、Sassファイルが更新されたときCSSファイルを自動的にコンパイルする。
 sass --watch input.scss:output.css

'''ディレクトリ内のSassファイル監視する'''

ディレクトリ内のSassファイルが更新されたときCSSファイルを自動的にコンパイルする。
 sass --watch &lt;Sassファイルが格納されているディレクトリ&gt;:&lt;CSSファイルを出力するディレクトリ&gt;

== 変数 ==
変数を利用して色やフォントなどのスタイルを指定できます。&quot;$&quot;で始まるシンボルは変数になります。

&lt;source lang=css&gt;
/* 変数 */
$my-font:sans-serif;
$my-color:red;

body{
    background-color: $my-color;
    font: $my-font;
}
&lt;/source&gt;

== セレクタのネスト ==
Sassではセレクタをネストできます。

'''Sass'''
&lt;source lang=css&gt;
nav{
    ul{
        margin: 0;
        padding: 0;
    }
    
    li{display: inline-block}
    
    a{
        display: block;
        padding: 6px 12px;
    }
}
&lt;/source&gt;

'''Sassから生成されたCSS'''
&lt;source lang=css&gt;

nav ul {
  margin: 0;
  padding: 0; }

nav li {
  display: inline-block; }

nav a {
  display: block;
  padding: 6px 12px; }
&lt;/source&gt;

== インポート ==
&quot;@import&quot;を使用すると、外部のSassファイルをインポートできます。


'''Sass'''
&lt;source lang=css&gt;
/* base.scss */
@import 'inc';

body{
    background-color: $my-color;
    font: $my-font;
}

&lt;/source&gt;


&lt;source lang=css&gt;
/* inc.scss */
$my-font:sans-serif;
$my-color:red;
&lt;/source&gt;

'''Sassから生成されたCSS'''
&lt;source lang=css&gt;
body {
  background-color: red;
  font: sans-serif; }
&lt;/source&gt;

== ミックスインとインクルード ==
&quot;@mixin&quot;を使用すると、スタイルをまとめて宣言できます。

&quot;@mixin&quot;でスタイルを定義し、&quot;@include&quot;でスタイルを呼び出します。

'''Sass'''
&lt;source lang=css&gt;
/* @mixin&quot;でスタイルを定義 */
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

/* @include&quot;でスタイルを呼び出す */
.box { @include border-radius(10px); }
&lt;/source&gt;

'''Sassから生成されたCSS'''
&lt;source lang=css&gt;
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }
&lt;/source&gt;

== 拡張/継承 ==
&quot;@extend&quot;をスタイルを拡張したり、継承できます。

'''Sass'''
&lt;source lang=css&gt;
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}
&lt;/source&gt;

'''Sassから生成されたCSS'''
&lt;source lang=css&gt;
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

.error {
  border-color: red; }

.warning {
  border-color: yellow; }
&lt;/source&gt;

== オペレータ/演算子 ==
+、-、*、/や%などのオペレータ/演算子を使用できます。

'''Sass'''
&lt;source lang =css&gt;
$x:40px;
$y:60px;

.box{
    height: 600px / 960px * 100%;
    width: $x + $y;
    float: 200px+50px;
    
}
&lt;/source&gt;

'''Sassから生成されたCSS'''
&lt;source lang =css&gt;
.box {
  height: 62.5%;
  width: 100px;
  float: 250px; }
&lt;/source&gt;</rev>
        </revisions>
      </page>
      <page pageid="28" ns="0" title="Sbt/Scala">
        <revisions>
          <rev contentformat="text/x-wiki" contentmodel="wikitext" xml:space="preserve">== build.sbt ==
=== libraryDependencies ===
==== 最新のリビジョンを指定する ====
revisionに&quot;latest.release&quot;を指定する[http://ant.apache.org/ivy/history/latest-milestone/settings/version-matchers.html]
&lt;pre&gt;
libraryDependencies += groupID % artifactID % &quot;latest.release&quot;
&lt;/pre&gt;

==== 複数のライブラリを指定する ====
&lt;pre&gt;
libraryDependencies ++= Seq(
 libraryDependencies += groupID % artifactID % revision,
 libraryDependencies += groupID % artifactID % revision,
 libraryDependencies += groupID % artifactID % revision
)
&lt;/pre&gt;

[[Category:Scala]]</rev>
        </revisions>
      </page>
    </pages>
  </query>
</api>