no mixin named transition-duration-CodePudding

I am migrating from Bootstrap 3 to Bootstrap 4. So I am converting the LESS files to SCSS. I used this to convert my files.

However, the error I get is: no mixin named transition-duration

charts.less

.mini-charts-item {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    position: relative;
    margin-bottom: 30px;

    &:before {
        .transition(width);
        .transition-duration(500ms);
        .backface-visibility(hidden);
        content: "";
        width: 113px;
        height: 100%;
        background: rgba(0,0,0,0.1);
        position: absolute;
        left: 0;
        top: 0;
    }
}

charts.scss

.mini-charts-item {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    position: relative;
    margin-bottom: 30px;

    &:before {
        content: "";
        width: 113px;
        height: 100%;
        background: rgba(0,0,0,0.1);
        position: absolute;
        left: 0;
        top: 0;
        @include transition(width);
        @include transition-duration(500ms);
        @include backface-visibility(hidden);
    }
}

CodePudding user response：

'transition-duration' is not a mixin. it's a built-in css property for animations. You can use it with no need to include it. For more info you can refer to [this link].1