Cascading Style Sheets

CSS is supported directly as a part of the JaernCloud language, with the added power of node inheritance and nested nodes.
  • Children of the css node can be other css nodes or a traditional css rules like the CSS Specification outlines.
  • If a child node is a traditional CSS rule JaernCloud considers it to be a unnamed nodes - no name, class or id. It's just a tag selector.
  • When a node is unnamed it will be placed as a child node to any node that matches the tag selector. This is is essentially the behavior a browser has.

With this node structure for CSS you can reuse existing skills and add if needed the node transformations of JaernCloud to achieve inheritance for CSS rules. Also, it's worth noting that since the JaernCloud compiler natively understands the relationship between CSS nodes and HTML nodes, refactoring either without breaking code just became a whole lot easier.


// example of using css inheritance:

css#site {

   // left float when inheriting from this node:
   css.left {
      float: left;
   }

   // set text color green when inheriting from this node:
   css.green {
      color: green;
   }

   // definition of color only:
   css#red : "#DD0000";

   body {
      : css.green;
      font: Verdana;
   }

   div#left {
      width: 300px;

      // apply the left rule
      : css.left;

      // use the color definition
      color: css#red;

      // child node representing a nested rule which matches "div#left p":
      p {
            margin: 10px 0;
      }

   }

}

Like all other JaernCloud nodes, the css node supports named parameters. The example below demonstrates this.

css#site {

   // css rule for a box to grab the users attention, taking a color and icon parameter:
   css.attentionbox {
      padding: 8px 8px 8px 32px;
      border: 1px solid silver;
      color: color?;
      background: url(icon?) top left no-repeat;
   }

    // declare the error box as a red attention box
   div.errorbox {
        : css.attentionbox { color: red; icon: 'error.png' }
    }

    // declare the warning box as a yellow attention box
    div.warningbox {
        : css.attentionbox { color: yellow; icon: 'warning.png' }
    }

}

To apply the rules in a css node, make the node in question inherit from the css node. For example:

view#index : html, css#site {
   // this view uses the site css
}

// another example

html#site : html, css#site { }

view#index: html#site {
   // this view uses the site css
}

Last edited Oct 30, 2010 at 2:07 PM by jimmeyer, version 12

Comments

No comments yet.