建站
咨詢
售后
建站咨詢
新聞中心
Sass 是一種 CSS 的預(yù)編譯語言。它提供了 變量（variables）、嵌套（nested rules）、 混合（mixins）、 函數(shù)（functions）等功能，并且完全兼容 CSS 語法。Sass 能夠幫助復(fù)雜的樣式表更有條理， 并且易于在項(xiàng)目?jī)?nèi)部或跨項(xiàng)目共享設(shè)計(jì)。
創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),五指山網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:五指山等地區(qū)。五指山做網(wǎng)站價(jià)格咨詢:18980820575
@mixin 指令允許我們定義一個(gè)可以在整個(gè)樣式表中重復(fù)使用的樣式。
@include 指令可以將混入（mixin）引入到文檔中。
定義一個(gè)混入
混入(mixin)通過 @mixin 指令來定義。 @mixin name { property: value; property: value; … } 以下實(shí)例創(chuàng)建一個(gè)名為 “important-text” 的混入：
Sass 代碼：
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
注意：Sass 的連接符號(hào) – 與下劃線符號(hào) _ 是相同的，也就是 @mixin important-text { } 與 @mixin important_text { } 是一樣的混入。
使用混入
@include 指令可用于包含一混入：
Sass @include 混入語法：
selector {
@include mixin-name;
}
因此，包含 important-text 混入代碼如下：
實(shí)例
.danger {
@include important-text;
background-color: green;
}
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
Css 代碼：
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
混入中也可以包含混入，如下所示：
實(shí)例
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
向混入傳遞變量 混入可以接收參數(shù)。
我們可以向混入傳遞變量。
定義可以接收參數(shù)的混入：
實(shí)例
/* 混入接收兩個(gè)參數(shù) */
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // 調(diào)用混入，并傳遞兩個(gè)參數(shù)
}
.myNotes {
@include bordered(red, 2px); // 調(diào)用混入，并傳遞兩個(gè)參數(shù)
}
以上實(shí)例的混入?yún)?shù)為設(shè)置邊框的屬性 (color 和 width) 。
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
Css 代碼：
.myArticle {
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
混入的參數(shù)也可以定義默認(rèn)值，語法格式如下：
實(shí)例
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
在包含混入時(shí)，你只需要傳遞需要的變量名及其值：
實(shí)例
@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; }}p { @include sexy-border(blue); }h1 { @include sexy-border(blue, 2in); }
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
Css 代碼：
p { border-color: blue; border-width: 1in; border-style: dashed; }h1 { border-color: blue; border-width: 2in; border-style: dashed;}
可變參數(shù)
有時(shí)，不能確定一個(gè)混入（mixin）或者一個(gè)函數(shù)（function）使用多少個(gè)參數(shù)，這時(shí)我們就可以使用 … 來設(shè)置可變參數(shù)。
例如，用于創(chuàng)建盒子陰影（box-shadow）的一個(gè)混入（mixin）可以采取任何數(shù)量的 box-shadow 作為參數(shù)。
實(shí)例
@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows;}.shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);}
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
Css 代碼：
.shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
瀏覽器前綴使用混入 瀏覽器前綴使用混入也是非常方便的，如下實(shí)例：
實(shí)例
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
Css 代碼：
.myBox {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
當(dāng)前標(biāo)題：詳解Sass@mixin與@include
本文地址：http://www.5511xx.com/article/djpeoeo.html
