CSS錯誤需要修復

Question

我找到了一個我想使用http://codepen.io/katmai7/pen/fyzuH的開關。在上面的鏈接中有一個工作示例，但代碼中存在錯誤，我通過代碼檢查器運行這個代碼，但無法弄清楚如何修復它。你知道如何解決它嗎？下面是代碼檢查說什麼：

Sorry! We found the following errors (6) 
URI : TextArea 
27 .wrap Parse Error .line{ position: absolute; top: 50px; width: 100%; border-top: 1px solid #1B1B1C; border-bottom: 1px solid #323334; } 
28 .wrap Parse Error } 
43 .switch  Property user-select doesn't exist : none 
45 .switch  Lexical error at line 45, column 3. Encountered: "&" (38), after : "" & 
48 :hover Parse Error .slide:after{ opacity: .05; } 
49 :hover Parse Error Lexical error at line 51, column 3. Encountered: "&" (38), after : "" 


html{ 
    height: 100%; 
} 

body{ 
    height: 100%; 
    background: #C1D1DA; 
    background: radial-gradient(ellipse at center, rgba(92,93,95,1) 0%,rgba(47,48,49,1) 100%); 
} 

.wrap{ 
    position:relative; 
    margin: 100px auto; 
    width: 90px; 
    height: 100px; 
    border: 1px solid #1F1F20; 
    border-radius: 5px; 
    background: linear-gradient(to bottom, rgba(58,59,60,1) 0%,rgba(28,28,29,1) 100%); 
    box-shadow:inset 0 3px 4px -2px rgba(94,96,96, 1), 0 0 6px -1px rgba(0,0,0, .8), 0 2px 7px -1px rgba(0,0,0, .5); 

    .line{ 
    position: absolute; 
    top: 50px; 
    width: 100%; 
    border-top: 1px solid #1B1B1C; 
    border-bottom: 1px solid #323334; 
    } 
} 


.switch{ 
    position: relative; 
    display: block; 
    margin: 13px 17px; 
    width: 55px; 
    height: 25px; 
    border: 1px solid #1A1A1B; 
    border-radius: 20px; 
    background: linear-gradient(to bottom, rgba(31,31,32,1) 0%,rgba(58,58,58,1) 100%); 
    box-shadow: 0 1px 1px 0 rgba(130,132,134, .6), inset 0 4px 0 -3px rgba(0,0,0, .3); 
    cursor: pointer; 
    transition: box-shadow .5s ease .27s, border-color .5s ease .27s; 
    user-select: none; 

    &:hover{ 
    .slide:after{ 
     opacity: .05; 
    } 
    } 

    &.p2{ 
    margin-top: 25px; 
    } 

    &:after{ 
    display: block; 
    width: 100%; 
    height: 100%; 
    border-radius: 20px; 
    background: green; 
    background: linear-gradient(to bottom, rgba(186,101,82,1) 0%,rgba(215,151,101,1) 100%);background: linear-gradient(to bottom, rgba(186,101,82,1) 0%,rgba(215,151,101,1) 100%); 
    content: ""; 
    opacity: 0; 
    transition: opacity .5s ease .27s; 
    } 

/一些背景/

&:before{ 
    position: absolute; 
    display: block; 
    width: 95%; 
    height: 60%; 
    border-radius: 20px; 
    background: #fff; 
    content: ""; 
    opacity: .03; 
    } 

    .icon-off, .icon-eye-open{ 
    position: absolute; 
    z-index: 2; 
    display: block; 
    line-height: 25px; 
    font-size: 18px; 
    } 

    .icon-eye-open{ 
    left: 5px; 
    color: #EDD6CD; 
    text-shadow: 0 1px 0 #97614B; 
    } 

    .icon-off{ 
    top: 1px; 
    right: 5px; 
    color: #6D6F70; 
    } 

    .slide{ 
    position: absolute; 
    top: -1px; 
    left: -2px; 
    z-index:5; 
    width: 25px; 
    height: 25px; 
    border: 1px solid #171718; 
    border-radius: 50%; 
    background: linear-gradient(to bottom, rgba(64,65,66,1) 0%,rgba(30,30,31,1) 100%); 
    box-shadow:inset 0 1px 2px 0 rgba(93,94,95, .8), 1px 3px 5px -2px rgba(0,0,0, .7); 
    transition: left .4s ease-in, border-color .4s ease-in .1s; 

    &:after{ 
     display: block; 
     width: 100%; 
     height: 100%; 
     border-radius: 50%; 
     background: linear-gradient(to bottom, rgba(243,232,223,1) 0%,rgba(204,169,140,1) 100%); 
     content: "";  
     opacity: 0; 
     transition: opacity .4s ease .1s; 
    } 
    } 
} 

input[type=checkbox]{ 
    display: none; 

    &:checked{ 
    + .switch{ 
     border-color: #4D2318; 
     box-shadow: 0 1px 1px 0 rgba(130,132,134, .6), inset 0 4px 0 -3px rgba(0,0,0, .3), 0 0 15px 0 rgba(213,147,99, .7); 

     &:after{ 
      opacity: 1; 
     } 

     .slide{ 
      left: 29px; 
      border-color: #704F3F; 
      &:after{ 
       opacity: 1; 
      } 
     } 
    } 
    } 
} 

Answer 1

您正在使用LESS語法，這肯定會引發錯誤一個CSS解析器。

LESS允許選擇嵌套這樣的：

.wrap { 
    /* some css */ 
    .line { 
     /* some more CSS */ 
    } 
} 

純CSS，這就是爲什麼你的CSS檢查拋出所有這些錯誤，才能做到這一點。該代碼基本上等同於：

.wrap { ... } 
.wrap .line { ... }