xCSS

xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features. But, most frameworks are bulky and inflexible, aren't they? Not xCSS! It's lightweight and seamlessly integrates into any existing workflow. Aside from that the CSS overhead is getting reduced while your (X)HTML attributes remain semantic.

Features

• Variables
• Nesting child objects
• Extending objects
• Math operations
• Comments

Example

// Variables: http://xcss.antpaw.org/docs/syntax/variables 
vars {
    $path = ../img/tmpl1/png;
    $color1 = #FF00FF;
    $border = border-top: 1px solid $color1;
}
.variablesselector {
    background-image: url($path/head_bg.png);
    background-color: $color1;
    $border;
}

// Nesting Child Objects: http://xcss.antpaw.org/docs/syntax/children 
.childselector {
    a {
        display: block;
    }
    strong {
        color: blue;
    }
}

  $path = drupal_get_path('module', 'mymodule');
  drupal_add_css($path . '/mymodule.xcss');

xCSS has more features available, including extending objects, math operations, comments and more.

Dependencies

• Libraries API 2.x

Similar Modules

CSS Dry, LESS, SASS