CSS 在复制和粘贴时发生更改？

Question

我正在尝试将代码从一个代码笔移动到另一个代码笔，尽管当我复制并粘贴它时，它会发生变化。我正在尝试/改变一下，有人有什么想法吗？移动到我自己的网站时，它似乎也没有正确复制。

原文：https://codepen.io/hayleyt/pen/ZyqBYW

我的： https://codepen.io/pen/

中文（

// SASS Variables

$white: #fff;

$navy: #2e2f35;

$navy-dark: #1e1e24;

$navy-light: #494a50;

$grey: #a5a5a4;

$green: #20c270;

$green-dark: #18a960;

// Moves menu to the left/right side of screen

$menu-orientation: right;

@media screen and (max-width: 600px) {

  .pushNav {

    width: 75%;

    #{$menu-orientation}: -75%

  }

}

@media screen and (min-width: 601px) {

  .pushNav {

    width: 350px;

    #{$menu-orientation}: -350px;

  }

}

ul.pushNav {

  padding: 0;

  margin: 0;

  list-style-type: none;

}

.pushNav {

  height: 100%;

  position: fixed;

  top: 0;

  z-index: 100;

  overflow: hidden;

  background: $navy;

  transition: ease-in-out 0.5s;

    hr {

    border: 1px solid #555;

  }

}

 .pushNav ,.pushNav a {

   font-size: 1em;

   font-family: helvetica, sens-serif;

   font-weight: 100;

   color: $white;

   text-decoration: none;

}

.pushNavIsOpen {

  overflow: auto;

  height: 100%;

}

.js-topPushNav.isOpen, .pushNav_level.isOpen {

 #{$menu-orientation} : 0;

}

.closeLevel, .openLevel {

  cursor: pointer;

}

.openLevel, .closeLevel, .pushNav a {

  padding: 1em 0;

  display: block;

  text-indent: 20px;

  transition: background 0.4s ease-in-out;

  &:hover {

    background: $navy-light;

  }

}

.hdg {

    background-color: $navy-dark;

}

.closeLevel, closelevel > i {

  font-size: 1em;

  color: $grey;

}

.burger {

  position: absolute;

  top: 24px;

  #{$menu-orientation}: 48px;

  i {

    font-size: 3em;

  }

}

.screen {

  position: fixed;

  background: rgba(0, 0, 0, 0.7);

  width: 100%;

  height: 0;

  top: 0;

  bottom: 0;

  #{$menu-orientation}: 0;

  opacity: 0;

  transition: opacity 0.5s ease-in-out;

}

.pushNavIsOpen .screen {

  height: 100%;

  opacity: 1;

}

Answer 1

修改某人的密码笔的最佳方法是分叉它。您可以在那里修改它。此外，当您将代码笔复制到您自己的站点时，请确保在文件中导入了所有相关的html标签和css / js。我的猜测是，您正在尝试使用需要更多配置步骤的 SASS 变量。为了简化您的工作，只需将代码笔中的CSS视图切换到“查看编译的CSS”，然后将其复制到您的网站中即可。