In this seventh part of the series, you'll learn yet another method offered by Turbine for copying properties from one CSS selector to another. The method relies on the functionality provided by the “copy” statement, which is a breeze to use.
CSS with Turbine: Introducing the Copy Statement (Page 1 of 2 )
Are you searching for a library that lets you reduce the time that you spend writing your carefully-crafted CSS files, without having to learn a whole new pseudo-language? Well, if your answer is yes, I suggest you take a close look at Turbine, a full-featured CSS processor, which will permit you to minify and compress your style sheets files in a snap, define CSS constants and aliases, work with nested and multi-line selectors, and even use a basic object-oriented syntax for inheriting properties from one and multiple parents. What else can you ask for?
Speaking of inheriting properties from several CSS selectors using an OO notation, that’s exactly the topic that I discussed in the last tutorial. Moreover, Turbine is capable of implementing single and multiple Inheritance via its “extends” keyword, which closely resembles the syntax used by some popular programming languages like Java and PHP.
However, Inheritance isn’t the only way that Turbine provides for reusing properties. The library also includes a statement called “copy.” As its name suggests, it can be used for copying properties from one CSS selector to another. Quite possibly, the statement isn’t as intuitive as its cousin “extends,” but its functionality is more than acceptable, trust me.
Therefore, in this seventh chapter of the series I’m going to explain, through an approachable example, how to reuse CSS properties via the “copy” statement. So let's continue our exploration of the Turbine CSS processor.
Review: using Inheritance with Turbine via the “extends” keyword
As always, before I demonstrate how to copy the properties of one CSS selector to another, I’d like to spend a few moments reintroducing one of the examples created in the previous part of this series. It showed how to inherit properties from a couple of parent selectors via Turbine’s “extends” keyword.
Having clarified that, here’s the web page responsible for calling the library’s parsing engine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html charset=utf-8" /> <title>Parsing a CSS file with Turbine (using multiple Inheritance)</title> <link rel="stylesheet" href="css.php?files=styles.cssp" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>Parsing a CSS file with Turbine (using multiple Inheritance)</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> <div id="content"> <h2 id="heading1">Main content section</h2> <div class="subsection"> <h3>First subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="subsection"> <h3>Second subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="subsection"> <h3>Third subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div id="footer"> <h2 id="heading2">Footer section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> </div> </body> </html>
Without a doubt, understanding the structure of the previous web page is an extremely simple process that can be tackled in the flicker of the eye. So, let's move on and look at the definition of the following CSS file. It shows in a nutshell how to make an H3 selector inherit the properties assigned to the elements identified as “#heading1” and “#heading2” respectively. Here it is:
body padding: 0 margin: 0 background: #000 font: 0.9em Arial, Helvetica, sans-serif color: #fff p margin: 0 0 10px 0 #wrapper width: 960px margin: 0 auto #header, #footer padding: 20px #content padding: 20px overflow: hidden .subsection float: left width: 240px padding: 20px margin-right: 20px background: #f00 p color: #000 #heading1 padding: 20px margin-bottom: 20px #heading2 background: #00f h3 extends: "#heading1", "#heading2"
Even if you don’t have a background in object-oriented programming (which obviously isn’t a cardinal sin), the above code snippet should be fairly easy for you to follow. As you can see, in this case the “extends” keyword has been used to make the above H3 selector inherit all of the properties defined by its two parents.
Of course, the last step we must take to get the earlier example completed is to show how this sample CSS file looks after being parsed by Turbine, so here’s the corresponding output:
While the previous example may look rather primitive and not suitable for use in production environments, it's helpful for demonstrating how simple it is to implement multiple Inheritance with Turbine. But wait a minute! As you’ll possibly recall from the introduction, the library can copy properties assigned to one CSS selector to another one, via a the “copy” statement. Therefore, in the next section I’m going to explain how to work with this additional option, as usual with a friendly example.
To learn how this new example will be developed, click on the link below and keep reading.
Style Sheets 
CSS with Turbine: Reset Stylesheet Plug-in and the @media Rule
