Why does this CSS work on Codepen but not directly in browser?

问题

I'm trying to implement a CSS-only modal box with animation onto my website. It works perfectly on this Codepen I found: http://codepen.io/petebot/pen/DBvKj

But I can't test or customize this code on my website because it doesn't work on an HTML page.

What am I missing here?

Here's the HTML page:

<html>
<head>
<title></title>
<style>
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

.transition (@time: .5s, @range: all, @ease: ease-out) {
  -moz-transition: @range @time @ease;
  -webkit-transition: @range @time @ease;
  -o-transition: @range @time @ease;
  transition: @range @time @ease;
}

.transition-delay (@time: .4s) {
    -webkit-transition-delay: @time;  
    -moz-transition-delay: @time;  
    -o-transition-delay: @time;  
    -transition-delay: @time; 
}

.border-radius(@radius) {
    -moz-border-radius:@radius;
    -webkit-border-radius:@radius; 
  border-radius: @radius;
}

.gradient (@coler1: #fff, @coler2: #ccc) {
    background: @coler1;
    background: -moz-linear-gradient(@coler1, @coler2);
    background: -webkit-linear-gradient(@coler1, @coler2);
    background: -o-linear-gradient(@coler1, @coler2);
}

.box-shadow(@dims:0 0 10px, @color:#000) {
    box-shadow: @dims @color; // Opera, FFX4
    -moz-box-shadow:@dims @color; // FFX3.5
    -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
    .ie7 { filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", @color)); }
}

.inset(@dims:1px 1px 1px, @color:#fff) {
    box-shadow: @dims @color; // Opera, FFX4
    -moz-box-shadow:@dims @color; // FFX3.5
    -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
}

body { 
  width: 100%; 
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}


.button {
  margin: 40px auto;
  font-size: 72px;
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
  text-decoration: none;
  text-shadow: 1px 1px 0px #fff;
  font-weight: 400; 
  color: #666;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 20px 70px 30px;
  position: relative;
  top: 50px;
  background: #eee;
  width: 300px;
  display: block;
  text-align: center;
  .inset;
  .border-radius(5px);
  .transition;
  &:hover{ color: #333; background: #eeffff; .transition;}
}

.modalbg {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0);
    z-index: 99999;
    .transition(2s);
  .transition-delay(.2s);
    display: block;
    pointer-events: none;
  .dialog {
    width: 400px;
    position: relative;
    top: -1000px;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    .border-radius(10px);
    .gradient;
    .box-shadow;
  }
}

.modalbg:target {
    display: block;
    pointer-events: auto;
  background: rgba(4, 10 ,30, .8);
  .transition();
  .dialog {
    top: -20px;
    .transition(.8s);
    .transition-delay;
  }
}



.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
  .box-shadow;
  .transition;
  .transition-delay(.2s);
  &:hover { background: #00d9ff; .transition; }
}

.fineprint {
  font-style: italic;
  font-size: 10px;
  color: #646;
}
a { color: #333; text-decoration: none; }

</style>

</head>

<body>

<a class="button" href="#openModal">Open it up!</a>

<div id="openModal" class="modalbg">
  <div class="dialog">
    <a href="#close" title="Close" class="close">X</a>
    <h2>Holy Crap!!!</h2>
        <p>You freakin' did it!</p>
        <p>You opened up the freakin' modal window! Now close it, ya dingus.</p>
    <p class="fineprint">Based on the article "Creating a modal window with HTML5 & CSS3" at <a href="webdesignerdepot.com">Webdesigner Depot</a></p>
    <p class="fineprint">p.s. Sorry for calling you a dingus earlier.</p>
    </div>
</div>

</body>
</html>

回答1:

The problem is that you have the styles in LESS format. LESS is a CSS pre-processor. Is not supported natively by the browser. You should compile your LESS styles to CSS and then add those styles to your page.

In codepen the code works because the CSS panel is configured to use LESS but is just a codepen feature, sadly you can't do it for your site / page.

Check out LESS docs to see how to compile it to a valid CSS.