アラサーなめたらいけません、
同僚からもらったSK-Ⅱのパックでもしようかと思います。
ちょっと落ち着いて、いったん記法について覚えましょう。
話はそれからです。
hamlの記法
Doctype
公式ドキュメントで「When the :format option is set to :html4, the following doctypes are supported:」と書いてる、
コレ試したいんですができなかった。
こうして自分の頭の悪さをちょこちょこ確認することで心が折れてゆく。
私の環境ではデフォルトxhtmlにセットされていました。
=====> haml
/ html5
!!! 5
/ XHTML 1.0 Transitional
!!!
=====> html
<!-- html5 -->
<!DOCTYPE html>
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
コメント
上のDoctypeのところでちょろっと書いちゃったんですが、コメントはスラッシュです。
また、hamlにだけコメントしてhtml出力時は表示しないみたいのは-#と書く。
=====> haml
/ sample comment
/
<div class="sample">
<p>I'm very poor!!!!!!!!!!!!!!!!</p>
</div>
/ comment 01
-# haml comment
/ comment 02
=====> html
<!-- sample comment -->
<!--
<div class="sample">
<p>I'm very poor!!!!!!!!!!!!!!!!</p>
</div>
-->
/ comment 01
/ comment 02
html要素
%の後に要素を書きまスネ、属性値は{}や()で記述しまスネ。
classやidはドットとかシャープで書いてもいいみたいでス！
=====> haml
%div
%p sample text
%div{:class => "sampleClass"}
%a(title="sample title" href="http://sample.com/") sample
%div.sampleClass
%p#sampleId sample
=====> html
<div>
<p>sample text</p>
</div>
<div class="sampleClass">
<a title="sample title" href="http://sample.com/"<sample</a>
</div>
<div class="sampleClass">
<p id="sampleId">sample</p>
</div>
評価・計算結果の代入
評価や計算結果の代入は=で行いますが、この=は別になんでもないようなテキストの代入にも使える。
=====> haml
/ 文字列連結
%p.sample01
= ["I", "am", "very", "poor"].join ""
- marimo = "I am"
- marimo << " very"
- marimo << " poor"
%p.sample02= marimo
/ エスケープ
%p
&= "I am very poor & very poor"
=====> html
<!-- 文字列連結 -->
<p class="sample01">I am very poor</p>
<p class="sample02">I am very poor</p>
<!-- エスケープ -->
<p>I am very poor & very poor</p>
他にも公式見るといろいろあるんだけど、なんか使えなかったりする。
使えないっていうのは言い訳で、使い方わかんないっていう感じなんだよねー！！！
sassの記法
基本
基本的な記法です、括弧とセミコロンがなくなっていてきれいですね！
ネストしたらセレクタであれば子要素扱い・プロパティもいい感じに展開なりますし、
&をつかうと親のセレクタを展開してくれます。
=====> sass
selector
property: value
font:
family: serif
weight: bold
selector
property: value
&:hover
property: value
=====> css
selector {
property: value;
font-family: serif;
font-weight: bold;
}
selector selector {
property: value;
}
selector:hover {
property: value;
}
変数・演算もできる
変数が使えるのでいちいちgrepとかしなくていいですよ！
しかもその変数を演算したりできるのでなにかに使えるといいですね。
=====> sass
$sample: 10px
selector
padding: $sample / 2
margin: $sample / 2
=====> css
selector {
padding: 5px;
margin: 5px;
}
関数を利用する
デフォルトの関数がたくさんあって、それを使うこともできる。
sassの関数一覧ページを見るとたくさんある。
・数値取り扱い系
=====> sass・色を変える
selector
# 絶対値を取得
margin: abs(10px) abs(-5px)
# 繰り上げ
padding: ciel(9.3px)
# 繰り下げ
border: floor(1.6px) solid
# 四捨五入
height: round(100.4px)
width: round(99.8px)
=====> css
selector {
margin: 10px 5px;
padding: 10px;
border: 1px solid;
height: 100px;
width: 100px;
}
=====> sass
$sample: #800
selector
# 暗くする
background-color: darken($sample, 20%)
# 明るくする
color: lighten($sample, 20%)
=====> css
selector {
background-color: #200;
color: #e00;
}
セレクタごとのセットとかをまとめて変数にもてる
自分で関数みたいのつくれるって感じです。
変数わたしたりもできる。
=====> sass
@mixin sample($sample)
property: $sample
@mixin base
selector
property: value
#data
@include sample(10px)
@include base
=====> css
#data {
property: 10px;
}
#data selector {
property: value
}
継承
継承ができそうです。
=====> sass
selector01
property: value
selector01.sample
property: value
selector02
@extend selector01
property: value
====> css
selector01,
selector02 {
property: value
}
selector01.sample,
selector02.sample {
property: value
}
selector02 {
property: value
}
mixinとextendの違いが、というかそれ自体がいまいちぱっとしない、
どうやって使いわけようかと考えました。
extendのほうって結局、継承とかいってるけどhamlの概念の
「Markup should be DRY」に基づいてて、
つまりは２回も書きたくないための機能？
一方mixinのほうはベースセットみたいにまとめておいたのを
いろんなところで変数の代入値変えて使える。
なのかねえ。
実際ちゃんと使ってみて考えてみましょう。
続くのでしょうか？それはイエスですらわからないのです。
0 件のコメント:
コメントを投稿