Dynamic CSS?

I have been waiting for this moment for a long time, no honestly, somewhere in the subcortex, I really, really wanted such a thing so that it was convenient to write in CSS without rewriting similar styles twice, without looking for the necessary sections in my own code, in general I wanted to it was easy and simple to work, something I delayed ... And so meet xCSS - a php-class for working with dynamic CSS.
I apologize in advance for the layout of something with Habr this time did not work out (
As I wrote above, xCSS is a class for working with dynamic CSS. The author, inspired by the idea of OO CSS and SASS (yes, Ruby already has such a thing) created a class that allows you to work with CSS dynamically: variables, classes, nested selectors and prototyping are available to the developer.
What gives us xCSS at first consideration? Firstly, it helps to avoid confusion in the code with the help of nested selectors, secondly, it eliminates the need to edit the entire style sheet if you need to change some values, thirdly, to reduce the amount of code by getting rid of duplicate rules, fourth , minimize code. Pluses on the face, now let's get acquainted with xCSS closer.

Variables

I want to write about this innovation first of all, we all often came across a situation when you need to change the color in the layout, and everything is almost ready, and the search and replacement do not fit because the color needs to be changed not everywhere, but only with certain elements or when By delivery to production it is necessary to clear out all debugging rules, and there are a lot of them ... Uh. I don’t even want to enumerate situations when something needs to be quickly changed to change where it is needed, and where it isn’t necessary — no!
Now you can use variables:

 vars { $path_ = /images/icons; $basicColor_ = #ffcc00; $headerFonts_ = Arial, Tahoma, Verdana } #downloads { list-style-image: url('$path_/folder.png'); border-left: $basicColor_; } h1 { color: $basicColor_; } 

In the example, I put an underscore at the end of the variables, this is necessary so that undeclared variables are not replaced with variables with a common prefix. I illustrate the above: $newColor = #ffcc00 , and $newColorBg not declared, but is used in the code, as a result of which $newColorBg will remain #ffcc00Bg .
Lines in variables can be not escaped, they are closed by semicolon (semicolon).

Nested selectors

Suppose you have an item item and it has a lot of nested items that require a separate designation: price, description, buy button, model number, and so on. And of course, now you have to write li.product ter-ta-ta a hundred times in a row ... now everything is simpler:

 li.poduct { a { color: $basicColor; } .price { color: $priceColor; font-size: 2em; } .buy { background-color: $attentionColor; } // …  ..  .. } 

At the output we get:

 li.product a { color: $basicColor; } li.product .price { color: $priceColor; font-size: 2em; } li.product .buy { background-color: $attentionColor; } // …  ..  .. 

Conveniently? Then you can talk about prototyping

Prototyping

Take three products with identical arrangement of elements, but with different color schemes, for example, a regular product, a best seller and a novelty. First, we will create a prototype for a regular product:

 .product { self { min-width: 200px; min-height: 300px; } h1 { padding-bottom: 1em; color: $headersLight; } } .bestSeller extends .product { self { background-color: $productBestBg_; } h1 { color: $productBest_; } } .new extends .product { self { background-color: $productNewBg_; background-image: url($path/new_bg.png); } h1 { color: $productNew_; font-size: 1.2em; padding-bottom: 1.8em; } } 

In russeltat we get a set of all the necessary rules:

 .new, .bestSeller, .product { min-width: 200px; min-height: 300px; } .new h1, .bestSeller h1, .product h1 { padding-bottom: 1em; color: $headersLight; } .new h1 { color: #00ffcc; font-size: 1.2em; padding-bottom: 1.8em; } .new { background-color: #0000cc; background-image: url(/storage/images/new_bg.png); } .bestSeller { background-color: #ff33cc; } .bestSeller h1 { color: #ff00cc; } 

As you can see, when using xCSS, we avoided duplicating the names of the classes (except for the name of the prototype) and when changing the name of the class to us

Php

Now about the php component and how to attach this miracle to your project.

1. We throw the xcss-class.php file into the library.
2. In the folder with the xCSS files, create the index.php script and paste the code there:

     $ config = array ();
    $ config ['path_to_css_dir'] = '../';  // <i> this is a root for css and xcss directories </ i>
   
    $ config ['xCSS_files'] = array (
   	 'styles / main.xcss' => 'generated / main.css',
    // file name xcss => save as
    );
   
    $ config ['master_file'] = true;  <i> // Use the master file (the file in which all styles will be included), true by default </ i>
    $ config ['master_filename'] = 'master.css';  <i> // respectively, the name of the master file, the default is 'master.css' </ i>
   
    $ config ['reset_files'] = array (
   	 'static / reset.css', <i> // Styles that reset default browser settings </ i>
    );
   
    $ config ['hook_files'] = array (
   	 'static / hooks.css: screen', <i> // Files for other media types (I could be wrong) </ i>
    );
   
    $ config ['construct_name'] = 'self';  <i> // The name of the element within itself, the default is 'self' </ i>
   
    $ config ['compress'] = true;  <i> // Remove extra spaces, false by default </ i>
    $ config ['debugmode'] = false;  <i> // Turns on debug mode, defaults to false </ i>
   
    $ config ['disable_xCSS'] = false;  <i> // Disables xCSS, defaults to false </ i>
    $ xCSS = new xCSS ($ config);
    $ xCSS-> compile (); 

3. We insert into the header of the HTML page: It refers to the xcss / index.php file that collects xCSS in CSS, then we include the master file: />
4. We rest.

From the author

Of course, I would not use xCSS as the author suggests, but I would glue all the necessary styles into one file, squeeze it with gzip and put it in the cache, and use xCSS only during development.
Thanks for attention!

Links

• xCSS project site
• xCSS-0.9.2 on Google.Code