tips: 本文原始碼已託管至碼雲(gitee)鏈結戳這裡
先祝各位國慶快樂鴨
很多人昨天都沒找到我，其實我去......
向國慶期間還看掘金學習的同行們致敬
話不多說，我們來步入正題
今天我們來用乙個veryveryvery ******的小專案來了解一下scss，這個非常火的技術
預覽圖是這樣子的：
一大堆不同緞帶和盒子顏色的禮物盒。然後用scss 隨機填充顏色和隨機座標
首先，我們先了解下，scss是什麼東西
官方是這麼解釋的：
（此處鏈結中文文件）
他有以下特點：
個人理解其實就是讓css的編寫也擁有計算能力和邏輯**。方便更好地去管理css的**和編輯
首先，我們先搭建一下html**
"present"> //外部盒子
"cap">
//盒子蓋
"vribbon">
//縱向緞帶
"hribbon">
//橫向緞帶
複製**
在這裡，我們使用flex布局進行編寫。因為稍後會有很多的盒子排列在同一行內。並且要保持換行
*
}複製**
@mixin present($size:100px,$bodycolor: #ff5151,$ribboncolor: #fff,$rotatedeg: 0deg)
.cap
}複製**
也可以傳入乙個變數。然後可以對變數設定初始值。如
@mixin present($size:100px,$bodycolor: #ff5151,$ribboncolor: #fff,$rotatedeg: 0deg) 複製**
.present2 複製**
無參編譯後：
.present
.present .hribbon, .present .vribbon
.present .cap 複製**
有參編譯後：
.present2
.present2 .hribbon, .present2 .vribbon
.present2 .cap 複製**
顯示效果：
乙個紅色的盒子框架
.vribbon
.hribbon 複製**
這裡使用了乙個小技巧。當你嘗試使用定位進行元素居中時，可能會造成這種情況
這樣是因為。我們使用top:50%後，元素的上邊框會對齊父元素的橫軸線。而不是元素的橫軸線對齊父元素橫軸線
這樣我們可以使用transform: translatey(-50%);進行矯正。讓元素上移自身高度的50%
left :50% 同理 用translatex屬性就行
我們給緞帶加上陰影後，看一看效果
.vribbon, .hribbon 複製**接下來繪製一下 盒蓋
.cap 複製**這樣乙個完整的盒子就繪製完畢了
首先，我們先定義一組顏色變數。在scss中，$代表宣告變數。後面是他的值
$colorred: #f24;
$colorwhite: #fff;
$colorblue: #3364f7;
$coloryellow: #ffd221;
$colorpurple: #c747ff;
$colors: ($colorred,$colorwhite,$colorblue,$coloryellow,$colorpurple);複製**
接下來，我們使用迴圈進行隨機指定盒子的大小，緞帶顏色，盒子顏色
在scss中，迴圈可以使用@for 其語法使用是如下：
@for
$i from 1 through 50 複製**
我們在for迴圈的開頭，指定一組初始化變數
$size: random(50)+50; //盒子大小
$rotatedeg: random(20)-10; //旋轉角度
$bodycolor: nth($colors, random(5)); //盒子本體顏色
$ribboncolor: nth($colors, random(5)); //緞帶顏色複製**
nth代表選中乙個集合內的指定元素，按照下標獲取。所以我們用random隨機生成0-5的座標
接下來，我們呼叫樣式：
.present# px, $bodycolor, $ribboncolor,#deg)
}複製**
接著準備50個盒子**，每個盒子的框架類名都要按照數字順序排列。沒有那麼多準備幾個都可以
"present1">
"cap">
"vribbon">
"hribbon">
"present2">
"cap">
"vribbon">
"hribbon">
......
"present50">
"cap">
"vribbon">
"hribbon">複製**
"'present'+i" v-for="i in 50">
複製**
這樣我們看看效果：
emmm......感覺好醜啊。和我們的預想不大一樣
其實我們可以看到 有些盒子的顏色和緞帶顏色重合了。導致看起來非常醜
我們可以在@for迴圈內加乙個判斷。如果生成的緞帶顏色和盒子顏色一樣，那我們就重新生成緞帶顏色
@if ($ribboncolor==$bodycolor)
.present# px, $bodycolor, $ribboncolor, #deg)
}複製**
這樣我們再看看效果
這樣我們的作品就完成了
歡迎各位小哥哥小姐姐收藏，關注，點讚哦。祝國慶愉快
sass中文文件
sass和scss異同
建議sass和scss搭配學
乙個專案帶你快速入門 Qt Creator
本 chat 計畫通過編寫簡易倒車雷達顯示系統 gui 介面講述 qt creator 基本入門操作。其中 gui 操作介面包括 usb 攝像機資料的獲取 此處採用的是 opencv 影象處理庫配合使用 顯示 電動車輛充電系統電池實時狀態顯示 充電的動態顯示和電量的靜態顯示 button table...
乙個小專案的oracle巡檢
公司要求對乙個長期沒人看管的專案的oracle資料進行檢查下，發現了如下問題。1.安裝方面 目前資料安裝在win2003的系統盤，而且看到安裝目錄稍顯混亂，比如系統日誌檔案並不在安裝目錄內，而是在c盤根目錄下，建議將資料庫安裝規範目錄結構安裝到非系統盤。2.配置方面 目前資料庫記憶體分配情況如下 s...
乙個小專案的技術選型
很簡單的乙個專案，主要分 通訊模組和服務模組。客戶端採用delphi開發，通訊方面考慮 midas技術或webservice。webservice效率上相比midas要低 拋開web防火牆的苛刻要求，midas中的socketconnection不論是在效能上還是在靈活性上應該說都是比較好的選擇。更...