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
Project information
- Created by RobLoach on , updated
- Stable releases for this project are covered by the security advisory policy.
There are currently no supported stable releases.
Releases
Development version: 7.x-2.x-dev updated 6 Jul 2016 at 20:22 UTC