將CSS屬性包含在另一箇中，以及在css中的'＆'的含義

Question

我試圖製作一個交互式漢堡包圖標，並在代碼筆上找到了一個教程和代碼。問題是我在代碼筆上找到的代碼在我的機器上不起作用，但它在代碼筆上生成結果。另外，在CSS中，我可以看到放置在其他屬性中的某些屬性，這些屬性我都不明白。請參閱下面的代碼。

HTML：

<div class="nav-icon cross"> 
<div class="span"></div> 
</div> 

CSS：

.nav-icon{ 
    height:70px; 
    width:88px; 
    position:relative; 

    .span { 
    height:6px; 
    width:55px; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    background:black; 
    transition:all 0.3s; 

    &::before,&::after { 
     height:6px; 
     width:100%; 
     background:black; 
     position:absolute; 
     content:""; 
     transition:all 0.3s; 
    } 
    &::after { 
     top:20px; 
    } 
    &::before { 
     top:-20px; 
    } 
    } 

    &.active .span::after { 
    top:0; 
    transform:rotate(45deg); 
    } 
    &.active .span::before { 
    top:0; 
    transform:rotate(-45deg); 
    } 

    &.active .span{ 
    background:none; 
    } 
} 

Answer 1

你貼這是一個SCSS，你必須把它編譯成CSS

您可以閱讀有關SCSS只是下面的鏈接

sass link

.nav-icon { 
 
    height: 70px; 
 
    width: 88px; 
 
    position: relative; 
 
} 
 

 
.nav-icon .span { 
 
    height: 6px; 
 
    width: 55px; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    background: black; 
 
    transition: all 0.3s; 
 
} 
 

 
.nav-icon .span::before, 
 
.nav-icon .span::after { 
 
    height: 6px; 
 
    width: 100%; 
 
    background: black; 
 
    position: absolute; 
 
    content: ""; 
 
    transition: all 0.3s; 
 
} 
 

 
.nav-icon .span::after { 
 
    top: 20px; 
 
} 
 

 
.nav-icon .span::before { 
 
    top: -20px; 
 
} 
 

 
.nav-icon.active .span::after { 
 
    top: 0; 
 
    transform: rotate(45deg); 
 
} 
 

 
.nav-icon.active .span::before { 
 
    top: 0; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.nav-icon.active .span { 
 
    background: none; 
 
} 
 

 

 
/*# sourceMappingURL=style.css.map */

<div class="nav-icon cross"> 
 
    <div class="span"></div> 
 
</div>

Answer 2

與號（&）在上海社會科學院符號代表了你選擇的元素的包裝器的佔位符。

例如，如果您有：

.paragraph { 
    color: blue; 

    &.active { 
     color: red; 
    } 
} 

是一樣的書寫

.paragraph { 
    color: blue; 
} 

.paragraph.active { 
    color: red; 
}