【uni-app筆記整理三】uni樣式（scss）
技術標籤：uni-appcssscssuni-appunivue
版權宣告：本文為 小異常 原創文章，非商用自由轉載-保持署名-註明出處，謝謝！
本文網址：https://sunkuan.blog.csdn.net/article/details/111674717
文章目錄
上一篇我們講解了 uni-app 的基本元件，在目前這個階段，我們簡簡單單的使用基本元件搭建一個簡易的頁面還是可以的，但這遠遠還不夠，沒有樣式的配合，頁面將顯得非常單調。
本篇部落格主要向大家介紹 uni-app的樣式，其實樣式我們完全使用 CSS 即可，但這還不夠，我要向大家介紹一個更強大的 CSS 擴充套件語言，也是 uni-app 官方推薦的 SCSS 語言。
簡單介紹一下，SCSS 是一門 CSS 擴充套件語言，它完全相容所有版本的 CSS，它的穩定性要比 CSS 更強大，使用起來更加的舒暢。
SCSS 讓人們受益的一個重要特性就是為 CSS 引入了變數。你可以把反覆使用的 CSS 屬性值 定義成變數，然後通過變數名來引用它們，無需重複書寫這一屬性值。本篇將結合 uni-app 的樣式介紹 SCSS，但我們並不會深入講解 SCSS，想深入學習的朋友們請繞道。
一、uni樣式注意事項
我們在使用 uni-app 樣式時，也需要注意幾個問題：
-
單位問題： 我們在移動端開發時，儘可能的使用
rpx單位來代替以前的px，rpx即響應式px，它是一種可以根據螢幕寬度自適應的動態單位。以 750 寬的螢幕為基準，因為750 rpx恰好為螢幕寬度。當螢幕變寬時，rpx實際顯示效果將會等比放大； -
匯入問題： 我們可以通過
@import語句匯入外聯樣式表，@import後跟需要匯入的外聯樣式表的相對路徑，並用;結束； -
選擇器問題： uni-app 支援基本常用的選擇器，如：class、id、element 等，但是在 uni-app 中不能使用
*選擇器； -
根節點問題： 在以前 HTML 中，文件主體的根節點一直是
body，而在 uni-app 中文件主體的根節點是page，它相當於body節點； -
全域性/區域性樣式： 定義在
App.vue中的樣式為 全域性樣式，作用於每一個頁面。在pages目錄下 的.vue檔案中定義的樣式為 區域性樣式，只作用在對應的頁面，並會覆蓋App.vue中相同的選擇器； -
字型圖示： uni-app 支援使用字型圖示，使用方式與普通
web專案相同，但需要注意以下幾點：- 字型檔案小於
40kb時，uni-app 會自動將其轉化為 base64 格式； - 字型檔案大於等於
40kb時， 需開發者自己轉換，否則該字型圖示將不生效； - 字型檔案的引用路徑推薦使用以
[email protected]開頭的絕對路徑。
@font-face { font-family: test1-icon; src: url('[email protected]/static/iconfont.ttf'); } - 字型檔案小於
二、SCSS初體驗
在 HBuilderX 中使用 SCSS，需要先安裝外掛：工具 -> 外掛安裝。
1、定義變數
<style lang="scss">
/* 變數 */
$my-color: #f60;
h3 {
color: $my-color;
}
</style>
2、選擇器巢狀
<style lang="scss">
/* 選擇器巢狀 */
.box {
h4 {
border: $basic-border;
}
}
</style>
3、屬性巢狀
- 把屬性名從中劃線
-的地方斷開； - 在根屬性後邊新增一個冒號
:，緊跟一個塊，把子屬性部分寫在這個{ }塊中。
div {
border: 1px solid #000 {radius: 5px}
}
/* 相當於 */
div {
border: 1px solid #000;
border-radius: 5px;
}
4、引入
@import 'rest'
5、運算子
view {
width: 360px / 900px * 100%;
}
6、函式
SCSS 函式名中的中劃線和下劃線是等同的，
font-size和font_size指向同一個函式。
/* 需要傳遞一個引數，如果無參，則預設值是6 */
@function widthFn($n: 6) {
@return $n * 10;
}
.leng {
width: widthFn(5);
height: widthFn();
}