Home arrow Style Sheets arrow CSS with Turbine: Introducing the Copy Statement
STYLE SHEETS

CSS with Turbine: Introducing the Copy Statement


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
September 29, 2010
TABLE OF CONTENTS:
  1. · CSS with Turbine: Introducing the Copy Statement
  2. · Copying properties from one CSS selector to another using the copy statement

print this article
SEARCH DEVARTICLES

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:

/*
 Stylesheet generated by Turbine - http://turbine.peterkroener.de/
 Version: 1.1.0pre
 Path: /turbine
 Benchmark: 0.023800134658813
 Browser: firefox
 Browser version: 3.68
 Browser engine: gecko
 Browser engine version: 1.928
 Platform: windows
 Platform version: 5.1
 Platform type: desktop
*/
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;
}
#content .subsection {
 float: left;
 width: 240px;
 padding: 20px;
 margin-right: 20px;
 background: #f00;
}
#content .subsection p {
 color: #000;
}
#heading1 {
 padding: 20px;
 margin-bottom: 20px;
}
#heading2 {
 background: #00f;
}
h3 { /* Inherited properties from: "#heading1", "#heading2" */
 padding: 20px;
 margin-bottom: 20px;
 background: #00f;
}

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials