建站
咨詢
售后
建站咨詢
新聞中心
這篇文章會(huì)跟隨工程化前端一步一步記錄sass中那些不為人知，但是又非常使用的小技巧分享給大家。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比興山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式興山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋興山地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。
內(nèi)置函數(shù)
sass官網(wǎng)提供了很多實(shí)用的內(nèi)置函數(shù)，當(dāng)然目前我也是在一步一步探索這些函數(shù)。目前我會(huì)將常用到的內(nèi)置函數(shù)以及場(chǎng)景分享給大家使用。
1. darken內(nèi)置函數(shù)
(1) 定義
lighten()和darken()兩個(gè)函數(shù)都是圍繞顏色的亮度值做調(diào)整的，其中l(wèi)ighten()函數(shù)會(huì)讓顏色變得更亮，與之相反的darken()函數(shù)會(huì)讓顏色變得更暗。這個(gè)亮度值可以是0~1之間。
lighten(#fff,10%) //原色的亮度值 增加百分之10亮度
draken(#fff,10%) // 在原色的基礎(chǔ)上 減少百分之10亮度
(2) 應(yīng)用場(chǎng)景
lighten和darken這兩個(gè)內(nèi)置函數(shù)經(jīng)常被用到元素被hover/focus時(shí)，當(dāng)我們hover，一個(gè)元素的時(shí)候。此時(shí)并不希望改變這個(gè)元素的色值，但是又想要用戶感知到鼠標(biāo)停留在這個(gè)元素上。此時(shí)這兩個(gè)內(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;
}
}
(3) desaturate
飽和度(Saturation)是指色彩的純度，飽和度越高色彩越純?cè)綕?，飽和度越低則色彩變灰變淡。
sass中的desaturate函數(shù)就是針對(duì)飽和度操作的內(nèi)置方法。
desaturate($color, $amount) //=> color
使$color飽和度降低, 在$amount必須之間的數(shù)字0%和100%(包含)。
(4) @warn
When writing mixins and functions, 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í)，您可能希望勸阻用戶傳遞某些參數(shù)或某些值。他們可能正在傳遞現(xiàn)在已棄用的傳統(tǒng)參數(shù)，或者他們可能會(huì)以不太最佳的方式調(diào)用您的API。
簡單來說在mixin或者function內(nèi)部，我們可以通過@warn操作符給用戶提示一些警告內(nèi)容輸出在控制臺(tá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;
}控制臺(tái)會(huì)提示：
Warning: Unknown prefix wekbit.
example.scss 6:7 prefix()
example.scss 16:3 root stylesheet
2. Inspect()斷電函數(shù)
其實(shí)Inspect()函數(shù)用的比較少，主要是用來做校驗(yàn)類型的。
Inspect(...)表達(dá)式中的內(nèi)容如果是正常會(huì)返回對(duì)應(yīng)的內(nèi)容，如果發(fā)生錯(cuò)誤則會(huì)彈出一個(gè)錯(cuò)誤提示。
3. Map相關(guān)內(nèi)容
(1) 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"); // falsemap.has-key()在scss中的條件判斷時(shí)應(yīng)用場(chǎ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)斷點(diǎn)Map，如果存在則返回
@if map.has-key($map, $key) {
@media only screen and #{inspect(map-get($map, $key))} {
@content;
}
} @else {
@warn "Undefeined points: `#{$map}`";
}
}
(2) map.get(map,k1,k2,...)
簡單來說就是通過key在map中取到對(duì)應(yīng)的value：
$config: (a: (b: (c: d)));
map.get($config, a, b, c); // d
占位符選擇器%作用
1. 定義
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;
}2. 應(yīng)用場(chǎng)景
其實(shí)使用%在大多數(shù)(~所有~)場(chǎng)景下，我的理解就是和@mixin是一樣的效果。使用%占位符選擇器的樣式，只能被@extend進(jìn)行調(diào)用。
需要注意的是，如果使用占位符選擇器%定義的樣式，單獨(dú)使用的時(shí)候(未通過extend)進(jìn)行調(diào)用，那么這段樣式是不會(huì)編譯到css的輸出結(jié)果之后的。
Partials import
1. 定義
和css類似scss支持@import命令，但css的import命令每次調(diào)用都會(huì)創(chuàng)建一個(gè)額外的html請(qǐng)求，但scss的import命令是編譯時(shí)將文件包含在css中，不需要額外發(fā)起請(qǐng)求。
如果我們需要導(dǎo)入 SCSS 或者 Sass 文件，但又不希望將其編譯為 CSS，只需要在文件名前添加下劃線，這樣會(huì)告訴 Sass 不要單獨(dú)編譯這些文件，但導(dǎo)入語句中卻不需要添加下劃線。
簡單來說，項(xiàng)目目錄中的所有scss文件在編譯階段都會(huì)被編譯成為一個(gè)個(gè)css文件。
但是對(duì)于一個(gè)公用樣式文件，此時(shí)我們并不需要將它編譯成為單獨(dú)的css文件，而是希望將公用文件中的樣式插入到對(duì)應(yīng)引入樣式文件中，我們只需要在引入它的文件中將它編譯進(jìn)入引入的css文件中就可以。
此時(shí)給文件名稱以_開頭就可以告訴scss在編譯階段并不會(huì)將它編譯成為單獨(dú)的css文件，而是僅僅會(huì)將它的樣式編譯進(jìn)入引入它的樣式文件中去。
比如一個(gè)文件夾兩個(gè) scss 文件，一個(gè) root.scss,一個(gè) _vars.scss。
// 第一個(gè) scss 文件夾名 -o 是輸出文件夾名稱``npx node-sass scss -o output``// 只會(huì)有一個(gè)文件生成
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
會(huì)有兩個(gè)文件生成
2. 應(yīng)用場(chǎng)景
這在組件庫的開發(fā)中是非常有用的，定義單獨(dú)組件的樣式文件以Partials import進(jìn)行定義，不單獨(dú)打包成為css文件，在最終導(dǎo)入的樣式文件中統(tǒng)一進(jìn)行合并管理而不打包出單獨(dú)的css文件。
變量聲明global與default
1. !default 默認(rèn)變量
可以在變量的結(jié)尾添加 !default 給一個(gè)未通過 !default 聲明賦值的變量賦值，此時(shí)，如果變量已經(jīng)被賦值，不會(huì)再被重新賦值，但是如果變量還沒有被賦值，則會(huì)被賦予新的值。
比如這樣一段代碼:
$color:red;
$color:blue !default;
.modules-a {
color: $color; // red
}
我們可以看到即使是先聲明的red，因?yàn)閎lue !default，所以紅色覆蓋了藍(lán)色。!default聲明變量的意思就是說如果項(xiàng)目中存在相同的聲明則優(yōu)先使用別的聲明，如果不存在則使用!default的值，可以理解為默認(rèn)值。
2. !global全局聲明
變量支持塊級(jí)作用域，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用(局部變量)，不在嵌套規(guī)則內(nèi)定義的變量則可在任何地方使用(全局變量)。將局部變量轉(zhuǎn)換為全局變量可以添加 !global 聲明
在scss中我們都清楚局部變量的定義是無法影響同名的global變量的。但是我們可以通過!global在局部作用域中去定義一個(gè)全局都可以使用的變量。同樣也可以通過!default在局部作用域中去覆蓋一個(gè)全局變量的值。
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
// 同樣可以使用$width全局變量
width: $width;
}編譯為：
#main {
width: 5em;
}
#sidebar {
width: 5em;
}3. mixin 參數(shù)變量...
有時(shí)，不能確定混合指令需要使用多少個(gè)參數(shù)，比如一個(gè)關(guān)于 box-shadow 的混合指令不能確定有多少個(gè) 'shadow' 會(huì)被用到。這時(shí)，可以使用參數(shù)變量 … 聲明(寫在參數(shù)的最后方)告訴 Sass 將這些參數(shù)視為值列表處理.
其實(shí)就類似于js中的...rest運(yùn)算符。
@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元素添加多個(gè)陰影。
4. @content-- 向混合樣式中導(dǎo)入內(nèi)容
在引用混合樣式mixin的時(shí)候，可以先將一段代碼導(dǎo)入到混合指令中，然后再輸出混合樣式，額外導(dǎo)入的部分將出現(xiàn)在 @content 標(biāo)志的地方
比如這樣的代碼，我們?cè)趇nclude中填充了對(duì)應(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)
注意： 當(dāng) @content 在指令中出現(xiàn)過多次或者出現(xiàn)在循環(huán)中時(shí)，額外的代碼將被導(dǎo)入到每一個(gè)地方。
@at-root
1. 常規(guī)用法
@at-root指令可以使一個(gè)或多個(gè)規(guī)則被限定輸出在文檔的根層級(jí)上，而不是被嵌套在其父選擇器下。
比如：
.parent {
...
@at-root .child { ... }
}編譯之后.child并不會(huì)嵌套在任何規(guī)則之下，因?yàn)槭褂昧薂at-root選擇符：
.parent { ... }
.child { ... }@at-root同樣也可以當(dāng)作一個(gè)作用域給多個(gè)選擇器去使用:
.parent {
...
@at-root {
.child1 { ... }
.child2 { ... }
}
.step-child { ... }
}編譯后:
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }2. 支持參數(shù)
@at-root (without: ...) and @at-root (with: ...)
默認(rèn)使用@at-root不傳遞任何時(shí)，他的作用為跳出選擇器的作用域嵌套，當(dāng)然可以傳遞參數(shù)去使用。
比如下面的@at-root意為跳出@media的嵌套:
@media print {
.page {
width: 8in;
@at-root (without: media) {
color: red;
}
}
}@media print {
.page {
width: 8in;
}
}
.page {
color: red;
}默認(rèn) @at-root 只會(huì)跳出選擇器嵌套，而不能跳出@media或 @support，如果要跳出這兩種，則需使用 @at-root(without: media)，@at-root(without: support)。這個(gè)語法的關(guān)鍵詞有
四個(gè)：
- all(表示所有)
- rule(表示常規(guī),默認(rèn)行為。
- media(表示 media)
- support(表示 support )。
我們默認(rèn)的 @at-root 其實(shí)就是 @at-root( without: rule ):跳出作用域嵌套規(guī)則。
(1) @at-root(without: rule)
rule 關(guān)鍵詞只能跳出選擇器嵌套，不能跳出 @media 和 @support
(2) @at-root(without: media)
可以跳出 @media ，但是沒有跳出父級(jí)選擇器
(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
1. maps數(shù)據(jù)格式
首先我們來說說在scss中定義類似js中的對(duì)象。
$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,
);
我們定義了一個(gè)maps的主題，分別存在對(duì)應(yīng)的名稱和對(duì)應(yīng)的顏色值。
2. @each in
@each 指令的格式是 $var in , $var 可以是任何變量名，比如 $length 或者 $name，而是一連串的值，也就是值列表。
3."數(shù)組"迭代
@each 將變量 $var 作用于值列表中的每一個(gè)項(xiàng)目，然后輸出結(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'); }此時(shí)類似于js中的數(shù)組迭代。
4. 對(duì)象迭代
當(dāng)然@each $val,$key in maps,也支持"迭代"一個(gè)對(duì)象(maps)。比如:
@each $key, $value in $theme-colors {
.#{$prefix}-icon--#{$key} {
color: $value;
}
}這樣我們就迭代了上邊定義的$theme-colors這個(gè)對(duì)象，并且取得了他的key,value。
5. 多個(gè)值迭代
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 指令也可以使用多個(gè)變量，如@each $var1, $var2, ... in 。如果是列表列表，則子列表的每個(gè)元素都分配給相應(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')。感到比較新奇隨機(jī)查閱記錄一番。
在JavaScript中，當(dāng)用于`Element.querySelector`，`Element.querySelectorAll`或`Element.closest`時(shí)，:scope是指調(diào)用這些方法的元素。例如，document.body.querySelector(":scope")返回body元素。盡管CSS對(duì) :scope的支持已被移除，但 :scope 的這種用法仍然被支持。
使用:scope選擇器可以匹配對(duì)應(yīng)的方法比如element.querySelector(':scope')則會(huì)返回element元素本身。
需要主要的是:scope偽類在css中已經(jīng)不被大多數(shù)瀏覽器支持，甚至已經(jīng)廢棄。但是在js這些方法中仍然被主流瀏覽器支持。
網(wǎng)頁標(biāo)題：SCSS中這些技巧，你可能還不知道！
轉(zhuǎn)載注明：http://www.5511xx.com/article/dphsiic.html
