CoffeeScript CSS 这个名字跟 CoffeeScript 无关,将脚本化的样式变成 CSS 代码。
install: npm install ccss
npm install ccss
main.coffee:
ccss = require 'ccss' 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' mixins: borderRadius '5px' '#id .className': do -> opaque = 1 translucent = opaque / 2 img: mixins: [ borderRadius '5px' boxShadow '5px' ] opacity: translucent 'img:hover': opacity: opaque
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; } #id .className img:hover { opacity: 1; }