kahua.css

CVS HEADコミット済み

[module] kahua.css

このモジュールはS式表記のCSS記述言語を提供します。

CSS記述言語

CSS記述言語を利用するには、cssタグからなるノードを返す必要があります。

(define-entry (sample.css)
  `((css
     (h1 (color red)
         (height 2em)))))

kahua.cssモジュールが提供するCSS記述言語の構文は下記の通り

?stylesheet	((css ?statement ...))
?statement	?ruleset
	?at-rule
?ruleset	(?selector ?declaration ...)
?declaratin	(?property [?value \| ?function] ...)
?property	?value
?ruleset	(?selector ?declaration ...)
?selector	(>> ?selector ...)	子孫選択子 E E2
	(> ?selector ...)	子選択子 E > E2
	(+ ?selector ...)	隣接選択子 E + E2
	(or ?selector ...)	グループ化 E, E2
	(@ ?selector ?attrib ...)	属性選択子
	?value	型選択子, クラス選択子, ID 選択子 value内の$は#に置換されるE$id→E#id
?attrib	?value	属性選択子 E[value]
	(= ?value ?value)	属性選択子 E[value=value]
	(~= ?value ?value)	属性選択子 E[value~=value]
	(-= ?value ?value)	属性選択子 E[value\|=value]
?at-rule	(@ (media ?media ?ruleset ...))
	(@ (page ?declaration ...))
	(@ (font-face ?declaration ...))
	(@ (charset ?value))
?value	<string>
	<keyword>
	<symbol>
	<number>
?function	(?value ?value ...)	関数記法 url('left.gif')

選択子

汎用選択子

 (* (color red))

 * { color: red }

型選択子

 (h1 (color red))

 h1 { color: red }

グループ化

 ((or h1 h2) (color red))

 h1, h2 { color: red }

子孫選択子

 ((>> h1 h2) (color red))

 h1 h2 { color: red }

子選択子

 ((> h1 h2) (color red))

 h1 > h2 { color: red }

擬似クラス

 (a:visited (color red))

 a:visited { color: red }

lang() 擬似クラス

 ((lang h1 fr) (color red))

 h1:lang(fr) { color: red }

隣接選択子

 ((+ h1 h2) (color red))

 h1 + h2 { color: red }

属性選択子

 ((@ h1 title) (color red))
 ((@ h1 (= title "name")) (color red))
 ((@ h1 (~= title "name")) (color red)) 
 ((@ h1 (-= title "name")) (color red))

 h1[title] { color: red }
 h1[title="name"] { color: red }
 h1[title~="name"] { color: red }
 h1[title|="name"] { color: red }

クラス選択子

 (div.warning (color red))

 div.warning { color: red }

ID 選択子

 ($search-box (color red))

 #search-box { color: red }

@規則

@import規則

 (@ (import "test.css") print)

 @import url("test.css") print;

@media規則

 (@ (media print (h1 (color red))))

 @media print { h1 { color: red }}

@page規則

 (@ (page :left) (margin 1cm))

 @page :left { margin: 1cm }

@font-face規則

 (@ (font-face (font-weight 700)))

 @font-face { font-weight: 700 }

@charset規則

 (@ (charset "UTF-8"))

 @charset "UTF-8";

CSS Color Object

[class] <css:color>

色に対する操作を提供するクラスです。このクラスを利用する事で、CSS生成プログラムで色を簡単に扱えます。

このクラスは、読み込み時コンストラクタcss:colorを提供しています。 css:colorコンストラクタには、5種類の色指定方法があります。

 #,(css:color 255 0 0)
 #,(css:color 100% 0% 0%)
 #,(css:color "#f" "#0" "#0")
 #,(css:color "#ff" "#00" "#00")
 #,(css:color red)

5番目のキーワードによる色指定では、 http://www.w3.org/TR/SVG/types.html#ColorKeywords に記載されているキーワードが指定可能です。

[method] css:value-of (obj <css:color>)

CSS宣言の値として利用する文字列を返します。このメソッドを特化することで、任意のオブジェクトをCSS宣言の値として利用できます。

 '((css (h1 (color #,(css:color royalblue)))))

 h1 { color: rgb(65,105,225) }

[procedure] css:darken color amount

colorで指定した色に対して、amountだけ暗くした色オブジェクトを返します。

 > (css:value-of (css:darken #,(css:color 100 200 140) 0.2))
 "rgb(75,150,105)"

[procedure] css:brighten color amount

colorで指定した色に対して、amountだけ明くした色オブジェクトを返します。

 > (css:value-of (css:brighten #,(css:color 100 200 140) 0.2))
 "rgb(128,256,179)"

[procedure] css:darken? color

colorで指定した色が暗いかどうかを返す述語です。

[procedure] css:brighten? color

colorで指定した色が明いかどうかを返す述語です。

[procedure] cs:blend color1 color2

color1で指定した色とcolor2で指定した色を混ぜた色をオブジェクト返します。

Kahua

News

Site Info

Kahua開発日記

Enjoy Gauche