Question

EDIT: Achieve this approach without using @mixin and @include

Currently I’m using Sass as my CSS precompiler for a large and brand new project. I admit it, I really liked the idea behind this tools and it becomes more usable when you want to use it with @mixin functions.

I want to use Sass more quickly. My thought is, assign aliases to variables and just use it in CSS declaration. Consider the following code blocks.

$backgroundColor: #F1F2F2;

body {
    background: $backgroundColor;
}

works fine in Sass. But I want to achieve,

$backgroundColor: "background: #F1F2F2";

body {
    $backgroundColor;
}

This block returns error in Sass. Any idea, or is it possible to use Sass in this way?

Answer 1

@mixin backgroundColor {
    background: #F1F2F2;
}

body {
    @include backgroundColor;
}

Should work.