Simple CSS: A DSL for Cascading Style Sheets

SCSS is an emerging domain specific language for cascading style sheets. It's a powerful professional tool that could be in constant evolving.

SCSS boasts more features and abilities than regular CSS language out there. This is a list of SCSS first features:

• Nesting
• Variables
• SCSS functions

IMPORTANT! SCSS is not a CSS parser/validator, we assume you know how to write CSS files but don't worry, it could be one of the upcoming features. Sounds tasty, right? Peep another features that could been added in the list below:

• More SCSS functions.
• Parsing and validator.
• Improved grammar.
• Console integration.

Now you must be wondering, how SCSS works? Luckily we have a number of examples that will allow you to understand the simplicity and powerfulness of this language.

Example 1: "Nested classes"

This example will help you understand how to do some nesting in SCSS:

#wrapper {
    font-family = "Times New Roman", Times, serif;
    font-weight = bold;
    height = 40 in;
    width = 100%;
    margin = 0 auto;
    %%.linkRojo{
        color = #123123;
        %%&[target=_blank]{
            color = #aaa;
        }
    }
    %%>a{
        text-decoration= none;
        %%&:hover{
            font-size = 18px;
        }
   }
}
								

Don't be afraid, the syntax will be explained later. Let's see the translation to CSS:

#wrapper {
    font-family : "Times New Roman", Times, serif;
    font-weight : bold;
    height : 40 in;
    width : 100%;
    margin : 0 auto;
}

#wrapper linkRojo{
    color : #123123;
}

#wrapper linkRojo[target=_blank]{
    color : #aaa;
}

#wrapper >a{
    text-decoration: none;
}

#wrapper >a:hover{
    font-size: 18px;
}
								

As you can see the code hass been reduced a lot! But there was something weird, right? What the heck were those percentages doing there? Let us introduce you to...

Example1.1: "SCSS Operator"

The SCSS Operator "%%", which can be followed by the & character is the nesting mode. If you choose the first one the nested selector will be placed in the css separated by a space, while the other will add the selector immediately after its parent without separation.

Example 2: "Using variables and '@'key rules"

This example will help you understand how vars work in SCSS and the fundamentals of the SCSS block.

The SCSS block is an optional structure where we will be defining inside all the vars and '@' key rules like @import or @charset. The SCSS block is always at the beginning of the file, inside two SCSS operators.

%%
$my-color = red;
$your-color = blue;

@imports url(anothercss.css) print,screen;
@charset "UTF-8";
%%
//Your SCSS code here
								

Example 3: "SCSS functions"

In this example we are going to cover the extended funcionalities that SCSS has. The first ones implemented are:

• Inheritance.
• Shading a color.

The first one is %%extends(#id) or %%extends(.class). It's used like a full CSS attribute and it serves for extending all the attributes from the specified class or id to the derived selector.

.persona{
    width= 50%;
    height= 70%;
}

#paco{
    %%extends(".persona");
}
								

The second one is %%shade(color, percentage) and it is used like an attribute value. Given a hex or RGB color and a percentage between -100~100 the function will return the related shade/tint.

.colorful{
    background-color = %%shade(#0083ff,35);
}