技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
0
0
佛心分享-IT 人自學之術
SASS/SCSS的認識與實作
系列 第
17
篇
Day17 函數 (function)
16th鐵人賽
yu_ting
2024-10-02 01:40:17
251 瀏覽
分享至
在 SASS/SCSS 中函數 (function) 是什麼 ?
是一個用來執行某些特定操作並返回結果的程式碼片段
與混合器(mixin)類似,最大的區別是函數只會返回一個值,而混合器則用來輸出一段樣式程式碼
根據傳入的參數進行計算或處理,並返回一個值供樣式表中的屬性使用
SASS 內建了一些強大的函數(例如色彩操作、數學運算等),允許開發者自定義自己的函數
優點
重複使用性高 : 函數可以被多次調用,減少重複程式碼,提升開發效率
提高可維護性:將複雜的邏輯封裝在函數中,減少樣式表的混亂,便於維護
靈活性強:可以處理複雜的計算和邏輯操作,並返回動態值
缺點
學習曲線:對初學者來說,函數的概念可能需要一些時間理解,特別是自定義函數
性能問題:過多的函數調用可能會增加樣式表的編譯
應用場景
色彩處理:使用函數調整顏色的亮度、飽和度、透明度等
計算佈局尺寸:通函數自動計算尺寸,根據不同的輸入值返回結果(例如計算比例佈局)
字串操作:在需要動態生成選擇器或屬性名時,函數可用來處理字串
動態樣式生成:基於變數或條件生成不同的樣式,保持樣式的靈活性
內建函數
a. 色彩 : 操作顏色值
調整亮度
改變透明度
lighten($color, $amount):使顏色變亮
darken($color, $amount):使顏色變暗
saturate($color, $amount):增加顏色的飽和度
b. 數學 : 進行數學計算
四捨五入
round($value):將數值四捨五入到最接近的整數
percentage($value):將一個小數轉換為百分比
c.字串 : 處理字串值
合併字串
quote($string):將字串加上引號
unquote($string):去掉字串的引號
d. 列表 : 操作 Sass 列表
獲取列表中的項目
nth($list, $n):獲取列表中第 n 項的值
length($list):返回列表的長度
自定義函數
開法者可以根據需要自定義函數,語法類似於其他程式語言中的函數
Sass 函數可以接受參數並返回計算結果
留言
追蹤
檢舉
上一篇
Day16 插值的例子
下一篇
Day18 函數例子
系列文
SASS/SCSS的認識與實作
共
30
篇
目錄
RSS系列文
訂閱系列文
0
人訂閱
26
Day26 模塊化 SASS 架構例子
27
Day27 SASS 相關的開發工具
28
Day28 自動編譯
29
Day29 SASS 生成主題
30
Day 30 深淺色主題實作
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
14595
篇
完賽人數
167
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
17th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
linux
windows server
css
react
熱門問題
部屬電腦如何讓每一台開始功能表跟工作列都一樣
請教大神.這個google試算表到底發生了什麼事情?輸入或是修改資料整張工作表會被清空,已自行解決完成.感謝.
如何使用RPA軟體搜尋相關新聞
useCrudSchemas的swtich欄位吃不到網址的參數
Analysis Services資料庫還原失敗
對Kotlin的sealed class機制不太清楚
excel web adi 巨集,出現網頁指令碼錯誤
熱門回答
部屬電腦如何讓每一台開始功能表跟工作列都一樣
如何使用RPA軟體搜尋相關新聞
熱門文章
第12天,實作無封裝數位簽章 / 店小二魯肉飯 號稱第二的滷肉飯(新北三重) | 30天滷肉飯
第12天,Cloudflare Pages 與 Workers / 馬力碳烤雞排 | 30天板橋湳雅夜市
[為你自己學 n8n] 第 13 天,LINE 機器人誕生記!
第11天,Cloudflare Rules 跳轉規則 / 哈贊二姐生炒羊肉 | 30天湳雅夜市
第13天,實作PKCS#7封裝的數位簽章 / 雙月食品社(台北中正)| 30天滷肉飯
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}