chore(docs): superstyle extending classes

docs/29.superstyle.md

@@ -81,8 +81,8 @@ Note the `is="super"` attribute on the style tag, that is required.
 
 The style sheet itself must always declare a `main` element which will contain your application.
 
-Any selector inside your `main` selector will be treated as a document node declaration.
-This means that any selector within `main` is declaring specific instances of the given tag name.
+Any selector inside your `main` selector will be treated as a document node declaration.\
+This means that any selector within `main` is declaring specific instances of the given tag name.\
 If a selector doesn't specify a tag name, the tag name will default to `div`.
 
 > [!NOTE]
@@ -135,3 +135,42 @@ function main(HandlebarsService $handlebars){
  $handlebars->withTemporaryDirectory('your/custom/tmp')
 }
 ```
+
+## Extending Classes
+
+Although you cannot declare CSS classes within `main`, you can declare them outside and then extend them inside `main`.
+
+Here's an example
+
+```hbs
+<style is="super">
+ .btn {
+ border: 0;
+ font-size: 1.3rem;
+ justify-self: center;
+ align-self: center;
+ background: rgb(234, 40, 5);
+ color: rgb(233, 166, 155);
+ border-radius: 3rem;
+ padding: 1rem;
+ cursor: pointer;
+ box-shadow: 0;
+ transition: 200ms transform;
+
+ &:hover {
+ transform: scale(1.1);
+ }
+
+ &:active {
+ box-shadow: 0;
+ transform: scale(0.9);
+ }
+ }
+
+ main {
+ button.btn{
+ content: "This element extends styles from .btn";
+ }
+ }
+</style>
+```