SCSS & SASS Color 顏色函式用法

阿新 • • 發佈：2019-01-17

最近做一個沒有設計師參與的專案，發現 scss 內建的顏色函式還挺好用。記錄分享下

rgba()

能省掉手工轉換 hex 到 rgb 格式的工作，如以下 SCSS 程式碼

$linkColor: #20a0ff;

.box{
  box-shadow: 0 2px 6px 0 rgba($linkColor, 0.3);
  background-color: $linkColor;
}

生成的 CSS 程式碼

.box{
  box-shadow:0 2px 6px 0 rgba(32,160,255,.3);
  background-color:#20a0ff;
}

還可以通過 opacify 增加，通過 transparentize 來減少透明度值，如：

>> opacify(rgba(125,125,125, 0.6), 0.2)
rgba(125,125,125, 0.8)

>> transparentize(green, 0.5)
rgba(0, 255, 0, 0.5)

lighten / darken / saturate / desaturate

lighten / darken 是基於 HSL 明度變換，這個比較適合 button 按鈕的 normal 態和 hover 態變換，

saturate / desaturate 是基於 HSL 飽和度變換，

然而生成的顏色很醜，不實用。

tint / shade

阿里的 Ant Design 早期版本使用了 tint / shade 色彩演算法，通過增加白色（tint）和黑色（shade）的佔比來生成系列色。

.demo{
  tint( $base-color, 10% )
  shade( $base-color, 10% )
}

這個在專案中會更加實用，不過要注意新生成的顏色與文字對比度需滿足 WCAG 2.0 對比度要求。

complement 補色

在色彩理論中，如果一種顏色與另一種顏色混合後，呈現中性的灰黑色，那麼這兩種顏色就互為補色。

好萊塢電影比較常用補色後期手法，強烈的互補色對比，能渲染出比較衝擊的視覺系氛圍。如下圖《天使愛美麗》海報的紅綠互補。

不過現在還沒用到這個函式，怕有點 hold 不住：）

SCSS & SASS Color 顏色函式用法

最近做一個沒有設計師參與的專案，發現 scss 內建的顏色函式還挺好用。記錄分享下 rgba() 能省掉手工轉換 hex 到 rgb 格式的工作，如以下 SCSS 程式碼 $linkColor: #20a0ff; .box{ box-shadow: 0 2px 6px 0 rgba($

Sass關於顏色函式的樂趣

在Sass中，定義了很多現成的函式，可供我們使用。在最初使用Sass的時候，用的最多的顏色函式就是lighten($color, $amount)和darken($color, $amount)，對於其他的函式，少之又少，真是弱爆了，有木有。 &n

c++ system（“color XX”）具體顏色及其用法；

1.改變整個控制檯的顏色用 system("color 0A"); 其中color後面的0是背景色代號，A是前景色代號。各顏色程式碼如下： 0=黑色 1=藍色 2=綠色 3=湖藍色 4=紅色 5=紫色 6=黃色 7=白色 8=灰色 9=淡藍色 A=淡

改動UINavigationBar （導航欄）上NavigationBarItem 的字體大小和顏色的用法

track dict enc all attr trac rst bject gin //創建一個左邊button UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle

【C#】Color顏色對照表

pac eee lower fda flow dig val rim cee Color.AliceBlue 240,248,255 Color.LightSalmon 255,160,122 Color.

Sass:RGB顏色函數-Red()、Green()、Blue()函數

clas 一個 rgb 簡單多少使用 style color nbsp Red() 函數 red() 函數非常簡單，其主要用來獲取一個顏色當中的紅色值。假設有一個 #f36 的顏色，如果你想得到 #f36 中的 red 值是多少，這個時候使用 red() 函數就能很簡單

react-color 顏色選擇器組件

photos kpi 傳遞 times material reac 17. complete erp demo鏈接：github demo 安裝： npm install react-color --save 有一下幾種類型組件 <AlphaPicker />

C# Color顏色對照表

raw pow htc ins live aci cad anr targe Color命名空間 using System.Drawing; Color.AliceBlue 240,248,255 Color.LightSalmon

glViewport函式用法

一、其函式原型為glViewport(GLint x,GLint y,GLsizei width,GLsizei height) x,y 以畫素為單位，指定了視窗的左下角位置。 width,height表示視口矩形的寬度和高度，根據視窗的實時變化重繪視窗。二、在預設情況下，視口被設定為佔據視窗

ROW_NUMBER() OVER()函式用法;(分組，排序），partition by (轉)

1、row_number() over()排序功能：（1） row_number() over()分組排序功能：在使用 row_number() over()函式時候，over()裡頭的分組以及排序的執行晚於 where group by order

numpy函式：tile函式用法

tile函式位於python模組 numpy.lib.shape_base中，他的功能是重複某個陣列。比如tile(A,n)，功能是將陣列A重複n次，構成一個新的陣列 from numpy import * #initialize the array a = [0,1,2]

Oracle單行函式用法

單行函式分為五種型別：字元函式、數值函式、日期函式、轉換函式、通用函式。 1.字元函式：　　對於輸入的字元轉換為需要轉為的字元或數值。　　upper()大寫 --小寫字母轉為大寫字母　　　　--對於表指定

C語言幾個函式用法小結

1.char *ultoa(unsigned long value,char *string,int radix) 將無符號整型數value轉換成字串並返回該字串,radix為轉換時所用基數 2.char *ltoa(long value,char *string,i

numpy中flatten()函式用法

flatten是numpy.ndarray.flatten的一個函式，其官方文件是這樣描述的： ndarray.flatten(order='C') Return a copy of the array collapsed into one dimension. Parameters:

strtol函式用法

之前想用C寫MD5函式用法，中間設計大量進位制轉換的內容，於是就查到了strtol這個函式但是發現之前對其認識上有一些偏頗，所以把它的用法記錄下來 strtol是一個C語言函式，作用就是將一個字串轉換為長整型long，其函式原型為 long int strtol (const

getline() 函式用法

本文轉自：http://blog.sina.com.cn/s/blog_60263c1c0101ck25.html 學習C++的同學可能都會遇到一個getline()函式，譬如在C++premer中，標準string型別第二小節就是“用getline讀取整行文字”。書上給的程式如下：

PHP array_pad函式用法

<?php //填充陣列到制定長度 $array = [1,2,3,4]; $array1 = [ [1],[2],[3],[4] ]; print_r(array_pad($array,6, 'abc')); //執行結果：Array ( [0] => 1 [1] =

np.nonzero（）函式用法

返回陣列中不為0的元素的下標。陣列中元素可為布林、整型和浮點型，返回值為元祖一.一維陣列 1.陣列元素為布林型別 a=np.array([True,False,True,False]) b=np.nonzero(a) print(b) 輸出結果為(array([0, 2], dtype

python中的print輸出函式用法總結

【時間】2018.10.12 【題目】python中的print輸出函式用法總結一、直接輸出無論什麼型別，數值，布林，列表，字典...都可以直接輸出，或者先賦值給變數，再輸出。二、格式化輸出下面是《Python基

Python中split()函式用法和例項

一、描述 split()通過指定分隔符對字串進行切片，如果引數num 有指定值，則僅分隔 num 個子字串函式形式：str.split(str="", num=string.count(str)) 引數： str -- 分隔符，預設為所有的空字元，包括空格、換行(\n)、製表

SCSS & SASS Color 顏色函式用法

rgba()

lighten / darken / saturate / desaturate

tint / shade

complement 補色

相關推薦