From 92c861c4bb82324e520f501a5e93185499e74599 Mon Sep 17 00:00:00 2001
From: Eric Bollens <ebollens@ucla.edu>
Date: Tue, 16 Oct 2012 16:34:50 -0700
Subject: [PATCH] Add mention to extends functionality in
 Base/Image-Replacement [#125]

---
 doc/modules/base/Image-Replacement.md | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/doc/modules/base/Image-Replacement.md b/doc/modules/base/Image-Replacement.md
index 47529be..a547d95 100644
--- a/doc/modules/base/Image-Replacement.md
+++ b/doc/modules/base/Image-Replacement.md
@@ -35,19 +35,37 @@ To apply image replacement to an element, add the `.ir` class to the element and
 then create a CSS declaration containing the width, height, and background image to
 use in image replacement. For example:
 
+```css
+h1.website-title
+{
+	background-image: url(main-logo.png);
+	height: 200px;
+	width: 500px;
+}
+```
+
 ```html
-<h1>Website Title</h1>
+<h1 class="website-title ir">Website Title</h1>
 ```
 
+When working with a SASS source file that includes WebBlocks, this can be taken
+a step further using the `@extend` directive and then it is no longer necessary
+to apply the `.ir` class in markup:
+
 ```css
-h1
+h1.website-title
 {
+        @extend .ir;
 	background-image: url(main-logo.png);
 	height: 200px;
 	width: 500px;
 }
 ```
 
+```html
+<h1 class="website-title">Website Title</h1>
+```
+
 ## Responsive Considerations
 
 None
\ No newline at end of file