Mailing List Archive: 49091 messages
  • Home
  • Script library
  • AltME Archive
  • Mailing list
  • Articles Index
  • Site search
 

[REBOL] CSS dialect

From: al::bri::xtra::co::nz at: 8-Aug-2002 7:44

Here's my latest dialect for Cascading Style Sheets, CSS, for dynamically styling web page. It's best used on the server, in a CGI script. I've got a sort-of solution for percentile values, for example: "100 %." is translated to "100%". Rebol [ Name: 'CSS Title: "CSS" File: %CSS.r Author: "Andrew Martin" eMail: [Al--Bri--xtra--co--nz] Date: 7/August/2002 Web: http://valley.150m.com Version: 1.0.0 Purpose: { CSS generates CSS markup from Rebol words, paths, tags, blocks and other Rebol values. } Category: [util 5] ] CSS: function [ "CSS generates CSS markup from Rebol words, paths, tags, blocks and other values." Dialect [block!] "CSS dialect block." ] [CSS Number Declaration Property Value Value2 Selector Selector2 Selector3] [ CSS: make string! 2000 Number: [integer! | decimal!] Declaration: [ some [ set Property set-word! ( repend CSS [ tab mold get 'Property ;In the above line "get 'Property" can be replaced with Property with new Rebol versions. ] ) some [ [set Value Number %.] ( repend CSS [ #" " Value #"%" ] ) | set Value file! ( repend CSS [ " url(" replace/all copy Value #" " " " ")" ] ) | set Value url! ( repend CSS [ " url(" Value ")" ] ) | [set Value Number set Value2 word!] ( repend CSS [ #" " Value Value2 ] ) | set Value [word! | issue!] ( repend CSS [ #" " mold Value ] ) ] ( append CSS ";^/" ) ] ] parse Dialect [ any [ [ set Selector word! set Selector2 word! set Selector3 word! ( repend CSS [ mold Selector #" " mold Selector2 #" " mold Selector3 " {^/" ] ) | set Selector word! ( repend CSS [ mold Selector " {^/" ] ) | set Selector block! ( foreach Item Selector [ repend CSS [Item ", "] ] remove/part back back tail CSS 2 append CSS " {^/" ) | set Selector path! ( foreach Item :Selector [ repend CSS [Item #" "] ] remove back tail CSS append CSS " {^/" ) ] into Declaration ( append CSS rejoin [ tab "}" newline ] ) ] end ] CSS ] The test code, which includes samples, is below my .sig. Watch out for linebreaks! Andrew Martin 100% Rebol! ICQ: 26227169 http://valley.150m.com/ -><- Rebol [ Name: 'Test Title: "Test" File: %Test.r Author: "Andrew Martin" eMail: [Al--Bri--xtra--co--nz] Date: 7/August/2002 Comments: "Tests %CSS.r." ] if not value? 'Values [ do %/C/Rebol/Values/Values.r ] foreach [Input Output] [ [h1 [color: blue]] {h1 { color: blue; } } [h1 [color: pink]] {h1 { color: pink; } } [h1 [color: blue font-size: 12 pt]] {h1 { color: blue; font-size: 12pt; } } [h1 [color: blue background: #FF00DD font-size: 12 pt]] {h1 { color: blue; background: #FF00DD; font-size: 12pt; } } [h1 [color: blue font-size: 12 pt background: #FF00DD]] {h1 { color: blue; font-size: 12pt; background: #FF00DD; } } [h1 [color: blue font-size: 12 pt background: #FF00DD width: 100 %.]] {h1 { color: blue; font-size: 12pt; background: #FF00DD; width: 100%; } } [ [h1 p table] [ padding: 0 px margin: 0 px ] ] {h1, p, table { padding: 0px; margin: 0px; } } [ [h1 p table] [ padding: 0 px margin: 0 px ] h2 [color: green] ] {h1, p, table { padding: 0px; margin: 0px; } h2 { color: green; } } [td.Grid [width: 1.5 em]] {td.Grid { width: 1.5em; } } [div/p [font-size: 95.5 %.]] {div p { font-size: 95.5%; } } [body [background: %Test.jpg]] {body { background: url(Test.jpg); } } [body [background: http://www.rebol.com/Test.jpg]] {body { background: url(http://www.rebol.com/Test.jpg); } } [p + h1 [page-break-after: always]] {p + h1 { page-break-after: always; } } ] [ if Output != Result: CSS Input [ print rejoin [ "Test failed! for Input: " mold Input newline "Result: " mold Result newline "Output should be: " mold Output newline ] halt ] ] print "All tests OK!" halt