展開した略記をさらに加工するフィルターの使い方
略記を展開すると、HTMLが出力されます。この出力された内容をさらに加工する「フィルター」が提供されています。
フィルターは、シェルスクリプトのパイプと同じ考え方です。
フィルターのフォーマット
フィルターのフォーマットは、以下のようになります。
略記|フィルターの識別子|フィルターの識別子・・・
コメントを挿入するフィルター
要素の前後にコメントを挿入するフィルターです。フィルターの識別子は「c」です。
コメントには、id属性の値とclass属性の値が挿入されます。
1-1.略記の入力
単純な例です。ここでは例として、以下のように入力します。
div#div1|c
1-2.略記の展開
略記を展開すると、以下のように要素が展開されます。id属性の値がコメントに展開されています。
2-1.略記の入力
少し複雑にした例です。ここでは例として、以下のように入力します。
div#div1>div.clsdiv2>div#div3.clsdiv3|c
2-2.略記の展開
略記を展開すると、以下のように要素が展開されます。id属性の値やclass属性の値がコメントに展開されています。
文字をエスケープするフィルター
文字をエスケープするフィルターです。以下の文字をエスケープします。
| 対象になる文字 | エスケープ後の文字 |
|---|---|
| < | < |
| > | > |
| & | & |
フィルターの識別子は「e」です。
1.略記の入力
ここでは例として、以下のように入力します。
div|e
2.略記の展開
文字がエスケープされ展開されています。
CSSのスペースを調整するフィルター
CSSのスペースを調整するフィルターです。フィルターの識別子は「fc」です。
通常CSSの略記を展開すると、各宣言は以下のように展開されます。
このフィルターを通すことで、プロパティーの値の先頭にスーペース文字が挿入されます。
1.略記の入力
ここでは例として、以下のように入力します。
cl:n|fc
2.略記の展開
以下のように、プロパティーの値の先頭にスーペース文字が挿入されます。
