xCSS Logo

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

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;
    }
}

<?php
  $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

Similar Modules

CSS Dry, LESS, SASS

Project Information

Downloads