大廠技術(shù)??高級前端??Node進階

點擊上方?程序員成長指北，關(guān)注公眾號

回復1，加入高級Node交流群

作者：19組清風

鏈接：https://juejin.cn/post/6996855468526141448

隨著css工程化的普及，sass在前端工程中越來越舉足輕重。當然sass并不局限于管理css全局變量、mixin之類的"臟活累活"。

這篇文章會跟隨工程化前端一步一步記錄sass中那些不為人知，但是又非常使用的小技巧分享給大家。

建議大家收藏隨時觀看。

內(nèi)置函數(shù)

sass官網(wǎng)提供了很多實用的內(nèi)置函數(shù)，當然目前我也是在一步一步探索這些函數(shù)。目前我會將常用到的內(nèi)置函數(shù)以及場景分享給大家使用。

darken內(nèi)置函數(shù)

定義

lighten()和darken()兩個函數(shù)都是圍繞顏色的亮度值做調(diào)整的，其中lighten()函數(shù)會讓顏色變得更亮，與之相反的darken()函數(shù)會讓顏色變得更暗。這個亮度值可以是0~1之間。

lighten(#fff,10%)?//原色的亮度值?增加百分之10亮度
draken(#fff,10%)?//?在原色的基礎(chǔ)上?減少百分之10亮度

應(yīng)用場景

lighten和darken這兩個內(nèi)置函數(shù)經(jīng)常被用到元素被hover/focus時，當我們hover，一個元素的時候。此時并不希望改變這個元素的色值，但是又想要用戶感知到鼠標停留在這個元素上。此時這兩個內(nèi)置函數(shù)就發(fā)揮了他們的作用了。

@mixin?button-type(
??$background,
??$border,
??$color,
??$hover-background:?lighten($background,?7.5),
??$hover-border:?lighten($border,?10%),
??$hover-color:?$color
)?{
??color:?$color;
??background:?$background;
??border-color:?$border;
??&:hover?{
????color:?$hover-color;
????background:?$hover-background;
????border-color:?$hover-border;
??}
??&:focus,
??&.is-focus?{
????color:?$hover-color;
????background:?$hover-background;
????border-color:?$hover-border;
??}
??&[disabled],
??&.is-disabled?{
????color:?$color;
????background:?$background;
????border-color:?$border;
??}
}

desaturate

飽和度（Saturation）是指色彩的純度，飽和度越高色彩越純越濃，飽和度越低則色彩變灰變淡。

sass中的desaturate函數(shù)就是針對飽和度操作的內(nèi)置方法。

desaturate($color,?$amount)?//=>?color

使$color飽和度降低, 在$amount必須之間的數(shù)字0%和100%（包含）。

@warn

When writing?mixins^[1]?and?functions^[2], you may want to discourage users from passing certain arguments or certain values. They may be passing legacy arguments that are now deprecated, or they may be calling your API in a way that’s not quite optimal.

編寫MixIn和函數(shù)時，您可能希望勸阻用戶傳遞某些參數(shù)或某些值。他們可能正在傳遞現(xiàn)在已棄用的傳統(tǒng)參數(shù)，或者他們可能會以不太最佳的方式調(diào)用您的API。

簡單來說在mixin或者function內(nèi)部，我們可以通過@warn操作符給用戶提示一些警告內(nèi)容輸出在控制臺。

@mixin?prefix($property,?$value,?$prefixes)?{
??@each?$prefix?in?$prefixes?{
????@if?not?index($known-prefixes,?$prefix)?{
??????@warn?"Unknown?prefix?#{$prefix}.";
????}

????-#{$prefix}-#{$property}:?$value;
??}
??#{$property}:?$value;
}

控制臺會提示

Warning:?Unknown?prefix?wekbit.
????example.scss?6:7???prefix()
????example.scss?16:3??root?stylesheet

Inspect()斷電函數(shù)

其實Inspect()函數(shù)用的比較少，主要是用來做校驗類型的。

Inspect(...)表達式中的內(nèi)容如果是正常會返回對應(yīng)的內(nèi)容，如果發(fā)生錯誤則會彈出一個錯誤提示。

Map相關(guān)內(nèi)容

Map-has-key

If?$keys?is empty, returns whether?$map?contains a value associated with?$key.

$font-weights:?("regular":?400,?"medium":?500,?"bold":?700);

?map.has-key($font-weights,?"regular");?//?true
?map.has-key($font-weights,?"bolder");?//?false

map.has-key()在scss中的條件判斷時應(yīng)用場景特別多。

比如下方這段代碼

$--sm:?768px?!default;
$--md:?992px?!default;
$--lg:?1200px?!default;
$--xl:?1920px?!default;

$--breakpoints:?(
??'xs'?:?(max-width:?$--sm?-?1),
??'sm'?:?(min-width:?$--sm),
??'md'?:?(min-width:?$--md),
??'lg'?:?(min-width:?$--lg),
??'xl'?:?(min-width:?$--xl)
);

@mixin?res($key,?$map:?$--breakpoints)?{
??//?循環(huán)斷點Map，如果存在則返回
??@if?map.has-key($map,?$key)?{
????@media?only?screen?and?#{inspect(map-get($map,?$key))}?{
??????@content;
????}
??}?@else?{
????@warn?"Undefeined?points:?`#{$map}`";
??}
}

map.get(map,k1,k2,...)

簡單來說就是通過key在map中取到對應(yīng)的value

$config:?(a:?(b:?(c:?d)));
map.get($config,?a,?b,?c);?//?d

占位符選擇器%作用

定義

Sass 額外提供了一種特殊類型的選擇器：占位符選擇器 (placeholder selector)。與常用的 id 與 class 選擇器寫法相似，只是 # 或 . 替換成了 %。

比如:

%heading?{
??margin-top:?0;?//?1
??margin-bottom:?$headings-margin-bottom;
??font-family:?$headings-font-family;
??font-style:?$headings-font-style;
??font-weight:?$headings-font-weight;
??line-height:?$headings-line-height;
??color:?$headings-color;
}

應(yīng)用場景

其實使用%在大多數(shù)(~所有~)場景下，我的理解就是和@mixin是一樣的效果。使用%占位符選擇器的樣式，只能被@extend進行調(diào)用。

需要注意的是，如果使用占位符選擇器%定義的樣式，單獨使用的時候(未通過extend)進行調(diào)用，那么這段樣式是不會編譯到css的輸出結(jié)果之后的。

Partials import

定義

和css類似scss支持@import命令，但css的import命令每次調(diào)用都會創(chuàng)建一個額外的html請求，但scss的import命令是編譯時將文件包含在css中，不需要額外發(fā)起請求。

如果我們需要導入 SCSS 或者 Sass 文件，但又不希望將其編譯為 CSS，只需要在文件名前添加下劃線，這樣會告訴 Sass 不要單獨編譯這些文件，但導入語句中卻不需要添加下劃線。

簡單來說，項目目錄中的所有scss文件在編譯階段都會被編譯成為一個個css文件。

但是對于一個公用樣式文件，此時我們并不需要將它編譯成為單獨的css文件，而是希望將公用文件中的樣式插入到對應(yīng)引入樣式文件中，我們只需要在引入它的文件中將它編譯進入引入的css文件中就可以。

此時給文件名稱以_開頭就可以告訴scss在編譯階段并不會將它編譯成為單獨的css文件，而是僅僅會將它的樣式編譯進入引入它的樣式文件中去。

比如一個文件夾兩個 scss 文件，一個 root.scss,一個 _vars.scss。

//?第一個?scss?文件夾名?-o?是輸出文件夾名稱``npx?node-sass?scss?-o?output``//?只會有一個文件生成
rendering?Complete,?saving?.css?file...
Wrote?CSS?to?/Users/liusha/Public/vikingship/output/root.css?//將?_vars?該名稱為?vars.scss?再執(zhí)行一遍
Rendering?Complete,?saving?.css?file...
Wrote?CSS?to?/Users/liusha/Public/vikingship/output/root.css
Rendering?Complete,?saving?.css?file...
Wrote?CSS?to?/Users/liusha/Public/vikingship/output/vars.css
會有兩個文件生成

應(yīng)用場景

這在組件庫的開發(fā)中是非常有用的，定義單獨組件的樣式文件以Partials import進行定義，不單獨打包成為css文件，在最終導入的樣式文件中統(tǒng)一進行合并管理而不打包出單獨的css文件。

變量聲明global與default

!default 默認變量

可以在變量的結(jié)尾添加?!default?給一個未通過?!default?聲明賦值的變量賦值，此時，如果變量已經(jīng)被賦值，不會再被重新賦值，但是如果變量還沒有被賦值，則會被賦予新的值。

比如這樣一段代碼:

$color:red;
$color:blue?!default;

.modules-a?{
????color:?$color;?//?red
}

我們可以看到即使是先聲明的red，因為blue !default，所以紅色覆蓋了藍色。!default聲明變量的意思就是說如果項目中存在相同的聲明則優(yōu)先使用別的聲明，如果不存在則使用!default的值，可以理解為默認值。

!global全局聲明

變量支持塊級作用域，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用（局部變量），不在嵌套規(guī)則內(nèi)定義的變量則可在任何地方使用（全局變量）。將局部變量轉(zhuǎn)換為全局變量可以添加?!global?聲明

在scss中我們都清楚局部變量的定義是無法影響同名的global變量的。但是我們可以通過!global在局部作用域中去定義一個全局都可以使用的變量。同樣也可以通過!default在局部作用域中去覆蓋一個全局變量的值。

#main?{
??$width:?5em?!global;
??width:?$width;
}

#sidebar?{
??//?同樣可以使用$width全局變量
??width:?$width;
}

編譯為

#main?{
??width:?5em;
}

#sidebar?{
??width:?5em;
}

mixin

參數(shù)變量...

有時，不能確定混合指令需要使用多少個參數(shù)，比如一個關(guān)于?box-shadow?的混合指令不能確定有多少個 'shadow' 會被用到。這時，可以使用參數(shù)變量?…?聲明（寫在參數(shù)的最后方）告訴 Sass 將這些參數(shù)視為值列表處理.

其實就類似于js中的...rest運算符。

@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);
}

編譯后：

.shadowed?{
??-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;
}

使用，分隔為.shadowed元素添加多個陰影。

@content-- 向混合樣式中導入內(nèi)容

在引用混合樣式mixin的時候，可以先將一段代碼導入到混合指令中，然后再輸出混合樣式，額外導入的部分將出現(xiàn)在?@content?標志的地方

比如這樣的代碼，我們在include中填充了對應(yīng)的樣式，在mixin中可以通過@content使用。

@mixin?apply-to-ie6-only?{
??*?html?{
????@content;
??}
}
@include?apply-to-ie6-only?{
??#logo?{
????background-image:?url(/logo.gif);
??}
}

編譯為

//?mixin中接受了include?可以理解為插槽
*?html?#logo?{
??background-image:?url(/logo.gif);
}

為便于書寫，@mixin 可以用 = 表示，而 @include 可以用 + 表示，所以上面的例子可以寫成：

//?=?簡寫mixin
=apply-to-ie6-only
??*?html
????@content

//?+?簡寫include
+apply-to-ie6-only
??#logo
????background-image:?url(/logo.gif)

注意： ?當 @content 在指令中出現(xiàn)過多次或者出現(xiàn)在循環(huán)中時，額外的代碼將被導入到每一個地方。

@at-root

常規(guī)用法

@at-root指令可以使一個或多個規(guī)則被限定輸出在文檔的根層級上，而不是被嵌套在其父選擇器下。

比如

.parent?{
??...
??@at-root?.child?{?...?}
}

編譯之后.child并不會嵌套在任何規(guī)則之下，因為使用了@at-root選擇符

.parent?{?...?}
.child?{?...?}

@at-root同樣也可以當作一個作用域給多個選擇器去使用:

.parent?{
??...
??@at-root?{
????.child1?{?...?}
????.child2?{?...?}
??}
??.step-child?{?...?}
}

編譯后:

.parent?{?...?}
.child1?{?...?}
.child2?{?...?}
.parent?.step-child?{?...?}

支持參數(shù)

@at-root (without: ...) and @at-root (with: ...)

默認使用@at-root不傳遞任何時，他的作用為跳出選擇器的作用域嵌套，當然可以傳遞參數(shù)去使用。

比如下面的@at-root意為跳出@media的嵌套:

@media?print?{
??.page?{
????width:?8in;
????@at-root?(without:?media)?{
??????color:?red;
????}
??}
}

@media?print?{
??.page?{
????width:?8in;
??}
}
.page?{
??color:?red;
}

默認 @at-root 只會跳出選擇器嵌套，而不能跳出@media或 @support，如果要跳出這兩種，則需使用 @at-root(without: media)，@at-root(without: support)。這個語法的關(guān)鍵詞有

四個：

• all（表示所有）
• rule（表示常規(guī),默認行為。
• media（表示 media）
• support（表示 support ）。

我們默認的 @at-root 其實就是 @at-root( without: rule ):跳出作用域嵌套規(guī)則。

1. @at-root(without: rule)

rule 關(guān)鍵詞只能跳出選擇器嵌套，不能跳出 @media 和 @support

2. @at-root(without: media)

可以跳出 @media ，但是沒有跳出父級選擇器

3. @at-root(without: support)

@at-root(without: support) 和 @at-root(without: media) 相似，只是跳出的是 @support。

4. @at-root(without: all)

@at-root(without: all) 是跳出所的指令和規(guī)則，如上面的代碼里 @at-root(without: media rule) 我們可以換成 @at-root(without: all)，效果是一樣的。

@each in

maps數(shù)據(jù)格式

首先我們來說說在scss中定義類似js中的對象。

$map:?(key1:?value1,?key2:?value2,?key3:?value3);

我們通過()就可以定義了。比如這樣的Maps結(jié)構(gòu)定義。

$blue:?#0d6efd?!default;
$indigo:?#6610f2?!default;
$purple:?#6f42c1?!default;
$pink:?#d63384?!default;
$red:?#dc3545?!default;
$orange:?#fd7e14?!default;
$yellow:?#fadb14?!default;
$green:?#52c41a?!default;
$teal:?#20c997?!default;
$cyan:?#17a2b8?!default;

$primary:?$blue?!default;
$secondary:?$gray-600?!default;
$success:?$green?!default;
$info:?$cyan?!default;
$warning:?$yellow?!default;
$danger:?$red?!default;
$light:?$gray-100?!default;
$dark:?$gray-800?!default;

$theme-colors:?(
??'primary':?$primary,
??'secondary':?$secondary,
??'success':?$success,
??'info':?$info,
??'warning':?$warning,
??'danger':?$danger,
??'light':?$light,
??'dark':?$dark,
);

我們定義了一個maps的主題，分別存在對應(yīng)的名稱和對應(yīng)的顏色值。

@each in

@each?指令的格式是?$var in ,?$var?可以是任何變量名，比如?$length?或者?$name，而??是一連串的值，也就是值列表。

"數(shù)組"迭代

@each 將變量 $var 作用于值列表中的每一個項目，然后輸出結(jié)果，例如：

@each?$animal?in?puma,?sea-slug,?egret,?salamander?{
??.#{$animal}-icon?{
????background-image:?url('/images/#{$animal}.png');
??}
}

編譯為

.puma-icon?{
??background-image:?url('/images/puma.png');?}
.sea-slug-icon?{
??background-image:?url('/images/sea-slug.png');?}
.egret-icon?{
??background-image:?url('/images/egret.png');?}
.salamander-icon?{
??background-image:?url('/images/salamander.png');?}

此時類似于js中的數(shù)組迭代。

對象迭代

當然@each $val,$key in maps,也支持"迭代"一個對象(maps)。比如:

@each?$key,?$value?in?$theme-colors?{
??.#{$prefix}-icon--#{$key}?{
????color:?$value;
??}
}

這樣我們就迭代了上邊定義的$theme-colors這個對象，并且取得了他的key,value。

多個值迭代

The @each directive can also use multiple variables, as in @each v a r 1 , var1, var1,var2, ... in?. If?is a list of lists, each element of the sub-lists is assigned to the respective variable. For example:

@each 指令也可以使用多個變量，如@each $var1, $var2, ... in 。如果是列表列表，則子列表的每個元素都分配給相應(yīng)的變量。例如

@each?$animal,?$color,?$cursor?in?(puma,?black,?default),
??????????????????????????????????(sea-slug,?blue,?pointer),
??????????????????????????????????(egret,?white,?move)?{
??.#{$animal}-icon?{
????background-image:?url('/images/#{$animal}.png');
????border:?2px?solid?$color;
????cursor:?$cursor;
??}
}

is compiled to:

.puma-icon?{
??background-image:?url('/images/puma.png');
??border:?2px?solid?black;
??cursor:?default;?}
.sea-slug-icon?{
??background-image:?url('/images/sea-slug.png');
??border:?2px?solid?blue;
??cursor:?pointer;?}
.egret-icon?{
??background-image:?url('/images/egret.png');
??border:?2px?solid?white;
??cursor:?move;?}

css :scope選擇器

偶然在寫jest中看到別人使用xxx.querySelect(':scope')。感到比較新奇隨機查閱記錄一番。

在JavaScript中，當用于`Element.querySelector`^[3]，`Element.querySelectorAll`^[4]或`Element.closest`^[5]時，:scope是指調(diào)用這些方法的元素。例如，document.body.querySelector(":scope")返回body元素。盡管CSS對 :scope的支持已被移除，但 :scope 的這種用法仍然被支持

使用:scope選擇器可以匹配對應(yīng)的方法比如element.querySelector(':scope')則會返回element元素本身。

需要主要的是:scope偽類在css中已經(jīng)不被大多數(shù)瀏覽器支持，甚至已經(jīng)廢棄。但是在js這些方法中仍然被主流瀏覽器支持。

參考資料