CODEWITHSUNDEEP
pluginssassvisual-studio-code
Abualhassan
Abualhassan

Reputation: 61

Live Sass Compiler throwing error on SASS code

While I am learning mixins in SASS, I'm facing an error in the output area:

$bg-prm: #2caddd
$bg-sec: #f3f3f3
$bg-def: #454545
$bg-wht: #fff

@mixin Sans-Serif
    font-family: sans-serif

@mixin flex
    display: -webkit-flex
    display: flex

@mixin bgPrimary
    background-color: $bg-prm
    color: $bg-wht

body
    @include Sans-Serif
    .row
        @include flex

.bg-prem
    @include bgPrimary

Error:

Compilation Error
Error: Invalid CSS after "$bg-prm: #2caddd": expected 1 selector or at-rule, was "{}"
    on line 1 of sass/Users/hassan/Desktop/JS_test/style.sass
>> $bg-prm: #2caddd {}

    ---------------^

While in Codepen.io SASS compiler, this code is working.

Upvotes: 0

Views: 1390

Answers (1)

Arkellys
Arkellys

Reputation: 7811

You seem to mix up SASS ans SCSS syntaxes. In your case, you should declare mixins with = and include them with +:

=Sans-Serif()
  font-family: sans-serif

body
  +Sans-Serif

You can check the differences between the two syntaxes here.

Upvotes: 1

Related Questions