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

Question

I have the same html / css code but the output only works on codepen and not on jsfiddle. How come?

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

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

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

SCSS on codepen vs. CSS in jsfiddle - Here you go: jsfiddle.net/snaL0cj8/7 — Alon Eitan
– Alon Eitan, Commented Apr 1, 2017 at 18:16

Shubham Khatri · Accepted Answer · 2017-04-01 18:19:37Z

1

Thats because the css setting in jsfiddle is set to css wheras it need to be scss .

Click on the Setting option in the css section and from the dropdown for Language select SCSS in jsfiddle and that does the trick

See this fiddle: https://jsfiddle.net/seofbrse/

answered Apr 1, 2017 at 18:19

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mathieu Over a year ago

thanks, working. I had spotted codepen was set to scss instead of css but I did not see any "variable" really requiring scss...so i thought the issue was not related to that.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related