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
--
Posted via http://www.ruby-forum.com/.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
Thorsten Mueller
2008-Jan-24 17:45 UTC
Re: How to parse my own custom "programming language"?
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 this would reduce your work to providing helpers and making rails run the css through erb (as all the html and rjs anyway) -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
Phillip Koebbe
2008-Jan-24 18:02 UTC
Re: How to parse my own custom "programming language"?
Or you could look into Sass. http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html Peace, Phillip On Jan 24, 2008, at 11:29 AM, Joshua Muheim wrote:> > 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 > -- > Posted via http://www.ruby-forum.com/. > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---