CSS在codepen上远程引用但不在本地引用

Question

以下是我尝试在本地使用的代码：https://codepen.io/natewiley/pen/jEWBQj

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,800);

*, *:before, *:after {
    box-sizing: border-box;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

html, body {
    height: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    background: #262626;
    background: radial-gradient(circle at top center, rgb(70, 70, 70), black);
    overflow-x: hidden;
}

.wrap {
    max-width: 400px;
    min-width: 380px;
    margin: 0 auto;
    padding: 80px 10px;
  transform-style: preserve-3d;
}


.cc_images {
    margin-bottom: 5px;
    transform: translateY(20px);
    z-index: 0;

    .card {
        float: left;
        width: 16.666%;
        height: 40px;
        position: relative;
        text-align: center;
        perspective: 500px;
     transform-style: preserve-3d;
        z-index: 50;
     transition: .4s;

        &.show_cvc {
            .inside {
                transform: rotateY(180deg);
            }
        }

        &.show_card {
            transform: translateY(-20px);
            .front img, .back img {
                opacity: 1;
                -webkit-filter: grayscale(0);
                filter: none;
            }
        }

        .inside {
            width: 100%;
            height: 100%;
            display: block;
            transform-style: preserve-3d;
            transition: .4s ease-in-out;
        }

      .front, .back {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        img {
            max-width: 100%;
            display: block;
                transition: .3s;
                opacity: .1;
                filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);
        }
      }

      .back{
            transform: rotateY(-180deg);
      }
    }
}

.input-wrap {
    position: relative;
    &:after {
        position: absolute;
        font-family: "FontAwesome";
        transition: .5s;
        opacity: 0;
    }
    &.valid {
        &:after {
            content: "\f00c";
            color: #03B410;
            right: 10px;
            top: 9px;
            font-size: 22px;
            opacity: 1;
        }
    }
    &.error {
        &:after {
            content: "\f00d";
            font-size: 20px;
            color: #E43737;
            right: 12px;
            top: 10px;
            opacity: 1;
        }
    }
}


#cc_number {
    margin-bottom: 10px;
}

.expiration-wrap {
    width: 58%;
    margin-right: 2%;
    float: left;
}

.cvc-wrap {
    width: 40%;
    float: left;
}


label {
    position: absolute;
    background: #2c2c2c;
    background-image: linear-gradient(to bottom, #434343, #222);
    border: 1px solid #222;
    color: white;
    height: 40px;
    width: 60px;
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(0,0,0,.8);
    text-transform: uppercase;
    padding-top: 8px;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 0 rgba(0,0,0,.2);
}


input {
    z-index: 10;
    border: 0;
    height: 40px;
    font-size: 18px;
    padding: 0 5px;
    padding-left: 70px;
    width: 100%;
    border: 1px solid black;
    &:focus {
        outline: none;
    }
}


.info {
    font-size: 15px;
    line-height: 1.4;
    color: #bbb;
    text-align: center;
    margin-top: 20px;
  small {
    display: block;
    font-size: .85em;
  }
    a {
        color: skyblue;
        text-decoration: none;
        &:hover {
            color: white;
        }
    }
}

当我从上面的链接引用css时，它可以工作，但是如果我尝试在本地使用它，即使它是相同的css也不起作用。

当我使用它时，它不起作用。

有人可以解释我如何让css在我的服务器上运行吗？

[ANSWER] 的

我需要将sass css编译为常规css，所以我将上面的代码放到style.scss中并在linux中运行

sudo su -c "gem install sass" #install sass
sass style.scss style.css #convert sass to css