Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update readme

  • Loading branch information...
commit 9e6acb58480323f00a999f5cd280154c886a6a50 1 parent 372bca0
@aeosynth authored
Showing with 45 additions and 39 deletions.
  1. +45 −39 readme.md
View
84 readme.md
@@ -1,62 +1,68 @@
CoffeeScript CSS
+main.coffee:
ccss = require 'ccss'
- rules =
- '.foo': do ->
+ template = require './template.coffee'
+ css = ccss.compile template
+ require('fs').writeFileSync 'main.css', css
+
+ #or all at once: ccss.compileFile './template.coffee', 'main.css'
+
+template.coffee:
+ borderRadius = (str) ->
+ WebkitBorderRadius: str
+ MozBorderRadius: str
+ borderRadius: str
+
+ boxShadow = (str) ->
+ WebkitBoxShadow: str
+ MozBoxShadow: str
+ boxShadow: str
+
+ module.exports =
+ form:
+ input:
+ padding: '5px'
+ border: '1px solid'
+ mixin: borderRadius '5px'
+ '#id .className': do ->
opaque = 1
translucent = opaque / 2
img:
+ mixin: [
+ borderRadius '5px'
+ boxShadow '5px'
+ ]
opacity: translucent
'img:hover':
opacity: opaque
- css = ccss.compile rules
-
- console.log css
-
- ### output:
- .foo img {
+main.css:
+ form input {
+ padding: 5px;
+ border: 1px solid;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ }
+ #id .className img {
opacity: 0.5;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ -webkit-box-shadow: 5px;
+ -moz-box-shadow: 5px;
+ box-shadow: 5px;
}
- .foo img:hover {
+ #id .className img:hover {
opacity: 1;
}
- ###
the core of the compiler is simply this:
iterate over the key / values of an object; if the value is another object,
append the key to the current selector, and recurse; else generate css.
-if you want logic, wrap it up in a function which returns an object.
-
-keys that would confuse the real compiler, coffee-script, must be quoted.
-
to reduce the amount of quoting, if a css property has a capital letter C,
it will be transformed into -c; selectors are not touched.
-
-eg, instead of
-
- borderRadius = (arg) ->
- '-webkit-border-radius': arg
- '-moz-border-radius': arg
- 'border-radius': arg
-
-we can write
-
- borderRadius = (arg) ->
- WebkitBorderRadius: arg
- MozBorderRadius: arg
- borderRadius: arg
-
- '#id .className':
- borderRadius 5
-
-compiled:
-
- #id .className {
- -webkit-border-radius: 5;
- -moz-border-radius: 5;
- border-radius: 5;
- }
Please sign in to comment.
Something went wrong with that request. Please try again.