CODEWITHSUNDEEP
vue.jssassvisual-studio-codevuejs2node-sass
junerockwell
junerockwell

Reputation: 848

Vue SCSS lighten()

How to use SASS color functions like lighten( ); in VueJS? Exact code below:

<style lang="scss">
@import "../assets/variables";

.disable-primary {
  lighten( $primary, 10% );
}
</style>

But I get a compile error in VS Code:

Failed to compile.
./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue- 
loader/lib/style-compiler?{"vue":true,"id":"data-v- 
8dc7cce2","scoped":false,"hasInlineConfig":false}!./node_modules/sass- 
loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue- 
loader/lib/selector.js?type=styles&index=1!./src/components/Home.vue
Module build failed: 
lighten( $color-primary, 10% );
^
  Property "lighten" must be followed by a ':'

Upvotes: 0

Views: 1644

Answers (1)

enys
enys

Reputation: 533

The function lighten only returns a color, you still have to assign it to a CSS property that accepts a color string, for instance:

.disable-primary {
    background-color: lighten( $primary, 10% );
}

Or whatever property you wanted to set.

Upvotes: 6

Related Questions