jsfiddle 和 codepen 上相同 html/css 代码之间无法解释的区别

Question

我有相同的 html / css 代码，但输出仅适用于 codepen 而不是 jsfiddle。怎么来的？

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;
  }
}

jsfiddle：https://jsfiddle.net/snaL0cj8/5/

代码笔：http://codepen.io/stephenjbell/pen/BWvgXw

Answer 1

那是因为 jsfiddle 中的 css 设置为 css 而它需要 scss .

单击 css 部分中的设置选项，然后从 Language select SCSS in jsfiddle 的下拉列表中单击，这样就可以了

看到这个fiddle：https://jsfiddle.net/seofbrse/

jsfiddle 和 codepen 上相同 html/css 代码之间无法解释的区别

Unexplainable difference between same html/css code on jsfiddle and codepen

html

css

jsfiddle

codepen