Преобразование SCSS в CSS

Я следую учебнику, в котором используется SCSS, который я не использую в своем приложении. Я хочу преобразовать SCSS ниже в CSS. Когда я использую сайт, такой как SassMeister, я получаю сообщение об ошибке «undefined mixin 'transition»Преобразование SCSS в CSS

Как я могу преобразовать это в 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); 
    } 
}

источник

2015-03-24 theartofbeing

Добавить @import "compass"; в начале вашего SCSS фрагмента кода, так что вы можете использовать Примеси, предоставляемые compass framework.

Кстати, 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)

источник

2015-03-24 11:28:35

Это должно работать, в 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 не могу читать их.

источник

2015-03-24 11:30:15 abbott567

На самом деле SassMeister поддерживает множество расширений SCSS, вы можете использовать их. –

Возможно, я неправильно понял вопрос, я подумал, что в вопросе сказано, что SCSS не используется из-за строки «Я следую учебнику, использующему SCSS, который я не использую в своем приложении» – abbott567

Преобразование SCSS в CSS

ответ

Смежные вопросы