Sass引用父選擇器

可以通過使用&字符選擇父選擇器。它告訴應插入父選擇器在哪裏。

實例

下面的例子說明了在SCSS文件使用父選擇器:

引用父選擇器 - www.yiibai.com

引用父選擇器的使用示例

www.yiibai.com

接下來,創建文件style.scss。請注意這裏使用的字符,它指定要在父選擇器哪裏插入。

style.scss

a {
font-size: 20px;
&:hover { background-color: yellow; }
}

可以告訴SASS監視文件,並隨時使用SASS下面的命令更新修改的CSS文件:

sass --watch C:\Ruby22-x64\style.scss:style.css

接下來執行上面的命令,它會自動創建style.css文件,下面的代碼:

style.css

a {
font-size: 20px;
}
a:hover {
background-color: yellow;
}

輸出結果

讓我們來執行以下步驟,看看上面的代碼工作:

Sass引用父選擇器