Différence inexplicable entre le même code html/css sur jsfiddle et codepen

Question

J'ai le même code html/css mais la sortie ne fonctionne que sur codepen et non sur jsfiddle. Comment venir?

html

<div class="spring"> 
    <div class="text">These are words</div> 
    <div class="sect sect1"> 
    <div class="text">written down</div> 
    <div class="sect sect2"> 
     <div class="text">and</div> 
     <div class="sect sect3"> 
     <div class="text">even further down.</div> 
     </div> 
    </div> 
    </div> 
</div> 

css

@import url('https://fonts.googleapis.com/css?family=PT+Sans'); 

body { 
    perspective: 100000px; 
    transform-style: preserve-3d; 
    font-size:2em; 
    font-family:"PT Sans",sans-serif; 
    text-align:center; 
    color:#4a4a4a; 
    background-color:#eee; 
    box-sizing:border-box; 
} 

.spring { 
    padding:1em 2em; 
    margin-top:2em; 
    background-color:#4a4a4a; 
    color:#fff; 
    border-radius:3px; 
    display:inline-block; 
    transform: rotateX(50deg) rotateY(-22.5deg); 
    transform-style: preserve-3d; 
    transition:0.4s all; 

    &:hover { 
    transform: rotateX(40deg) rotateY(-10.5deg); 
    } 

    .text { 
    transform:scaleY(1.5); 
    } 

    .sect { 
    position:absolute; 
    display:block; 
    border:4px solid #4a4a4a; 
    top:0; 
    transform-style: preserve-3d; 
    border-radius:3px; 
    } 

    .sect1 { 
    background-color:#fff; 
    color:#4a4a4a; 
    border:4px solid #4a4a4a; 
    transform:rotateY(30deg); 
    transform-origin:0 0; 
    left:0; 
    padding:1em 1em 1em 3em; 
    } 

    .sect2 { 
    background-color:#4a4a4a; 
    color:#fff; 
    transform:rotateY(-30deg); 
    transform-origin:100% 0; 
    right:0; 
    padding:1em 3em 1em 1em; 
    } 

    .sect3 { 
    background-color:#fff; 
    color:#4a4a4a; 
    border:3px solid #4a4a4a; 
    transform:rotateY(30deg); 
    transform-origin:0 0; 
    left:0; 
    width:300px; 
    padding:1em 1em 1em 3em; 
    } 
} 

Le jsFiddle: https://jsfiddle.net/snaL0cj8/5/

Le codepen: http://codepen.io/stephenjbell/pen/BWvgXw

Answer 1

C'est parce que le réglage css dans jsfiddle est réglé sur css WHE ras il doit être scss.

Cliquez sur l'option de réglage dans la section css et dans le menu déroulant pour Language sélectionner SCSS dans jsFiddle et qui fait l'affaire

Voir ce violon: https://jsfiddle.net/seofbrse/