安裝parcel
- 打開(kāi)目標(biāo)文件夾(
文件夾里面有一個(gè) xx.html文件 與一個(gè) yyy.scss)
cd scss-demo
- npm 快速初始化(
可以跳過(guò)一些基礎(chǔ)設(shè)置)
npm init -y
- 在目標(biāo)文件中安裝
parcel
npm i -D parcel
- 用
parcel編譯目標(biāo)文件(這個(gè)過(guò)程中會(huì)安裝Node Sass)拷泽，把.scss轉(zhuǎn)化成.css
npx parcel index.html
SCSS的常用功能
嵌套選擇器
??如下
<style>
.box {
border: 2px solid grey;
}
.box > ul {
background-color: pink;
}
.box > ul > li {
color: greenyellow;
border: 2px solid blue;
}
</style>
<div class="box">
<ul>
<li>First</li>
<li>Second</li>
<li>Thrid</li>
</ul>
</div>
上例中的CSS可以使用SCSS嵌套恩沽，如下demo
??SCSS基礎(chǔ)用法①-嵌套
.box {
border: 2px solid grey;
> ul {
background-color: pink;
> li {
border: 2px solid blue;
color: grey;
}
}
}
變量 $variable
任何值都可以作為變量砸狞。且變量可以作為另一個(gè)變量的值(
如??的變量$grey作為變量$gray的值)荒勇，這樣就使兩個(gè)變量其實(shí)代表的是一個(gè)值荷逞。還有一點(diǎn)好處是使用SCSS變量可以批量修改樣式醉旦，如果下面的.box與li的邊框的大小都要變成3px藏古，這時(shí)候就可以直接把$border-width: 3px即可吧碾，而不需要逐逐項(xiàng)去修改
$grey: #666;
$gray: $grey;
$border-width: 2px;
.box {
border: $border-width solid $grey;
> ul {
background-color: pink;
> li {
border: $border-width solid blue;
color: $gray;
}
}
}
@mixin
在
@mixin模式中結(jié)合@include只是把代碼機(jī)械的拷貝過(guò)來(lái)俺孙，總體上代碼的量并不會(huì)減少(只是減少你重復(fù)書(shū)寫(xiě)代碼辣卒，但是打開(kāi)控制臺(tái)代 .scss文件編譯生成的 css代碼并沒(méi)有減少)。
demo??SCSS基礎(chǔ)用法③mixin 基本使用睛榄、參數(shù)荣茫、默認(rèn)參數(shù)
- mixin 最基本的用法
@mixin test {
border: 3px solid red;
}
.box {
@include test
}
/* box 對(duì)應(yīng)的 border樣式就是 @mixin test中被{} 包裹起來(lái)的樣式，當(dāng)然也可以是多個(gè)樣式 */
- mixin 參數(shù)模式(
mixin的參數(shù)模式也可以支持 設(shè)定默認(rèn)的參數(shù))
??
<div class="box1">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
SCSS參數(shù)模式场靴，以及默認(rèn)參數(shù) 下面的 greenyellow與#999就是設(shè)定的參數(shù)的默認(rèn)值
@mixin test1($color: greenyellow, $bgc: #999) {
border: 2px solid $color;
background-color: $bgc;
}
.box1 {
@include test1(green);
> ul {
@include test1(greenyellow,pink)
}
}
占位符選擇器%foo(Placeholder Selectors: %foo) 與 @extend
達(dá)成上面的圖片效果的CSS
.box > div {
background-color: #ccc;
width: 300px;
height: 120px;
border-radius: 4px;
box-shadow: 1.5px 1.5px 1px .8px rgba(0, 0, 0, .5)
}
如果在另外一個(gè)CSS 選擇器啡莉，也需要同樣的樣式，則需要把上面的樣式全部賦值過(guò)去粘貼旨剥，這無(wú)疑是一件費(fèi)力不討好的事情咧欣。當(dāng)然我們機(jī)智的想到了使用SCSS mixin
??如下
<div class="box">
<div></div>
</div>
<div class="box1">
<div></div>
</div>
要使.box > div與.box1 > div達(dá)到下圖的效果，則需要
方法一：mixin
mixin 模式demoSCSS基礎(chǔ)用法④-1 mixin 與 placeholder的區(qū)別比較
SCSS編譯生成的CSS
方法二：placeholder selector
placeholder 模式demo SCSS基礎(chǔ)用法④-2 占位符選擇器 Placeholder Selector
%box-style {
background-color: #ccc;
width: 300px;
height: 120px;
border-radius: 4px;
box-shadow: 1.5px 1.5px 1px .8px rgba(0, 0, 0, .5);
margin-bottom: 20px;
}
.box > div {
@extend %box-style;
}
.box1 > div {
@extend %box-style;
}
SCSS編譯生成的CSS
從上面的mixinSCSS編譯的CSS與placeholder selectorSCSS編譯的CSS可以看出轨帜。對(duì)于同樣的樣式mixin實(shí)質(zhì)就是把樣式對(duì)應(yīng)的CSS全部拷貝到另一個(gè)CSS選擇器魄咕，如把div > box的樣式全部拷貝到div1 > box選擇器下面；而placeholder只是把設(shè)定同樣樣式的CSS選擇器拷貝到 對(duì)應(yīng)的CSS前面蚌父，如把box1 > div拷貝到box > div對(duì)應(yīng)的樣式前面
版權(quán)聲明：本文為博主原創(chuàng)文章哮兰，未經(jīng)博主許可不得轉(zhuǎn)載
