Why does not my sass compile this code?

Navigation
-1
.button {
    //background-color: $button-blue-bg;
    color: $button-font-color;
    font-size: $button-font-size;
    position: relative;
    display: block;
    text-align: center;
    line-height: 20px;
    padding: 0 12px;
    border-radius: 8px;
    background-image: url('../assets/ui/button-blue-center.png');
    background-repeat: no-repeat;
    background-size: cover;
    @include no-select();

    &:before, &:after {
        content: ' ';
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 0;
        width: 8px;
        height: 20px;
    }

    &:before {
        background-image: url('../assets/ui/button-blue-left.png');
        left: 0px;
    }

    &:after {
        background-image: url('../assets/ui/button-blue-right.png');
        right: 0px;
    }
}

.button.blue-alt {
    background-image: url('../assets/ui/button.b1.middle.active.png');
    background-repeat: repeat-x;
    background-size: 100% 100%;
    display: inline-block;
    min-width: 40px;

    &:before {
        background-image: url('../assets/ui/button.b1.left.active.png');
        left: 0px;
    }

    &:after {
        background-image: url('../assets/ui/button.b1.right.active.png');
        right: 0px;
    }
}

What is the error?

    
asked by anonymous 23.08.2018 / 05:02

1 answer

1

There are three errors in your code:

  • The variable $button-font-color was not declared.

      

    Undefined variable.   stdin 3:12 root stylesheet on line 3 at column 12

  • The variable $button-font-size was not declared.

      

    Undefined variable.   stdin 5:16 root stylesheet on line 5 at column 16

  • Mixin no-select was not declared / was not imported ( @import )

      

    Undefined mixin.   stdin 16: 5 root stylesheet on line 16 at column 5

To solve, just make the declaration: 

$button-font-color: green;
$button-font-size: 1;

@mixin no-select()
{
    font-size: 10px;
}

// aqui vem o restante do código
.button {
    //background-color: $button-blue-bg;
    color: $button-font-color;
    font-size: $button-font-size;
...

Reference

23.08.2018 / 05:18
Change the size of the vector during the program? Moodle task [closed]