www.css - CSSのパーズと構築 ¶このモジュールはS式とCSSを相互変換するツールを提供します。
S式CSS(SxCSS)はCSSをSchemeから操作するのに便利な方法です。
例えば、次のCSSとSxCSSは等価で、相互に変換可能です。
CSS:
body { padding-left: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar li { background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul#spec > a { text-decoration: none }
a:visited { color: purple !important }
SxCSS:
((style-rule body (padding-left (11 em)) (font-family (:or Georgia "Times New Roman" Times serif)) (color purple) (background-color (color "d8da3d"))) (style-rule ((ul (class navbar)) li) (background white) (margin #((0.5 em) 0)) (padding (0.3 em)) (border-right #((1 em) solid black))) (style-rule ((ul (id spec)) > a) (text-decoration none)) (style-rule (a (: visited)) (color purple !important)))
完全な仕様については下の “S式CSS” を参照してください。
{www.css}
SxCSSを取り、与えられたポートにCSSを書き出します。oportのデフォルトは
現在の出力ポートです。
{www.css}
CSSを与えられたポートから読み、SxCSSを返します。iportのデフォルトは
現在の入力ポートです。
パーズできないCSS (不正なCSSか、サポートされていない構文) に出会った場合、 warningメッセージを出力してその箇所を飛ばし、次にパーズできるところから処理を続けます。
註：今のところ、@charsetディレクティブは無視され、
入力テキストはポートのエンコーディングであると仮定されます。将来は対応するかもしれません。
{www.css}
与えられたファイルからCSSを読み、parse-cssを使ってパーズして結果をSxCSSで
返します。@charsetディレクティブはまだ認識されないので、
CSSファイルがGaucheのネイティブエンコーディングと異なるエンコーディングで書かれている
場合は、encodingにエンコーディング名を渡してください。
{www.css}
CSSのセレクター部分をパーズするユーティリティです。
(parse-css-selector-string "ul li.item span#foo") ⇒ (ul (li (class item)) (span (id foo))) (parse-css-selector-string "h1,h2") ⇒ (:or h1 h2)
完全なSxCSSの構文規則を以下に示します。
<sxcss> : ({<style-rule> | <at-rule>} ...)
<style-rule> : (style-rule <pattern> <declaration> ...)
| (style-decls <declaration> ...)
<pattern> : <selector> | (:or <selector> ...)
<selector> : <simple-selector>
| <chained-selector>
<chained-selector> : (<simple-selector> . (<op>? . <chained-selector>))
<op> : > | + | ~
<simple-selector> : <element-name>
| (<element-name> <option> ...)
<option> : (id <name>) ; E#id
| (class <ident>) ; E.class
| (has <ident>) ; E[attrib]
| (= <ident> <attrib-value>) ; E[attrib=val]
| (~= <ident> <attrib-value>) ; E[attrib~=val]
| (:= <ident> <attrib-value>) ; E[attrib|=val]
| (*= <ident> <attrib-value>) ; E[attrib*=val]
| (^= <ident> <attrib-value>) ; E[attrib^=val]
| ($= <ident> <attrib-value>) ; E[attrib$=val]
| (:not <negation-arg>) ; E:not(s)
| (: <ident>) ; E:pseudo-class
| (: (<fn> <ident> ...)) ; E:pseudo-class(arg)
| (:: <ident>) ; E::pseudo-element
<element-name> : <ident> | *
<attrib-value> : <ident> | <string>
<negation-arg> | <element-name> | * | <option> ; except <negation-arg>
<declaration> : (<ident> <expr> <expr2> ... <important>?)
<important> : !important
<expr> : <term>
| (/ <term> <term> ...)
| (:or <term> <term> ...)
| #(<term> <term> ...) ; juxtaposition
<term> : <quantity> | (- <quantity>) | (+ <quantity>)
| <string> | <ident> | <url> | <hexcolor> | <function>
<quantity> : <number>
| (<number> %)
| (<number> <ident>)
<url> | (url <string>)
<hexcolor> | (color <string>) ; <string> must be hexdigits
<function> | (<fn> <arg> ...)
<arg> | <term> | #(<term> ...) | (/ <term> <term> ...)
<at-rule> : <at-media-rule> | <at-import-rule>
; NB: Other at-rules are not supported yet
<at-media-rule> : (@media (<symbol> ...) <style-rule> ...)
<at-import-rule> : (@import <string> (<symbol> ...))
註: 否定オペレータはnotではなく:notです。
というのは、(not <negation-arg>)だと “not” と言う名前を持ち
一つのオプションを持つノードと区別できないからです。
註: style-declsセレクタルールはparse-cssの出力には
現れません。
ドキュメントのstyle属性に渡すCSS断片を生成したい場合に、
(style-decls <declaration> ...)をconstruct-cssに渡します。
(with-output-to-string
(cut construct-css
'((style-decls (width (50 %))
(padding #(0 (10 pt) 0 (10 pt)))))))
⇒ "width:50%;padding:0 10pt 0 10pt"