Question

我正在关注使用SCSS的教程，我在我的应用程序中没有使用它。我想将下面的SCSS转换为CSS。当我使用像SassMeister这样的网站时，我收到一条错误，上面写着“未定义的混合'过渡'”

如何将其转换为CSS？

.main-view-container{
    // Animations for the separate UI Views
    &.ng-enter,
    &.ng-leave{
        position: absolute;
        left: 0;
        right: 0;
    }

    &.ng-enter{
        @include transition(.2s ease-out all .2s);
    }

    &.ng-leave{
        @include transition(.2s ease-out all);
    }

    &.ng-enter,
    &.ng-leave.ng-leave-active{
        @include opacity(0);
    }

    &.ng-leave,
    &.ng-enter.ng-enter-active{
        @include opacity(1);
    }
}

Answer 1

在@import "compass";代码段的开头添加SCSS，以便您可以使用compass framework提供的mixins。

顺便说一句，SassMeister支持许多SCSS Extensions

Ark  (v0.2.0)
Base.Sass  (v1.6.0)
Bitters  (v0.10.0)
Blend Modes  (v0.0.2)
Bootstrap Sass  (v3.3.3)
Bourbon  (v4.2.0)
Box  (v0.1.2)
Breakpoint  (v2.5.0)
Breakpoint Slicer  (v1.3.6)
Breakup  (v1.0.2)
CSShake  (v616a877957)
Ceasar Easing  (v0.7)
Color Hacker  (v1.0.0)
Color Schemer  (v0.2.8)
ColorMeSass  (vfd9afc6c1f)
Compass  (v1.0.3)
Compass Inuit  (v5.0.2)
Compass Placeholders  (v1.1.1)
Compass Slideshow  (v0.2.0)
Fancy Buttons  (v1.2.0)
Fittext  (v0.0.5)
Flint  (v2.1.2)
Foundation  (v5.5.1)
Garnish  (v0.2.1)
Grid Coordinates  (v1.2.0)
Guff  (v1.0.0)
Harsh  (v1.0.0)
Include Media  (v1.1.2)
Jacket  (v1.0.0)
Jeet  (v6.1.2)
Juice  (v1.0.0)
MathSass  (v0.9.5)
Modular Scale  (v2.0.6)
Neat  (v1.6.0)
Normalize SCSS  (v3.0.2)
Photoshop Drop Shadow  (v0.0.1)
Position  (v0.2.14)
Quotation Marks  (v0.1.1)
Responsive Calculator  (v0.0.2)
Responsive Modular Scale  (v0.2.1)
Responsive Sass  (v0.1.1)
Salsa  (v0.0.1)
Sass A11Y  (v0.1.0)
Sass Color Helpers  (v2.0.0)
Sassifaction  (v0.0.4)
Sassy Buttons  (v0.2.6)
Sassy Maps  (v0.4.0)
Sassy Text Shadow  (v0.0.4)
Sassy-Gridlover  (v1.1.0)
Sassy-Math  (v1.5.1)
SassyBitwise  (v1.1.2)
SassyCast  (v1.1.1)
SassyJSON  (v1.1.8)
SassyLists  (v2.2.1)
SassyMatrix  (v1.0.1)
SassySort  (v1.0.0)
SassyStrings  (v1.1.4)
Scut  (v1.1.2)
Singularity Extras  (v1.0.0)
Singularity Quick Spanner  (v0.1.3)
Singularity.gs  (v1.5.1)
Stipe  (v0.0.6.4)
Stitch  (v0.1.4)
Sunglass  (v3.0.5)
Susy  (v2.2.2)
Toolkit  (v2.7.0)
True  (v1.0.1)
Typecsset  (v0.3.0)
Typesettings  (v2.3.3)
UtilityBelt  (v1.1.0)
YIQ Color Contrast  (v1.1.1)
Zen Grids  (v1.4)

Answer 2

这应该可行，在SCSS中将事物包装在其他内容中时，在编译时它们只是将父项添加到前面。所以在普通的CSS中，上面的内容如下所示：

.main-view-container .ng-enter,
.main-view-container .ng-leave {
        position: absolute;
        left: 0;
        right: 0;
}

.main-view-container .ng-enter{
    transition: ease-out all .2s;
}

.main-view-container .ng-leave{
    transition: 2s ease-out all;
}

.main-view-container .ng-enter,
.main-view-container .ng-leave.ng-leave-active {
    opacity: 0;
}

.main-view-container .ng-leave,
.main-view-container .ng-enter.ng-enter-active {
    opacity: 1;
}

你不能使用@includes作为mixins，因为普通的CSS无法读取它们。

Answer 3

将它放在那里以防万一 - 通过命令行从scss转换为css。

只需访问终端中存储scss文件的目录，然后输入：

sass --watch filename.scss:filename.css

注意：这是“观察”filename.scss的更改，因此您可能需要进行任意保存才能获取“更改”。

在短时间内，它将完成并自动填充filename.css（以及filename.css.map）在同一目录中。

将SCSS转换为CSS

3 个答案: