今回はコードの書き方を改善する言語について
書こうと思います。
Haml Sass
ざっくりいうとhtmlとcssをより簡単にわかりやすくしたもの
です。railsでもgemで簡単に導入できます。
Hamlとは
Hamlとは、HTMLよりも簡単に書くためのビューテンプレートエンジンです。
Hamlの記法に従って書くと、より少ない労力でHTMLを書くことができます。
Hamlの導入
まず使用するgemは
gem "haml-rails"
導入したらすでにあるerbファイルを下のコマンドで変換します。
$ rails haml:erb2haml
ただしこれで上手く行かないことも多いの
上手く行かない場合は他のコマンドもお試し下さい。
Sassとは
SassとはCSSの機能を拡張した言語です。Sassを利用することで、CSSを効率的に書けるようになります。
Sassファイル
基本注目点は
- Sassは通常のCSSファイルには記述することができません。
- 反対にSassファイルにCSSを記述することはできます。
- Sassを扱うファイルの拡張子は.sassと.scssの2種類があります。
- どちらもSassのファイルとなりますが記法が大きく異なります。
基本例はこちら
.sass拡張子
.body p
color: #111
font-size: 20px
font-weight: normal
strong
color: red
font-weight: bold
.scss拡張子
こちらだと{}と;の記述が必要になってきます。
.body p {
color: #111;
font-size: 20px;
font-weight: normal;
strong {
color: red;
font-weight: bold;
}
}
sassの便利機能
sassには三つの便利機能があります。
- パーシャル・・・部分テンプレートの要領でコードを分割する。
- 変数・・・色指定など多用する内容の場合、指定して引っ張ってこれる。
- mixin・・・変数のようにスタイルを持って来れます。
パーシャル
パーシャルとは、分割したSassファイルのことです。
パーシャルファイルを作成するには部分テンプレートの要領で
ファイル名を_（アンダースコア）から始めます。
パーシャルファイルを読み込むには、@import ファイル名と記述します。
@import "reset"; /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */
@import "./config/variable"; /* app/config/_variable.scssを読み込む */
変数
Sassでは、変数を使用することができます。
何度も使用する値を変数を定義することで、変数名で何度も使用することができます。
変数を定義するには、$変数名: 値;のように記述します。
$sampleColor: #FFFFFF;
mixin
mixinとは、まとまったスタイルを定義することができる機能です。
変数は値を定義するものでしたが、mixinはスタイルを定義するものです。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。
mixinを定義するには、@mixin mixin名() {}のように記述します。
@mixin sample() {
&:after {
content: '';
display: block;
clear: both;
}
}
&(アンパサンド)は、擬似要素であるafterが適用されているセレクタを指します。
以下の例では、&は.menuに相当します。
つまり、擬似要素afterは、.menuに対して適用されているということです。
このmixinの呼び出しは
@includeを使用して以下のように書きます。
.menu {
@include sam();
...
.menu__list {
float: left;
...
}
}
sample.scssの記述は以下のようなSassコードと同じです。
.menu {
&:after {
content: '';
display: block;
clear: both;
}
.menu__list {
float: left;
...
}
}
sassの導入
Rails3.1より前の場合
RailsでSassを使うにはsass-railsというgemをインストールする必要があります。
Rails3.1以降からデフォルトでインストールされるようになっているため
rails newでプロジェクトを作成すればインストールされます。
app/assets/stylesheets/ に.scssの拡張子て作成すれば使えるようになります。
もっと具体的に書いていくと
1,application.cssは削除し、application.scssを作成します。(.scssになってるならそのまま)
2,コントローラー作成でコントローラー名.scssがすでに作成されている場合
アンダーバーを先頭に付けて、_コントローラー名.scssにファイル名を修正。
3,下記のようにコードを書く
@import "コントローラー名";
4,リセットcssの導入のため
_reset.scssを作成しコードを打ち込む
YUI3などあるがダウンロードして中身を記述
そして3のように記述
@import "コントローラー名";
@import "reset";
Sassを使用する場合のフォルダ構成の例
index.html
HTMLを記述するファイルです。
このファイルに書かれたものが実際にブラウザに表示されます。
style.css
style.cssは、htmlファイルでこのファイルを読み込むことでスタイルを適用させます。
style.cssファイルを直接編集するのではなく、
sassコマンドを実行することでstyle.cssファイルを作成・更新します。
stylesheetsフォルダ
stylesheetsフォルダは、すべてのscssファイルを管理するフォルダです。
scssファイルを追加する場合は、styelsheetsフォルダ内に作成しましょう。
style.scss
このファイルですべてのscssファイルを@importで読み込むことで
一つのsassファイルに統合します。
以下は@importを使用してscssファイルを読み込む例です。
ダウンロードしたプロジェクト内のstyle.scssに以下の記述を追加する必要はありません。
_reset.scss
ブラウザによって初めからcssがそれぞれのhtmlに設定されています。
そのCSSによって、意図しないデザインになってしまうことがあります。
そのようなことを防ぐために、初めにブラウザごとのCSSをすべてリセットします。
このようにブラウザごとのCSSを打ち消すCSSのことをリセットCSSといいます。
有名なリセットファイルは以下のようなものがあります。
- YUI 3
- Eric Meyer’s
- HTML5 Doctor
- normalize.css
configフォルダ
configフォルダは、プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理するフォルダです。
mixinフォルダ
mixinフォルダは、scss内で使用するmixinファイルを管理するフォルダです。
modulesフォルダ
modulesフォルダはモジュールを管理するためのフォルダです。
モジュールとは、いくつかの要素をまとめた部品の集合という意味です。
ヘッダー、フッターのような用途ごとに分けることができます。
モジュールを使うことでまとまったCSSを独立したものとして管理することができます。
vendorフォルダ
vendorフォルダは、ライブラリのファイルを管理するフォルダです。
cssにはライブラリと呼ばれるものがあります。
ライブラリとはあらかじめCSSが書かれたファイルです。
有名なCSSのライブラリでは、bootstrapがあげられます。
ライブラリを効率よく利用することで、コーディングのスピードが格段に上がります。
overrideフォルダ
overrideフォルダは、vendorフォルダに格納してある外部のライブラリを上書きするためのscssファイルを管理するフォルダです。