> I just meant: it's an approach that has worked before. "Better"? That's for
> you to decide.
Alright :)
Regarding the syntax of the DSL, I was intentionally vague about it in the
original post because I wanted to focus on the technical choices I made. But let
me expand on it a bit the means of an example. The following is the source code:
(define two-column-layout
#`(#:max-width 910px
[@media (and screen (#:min-width 960px))
#:max-width 1000px
[a #:color |#ff0011|]]))
(css-expr->string
#`([body
#:margin-left 10px
#:padding-left (px 10)
#:font-family "Equity" "Concourse" Arial
#:border {#:left (1px solid yellow)
#:right (2px solid black)}
#,@two-column-layout]))
The following is the compiled CSS:
body {
margin-left: 10px;
padding-left: 10px;
font-family: "Equity", "Concourse", Arial;
border-left: 1px solid yellow;
border-right: 2px solid black;
max-width: 910px;
}
@media screen and (min-width: 960px) {
body {
max-width: 1000px;
}
body a {
color: #ff0011;
}
}
Note that:
- [Selector “body”, declarations “margin-left” and “padding-left”] The value
“10px” is expressible in two ways “10px” and “(px 10)”. The former
representation is better for writing out explicitly (yes, it is a pun on
“10px” being a symbol in Racket). The latter representation is better when the
magnitude is a variable, for example, “(px #,gutter)”.
Similar representation options are available elsewhere in the DSL, for
example, CSS at rules.
- [Selector “body”, declaration “font-family”] The CSS value delimited by quotes
is a Racket string, the CSS value not delimited by quotes is a Racket
symbol. In fact, in the DSL both the values “10px” and “Arial” go through the
same translation mechanism.
- [Selector “body”, declaration “font-family”] Lists of CSS values do not
require extra parenthesis in the DSL.
- [Selector “body”, declaration “border”] It is possible to nest
declarations, a featured borrowed from SASS.
- [Selector “body”, declaration “border”, sub-declarations “left” and “right”] A
composite CSS value require extra parenthesis in the DSL.
- [Selector “body”, splicing “two-column-layout”] A mixin is the result of an
“unquote-splicing”. Mixins can have parameters, in the form of a function that
returns a piece of DSL syntax. This is a feature from SASS that the DSL gets
for free, because of the Racket embedding. The same is true of SASS variables.
- [Mixin “two-column-layout”, at-rule “@media” and selector “a”] It is possible
to nest rules. Another feature borrowed from SASS.
- [Mixin “two-column-layout”, selector “a”, declaration “color”] It is possible
to represent colors with Racket symbols, for example, “|#ff0011|” and
“\#ff0011”. Unsurprisingly, they go through the same translation mechanism as
“10px” and “Arial”. This is one of the very few places where I anticipate
users having to escape characters in symbols.
There are many more tricks in this DSL. This example serves only to give you a
flavor of what I am trying to accomplish while trying to avoid overwhelm you
with the details. These details are still changing, which is the main reason why
I have not published the library yet. Of course, if it interests you, I can give
an overview of the whole language. But that goes beyond my main point for the
moment, which is to figure out if I am using the right tools for the job.
If you have more suggestions, please comment. I am happy to read your feedback.
--
You received this message because you are subscribed to the Google Groups
"Racket Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to racket-users+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
