0

i tried to create mixin/function on sass like this

@function background-set-text-color($color)
  @if (lightness( $color ) > 40)
    @return black
  @else
    @return white

and i use this function on my class .button-filled

.button-filled
  background: var(--bg-primary)
  padding: var(--p-1p5) var(--p-3)
  font-weight: 500
  color: background-set-text-color(var(--primary))
  border: solid 2px

but it show error like this

./src/assets/sass/master.sass (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./src/assets/sass/master.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: argument `$color` of `lightness($color)` must be a color
        on line 2 of src/assets/sass/abstracts/_functions.sass, in function `lightness`
        from line 2 of src/assets/sass/abstracts/_functions.sass, in function `background-set-text-color`
        from line 5 of src/assets/sass/components/_button-filled.sass
        from line 14 of src/assets/sass/master.sass
>>   @if (lightness( $color ) > 40) {

   -------^

any solution guys? Thank you :) Have nice weekend guys :)

kurakura
  • 166
  • 1
  • 13

0 Answers0