M
M
Matvey2021-12-30 18:46:41
Sass
Matvey, 2021-12-30 18:46:41

How to fix "Undefined mixin" error?

When connecting SASS
sass --watch st.scss:st.css

Throws an error

>>> Change detected to: st.scss
      error st.scss (Line 4: Undefined mixin 'position'.)


scss code:
.slider-ctr {
    width: 700px;
    height: 440px;
    @include position(absolute, 50% x x 50%);
    margin-top: -220px;
    margin-left: -350px;
    box-sizing: border-box;
    border: 10px solid white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 10px 15px 3px rgba(0, 0, 0, .15), 0 5px 20px 3px rgba(0, 0, 0, .1);
    &:after {
        content: "";
        @include position(absolute, 0 0 0 0);
        background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
        background: -webkit-linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
        pointer-events: none;
        z-index: 9;
    }
}

.slider-control {
    @include position(absolute, x 30px 30px x);
    width: 80px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 3px 3px 3px rgba(0, 0, 0, .15);
    z-index: 99;
    .control {
        width: 50%;
        height: 40px;
        display: block;
        float: left;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        transition: .3s all ease;
        background: white;
        .icon {
            pointer-events: none;
            transition: .3s all ease;
        }
        &.disabled {
            pointer-events: none;
            background: #ddd;
            .icon {
                opacity: .5;
            }
        }
    }
}

.slide {
    @include position(absolute, 0 0 0 0);
    transition: .45s all cubic-bezier(0.65, 0.05, 0.36, 1);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    &:before {
        content: "";
        @include position(absolute, 0 0 0 0);
        background: rgba(0, 0, 0, .125);
    }
    // slide-on animation
    &.slide-on {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }
    &.text-on .title {
        transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
    &.text-on .author {
        transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .6s;
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
    img {
        display: block;
    }
    figcaption {
        @include position(absolute, 30px x x 30px);
    }
    .title {
        font-size: 50px;
        margin-bottom: 2px;
        color: white;
        transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
        font-weight: 400;
        letter-spacing: 10px;
        text-transform: uppercase;
        position: relative;
    }
    .author {
        font-size: 16px;
        color: white;
        opacity: .8;
        transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
        font-weight: 300;
        letter-spacing: 3px;
        position: relative;
        z-index: 9;
    }
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question