建站
咨詢
售后
建站咨詢
新聞中心
SASS是便是一門動態(tài)樣式語言，是一款款強化CSS的輔助工具，它在CSS語法的基礎(chǔ)上，增加了變量，嵌套，混合，導(dǎo)入，函數(shù)的高級功能，這些拓展使CSS更加強大與優(yōu)雅，有助于更好的管理樣式文件，以及更高效的開發(fā)項目。
創(chuàng)新互聯(lián)是專業(yè)的臥龍網(wǎng)站建設(shè)公司，臥龍接單;提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行臥龍網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
@extend 指令告訴 Sass 一個選擇器的樣式從另一選擇器繼承。
如果一個樣式與另外一個樣式幾乎相同，只有少量的區(qū)別，則使用 @extend 就顯得很有用。
以下 Sass 實例中，我們創(chuàng)建了一個基本的按鈕樣式 .button-basic，接著我們定義了兩個按鈕樣式 .button-report 與 .button-submit，它們都繼承了 .button-basic ，它們主要區(qū)別在于背景顏色與字體顏色，其他的樣式都是一樣的。
Sass 代碼：
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
Css 代碼：
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}
使用 @extend 后，我們在 HTML 按鈕標簽中就不需要指定多個類 class=”button-basic button-report” ，只需要設(shè)置 類就好了。
@extend 很好的體現(xiàn)了代碼的復(fù)用。
分享文章：Sass@extend與繼承使用方法
文章URL：http://www.dlmjj.cn/article/dpghood.html
