提供: tty00

移動: 案内、検索
(ページの作成:「== インストール == SassのインストールにはRubyが必要。 SassはRubyGemsからインストールする。 gem install sass パーミッションエラ...」)
 
(→‎コマンド)
 
(同じ利用者による、間の6版が非表示)
行1: 行1:
 +
== はじめに ==
 +
[http://sass-lang.com/ Sass](Syntactically Awesome Stylesheets)はCSS(cascading stylesheets)のメタ言語。Sassは変数、インポート、ミックスイン、拡張／継承やオペレータ／演算子などを利用できます。Sassファイル(拡張子:*.scss)を作成し、コンパイルするとCSSファイルを生成できます。
 +
 
== インストール ==
 
== インストール ==
−
SassのインストールにはRubyが必要。
+
SassはRubyで実装されています。インストールにはRubyが必要です。
  
  
−
SassはRubyGemsからインストールする。
+
SassはRubyGemsからインストールします。
 
  gem install sass
 
  gem install sass
  
行14: 行17:
 
== Sassの使い方 ==
 
== Sassの使い方 ==
 
=== 開発の流れ ===
 
=== 開発の流れ ===
−
* 拡張子を*.scssとして、Sassファイルを作成する。
+
* 拡張子を*.scssとし、Sassファイルを作成する。
 
* Sassファイルをsassコマンドを使用しコンパイルする。
 
* Sassファイルをsassコマンドを使用しコンパイルする。
 
* SassファイルからCSSファイルが生成される。
 
* SassファイルからCSSファイルが生成される。
行20: 行23:
 
=== コマンド ===
 
=== コマンド ===
 
'''SassファイルをCSSファイルにコンパイルする'''
 
'''SassファイルをCSSファイルにコンパイルする'''
 +
 
  sass input.scss output.css
 
  sass input.scss output.css
  
−
'''"--watch"オプションを指定すると、Sassファイルが更新されたときCSSファイルをコンパイルする'''
+
'''ファイルの更新を監視する'''
 +
 
 +
"--watch"オプションを指定すると、Sassファイルが更新されたときCSSファイルを自動的にコンパイルする。
 
  sass --watch input.scss:output.css
 
  sass --watch input.scss:output.css
 +
 +
'''ディレクトリ内のSassファイル監視する'''
 +
 +
ディレクトリ内のSassファイルが更新されたときCSSファイルを自動的にコンパイルする。
 +
sass --watch <Sassファイルが格納されているディレクトリ>:<CSSファイルを出力するディレクトリ>
  
 
== 変数 ==
 
== 変数 ==

2013年12月27日 (金) 02:04時点における最新版

はじめに

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

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

"--watch"オプションを指定すると、Sassファイルが更新されたときCSSファイルを自動的にコンパイルする。 

sass --watch input.scss:output.css

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

ディレクトリ内のSassファイルが更新されたときCSSファイルを自動的にコンパイルする。 

sass --watch <Sassファイルが格納されているディレクトリ>:<CSSファイルを出力するディレクトリ>

変数

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

/* 変数 */
$my-font:sans-serif;
$my-color:red;
 
body{
    background-color: $my-color;
    font: $my-font;
}

セレクタのネスト

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

Sass 

nav{
    ul{
        margin: 0;
        padding: 0;
    }
 
    li{display: inline-block}
 
    a{
        display: block;
        padding: 6px 12px;
    }
}

Sassから生成されたCSS 

nav ul {
  margin: 0;
  padding: 0; }
 
nav li {
  display: inline-block; }
 
nav a {
  display: block;
  padding: 6px 12px; }

インポート

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


Sass 

/* base.scss */
@import 'inc';
 
body{
    background-color: $my-color;
    font: $my-font;
}


/* inc.scss */
$my-font:sans-serif;
$my-color:red;

Sassから生成されたCSS 

body {
  background-color: red;
  font: sans-serif; }

ミックスインとインクルード

"@mixin"を使用すると、スタイルをまとめて宣言できます。

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

Sass 

/* @mixin"でスタイルを定義 */
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
 
/* @include"でスタイルを呼び出す */
.box { @include border-radius(10px); }

Sassから生成されたCSS 

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }

拡張/継承

"@extend"をスタイルを拡張したり、継承できます。

Sass 

.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;
}

Sassから生成されたCSS 

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }
 
.success {
  border-color: green; }
 
.error {
  border-color: red; }
 
.warning {
  border-color: yellow; }

オペレータ/演算子

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

Sass 

$x:40px;
$y:60px;
 
.box{
    height: 600px / 960px * 100%;
    width: $x + $y;
    float: 200px+50px;
 
}

Sassから生成されたCSS 

.box {
  height: 62.5%;
  width: 100px;
  float: 250px; }
「http://oops.x0.com/tty/index.php?title=Sass_クイックリファレンス&oldid=93」から取得