# How to parse my own custom "programming language"?

**URL:** <https://www.ruby-forum.com/t/how-to-parse-my-own-custom-programming-language/127074>\
**Category:** Rails\
**Created:** [January 24, 2008, 6:29pm UTC](https://www.ruby-forum.com/t/how-to-parse-my-own-custom-programming-language/127074 "2008-01-24T18:29:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![josh](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/45deac/32.png) [@josh](https://www.ruby-forum.com/u/josh)\
**Post date:** [January 24, 2008, 6:29pm UTC](https://www.ruby-forum.com/t/how-to-parse-my-own-custom-programming-language/127074/1 "2008-01-24T18:29:52Z")

</div>

Hi all

I’m brain storming on ways how to optimize the act of writing good  
CSS… My plan is to create some sort of Meta-CSS-Language that is  
parsed by a translation-processor which outputs the “normal” CSS code  
(packed into a Ruby On Rails plugin).

I want to be able to write sort of the following quasi-CSS-code (the  
$-sign is sort of a placeholder for the surrounding context, see  
comments):

* * *

body {  
font-size: 12px;  
}

div#content {  
font-size: 20px;  
}

ul.links li {  
background-color: red;  
list-style-type: none;  
list-style-image: url(“li.png”);

$:first { /\* is the same like “ul.links li:first” \*/  
padding-top: 10px;  
}

$:last { /\* is the same like “ul.links li:last” \*/  
padding-bottom: 10px;  
}

ul.links\_external li {  
list-style-image: url(“li\_external.gif”);  
}

ul.links\_download li {  
list-style-image: url(“li\_download.gif”);  
}

div#content $ { /\* is the same like “div#content ul.links li” \*/  
font-weight: bold;  
}

$ a { /\* is the same like “ul.links li a” \*/  
color: red;  
text-decoration: none;  
padding-left: 20px;  
background-image: url(“a.gif”);  
background-position: center left;  
background-repeat: no-repeat;

```
div#content $ { /* is the same like "div#content ul.links li a" */
  background-image: url("a_big.gif");
}

$:hover { /* is the same like "ul.links li a:hover" */
  text-decoration: underline;
  background-image: url("a_hover.gif");

  div#content $ { /* is the same like "div#content ul.links li

```

a:hover" \*/  
background-image: url(“a\_big\_hover.gif”);  
}  
}  
}  
}

* * *

This should be converted by the engine to the following:

* * *

body {  
font-size: 12px;  
}

div#content {  
font-size: 20px;  
}

ul.links li,  
ul.links\_external li,  
ul.links\_download li {  
background-color: red;  
list-style-type: none;  
list-style-image: url(“li.png”);  
}

ul.links li:first,  
ul.links li.first, /\* For browsers that don’t know :first… \*/  
ul.links\_external li:first,  
ul.links\_external li.first,  
ul.links\_download li:first,  
ul.links\_download li.first {  
padding-top: 10px;  
}

ul.links li:last,  
ul.links li.last, /\* For browsers that don’t know :first… \*/  
ul.links\_external li:last,  
ul.links\_external li.last,  
ul.links\_download li:last,  
ul.links\_download li.last {  
padding-bottom: 10px;  
}

ul.links\_external li {  
list-style-image: url(“li\_external.gif”);  
}

ul.links\_download li {  
list-style-image: url(“li\_download.gif”);  
}

div#content ul.links li {  
font-weight: bold;  
}

ul.links li a {  
color: red;  
text-decoration: none;  
padding-left: 20px;  
background-image: url(“a.gif”);  
background-position: center left;  
background-repeat: no-repeat;  
}

div#content ul.links li a {  
background-image: url(“a\_big.gif”);  
}

ul.links li a:hover {  
text-decoration: underline;  
background-image: url(“a\_hover.gif”);  
}

div#content ul.links li a:hover {  
background-image: url(“a\_big\_hover.gif”);  
}

* * *

I hope you’re getting the point… 🙂 I came to that idea because CSS2  
does not allow anything like inheritance or “mix in” of code. So I want  
a translation-engine to fill this hole for me in my Rails projects:  
write clean code (DRY) and expand it automatically so browsers get it.

But… I had never to do something like that, so I wonder what libraries  
or stuff do already exist to help in such cases? I guess I heard the  
word “Tokenizer” in this context already, but I’m not sure…  
Or should I create my own Rails template system (I don’t really know  
what they are capable of and if a task like this is really what they  
have been created for)?

As a not very experienced Ruby programmer, I would just start using many  
many regular expressions or something like that and try to hack  
something together, but I guess there are better ways to do this…

Thanks a lot for help,  
Josh

---

<div class="post-metadata">

**Author:** ![josh](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/45deac/32.png) [@josh](https://www.ruby-forum.com/u/josh)\
**Post date:** [January 24, 2008, 6:45pm UTC](https://www.ruby-forum.com/t/how-to-parse-my-own-custom-programming-language/127074/2 "2008-01-24T18:45:11Z")

</div>

maybe erb would be of some help, to parse the file and replace stuff  
with ruby code  
[http://www.ruby-doc.org/core/classes/ERB.html](http://www.ruby-doc.org/core/classes/ERB.html)

this would reduce your work to providing helpers and making rails run  
the css through erb (as all the html and rjs anyway)

---

<div class="post-metadata">

**Author:** ![josh](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/45deac/32.png) [@josh](https://www.ruby-forum.com/u/josh)\
**Post date:** [January 24, 2008, 7:03pm UTC](https://www.ruby-forum.com/t/how-to-parse-my-own-custom-programming-language/127074/3 "2008-01-24T19:03:48Z")

</div>

Or you could look into Sass.

[http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html](http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html)

Peace,  
Phillip