将 SCSS 转换为 CSS

Question

我正在学习使用 SCSS 的教程，但我没有在我的应用程序中使用它。我想把下面的SCSS转换成CSS。当我使用像 SassMeister 这样的网站时，我收到一条错误消息 "undefined mixin 'transition'"

如何将其转换为 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

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

顺便说一下，SassMeister 支持很多 SCSS 扩展

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，因为常规 CSS 无法读取它们。

Answer 3

把它放在那里以防它对任何人有帮助——通过命令行从 scss 转换为 css。

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

sass --watch filename.scss:filename.css

注意：这是 "watching" 对 filename.scss 的更改，因此您可能需要进行任意保存才能获取 "changes"。

稍后，它将完成并自动填充 filename.css（连同 filename.css.map）在同一目录中。

将 SCSS 转换为 CSS

Convert SCSS to CSS

css

sass