從一個小專案快速入門Scss
TIps: 本文原始碼已託管至碼雲(Gitee) 連結戳這裡
先祝各位國慶快樂鴨
很多人昨天都沒找到我，其實我去......
麵價格不貴，50一碗可以加個雞蛋加根腸。加個微信就算了哈哈哈哈
向國慶期間還看掘金學習的同行們致敬
話不多說，我們來步入正題
今天我們來用一個veryveryvery simple的小專案來了解一下scss，這個非常火的技術
預覽圖是這樣子的：
一大堆不同緞帶和盒子顏色的禮物盒。然後用Scss 隨機填充顏色和隨機座標
Scss的概念
首先，我們先了解下，Scss是什麼東西
官方是這麼解釋的：
世界上最成熟、最穩定、最強大的專業級CSS擴充套件語言！
（此處連結中文文件）
他有以下特點：
相容CSS，特性豐富，成熟，行業認可，社群龐大，框架......
個人理解其實就是讓css的編寫也擁有計算能力和邏輯程式碼。方便更好地去管理css的程式碼和編輯
2. HTML程式碼
首先，我們先搭建一下html程式碼
<div class="present"> //外部盒子 <div class="cap"></div> //盒子蓋 <div class="vribbon"></div> //縱向緞帶 <div class="hribbon"></div> //橫向緞帶 </div>複製程式碼
層級很簡單
3. 搭建基礎CSS框架
在這裡，我們使用flex佈局進行編寫。因為稍後會有很多的盒子排列在同一行內。並且要保持換行
* {
html, body {
width: 100%;
height: 100%;
background-color: #222; //背景顏色設定為黑色
margin: 0;
display: flex; //flex佈局
flex-wrap: wrap; //讓彈性盒元素在必要的時候換行
}
}複製程式碼
然後我們設定外部盒子主體的css樣式。這裡我們選擇抽出為一個方法。因為要形成不同顏色，不同變換的盒子。必須要動態引數
@mixin present($size:100px,$bodyColor: #ff5151,$ribbonColor: #fff,$rotateDeg: 0deg) {
width: $size; //$代表宣告變數 你可以宣告區域性變數也可宣告全域性變數
height: $size;
position: relative;
background-color: $bodyColor;
box-shadow: 0px 0px 20px rgba(black, 0.5);
transform: rotate($rotateDeg);
margin: 10px;
.vribbon, .hribbon {
background-color: $ribbonColor;
}
.cap {
background-color: $bodyColor;
}
}複製程式碼
@mixin代表宣告一個方法。你可以在編寫完@mixin方法後，在你想呼叫的元素css內呼叫它。他就會編譯後插入到裡面
也可以傳入一個變數。然後可以對變數設定初始值。如
@mixin present($size:100px,$bodyColor: #ff5151,$ribbonColor: #fff,$rotateDeg: 0deg) {複製程式碼
並且Scss支援根據HTML層級進行層級巢狀。這樣無論是寫起來還是看起來條理更清楚
示例呼叫 無參 @include代表使用一個方法：
.present {
@include present()
}複製程式碼
示例呼叫 有參：
.present2 {
@include present(120px, #2853ff, #ffd428, 40deg)
}複製程式碼
無參編譯後：
.present {
width: 100px;
height: 100px;
position: relative;
background-color: #ff5151;
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
transform: rotate(0deg);
margin: 10px
}
.present .hribbon, .present .vribbon {
background-color: #fff
}
.present .cap {
background-color: #ff5151
}複製程式碼
有參編譯後：
.present2 {
width: 120px;
height: 120px;
position: relative;
background-color: #2853ff;
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
transform: rotate(40deg);
margin: 10px
}
.present2 .hribbon, .present2 .vribbon {
background-color: #ffd428
}
.present2 .cap {
background-color: #2853ff
}複製程式碼
顯示效果：
一個紅色的盒子框架
接下來我們編寫 橫縱向的緞帶。剛才只是給緞帶設定了顏色
.vribbon { //縱向緞帶
width: 15%;
height: 100%;
position: absolute;
left: 50%; //絕對定位居左50%
top: 0;
transform: translateX(-50%);
}
.hribbon { //橫向緞帶
width: 100%;
height: 15%;
position: absolute;
left: 0;
top: 50%; //絕對定位居頂部50%
transform: translateY(-50%);
}複製程式碼
這裡使用了一個小技巧。當你嘗試使用定位進行元素居中時，可能會造成這種情況
這樣是因為。我們使用top:50%後，元素的上邊框會對齊父元素的橫軸線。而不是元素的橫軸線對齊父元素橫軸線
這樣我們可以使用 transform: translateY(-50%); 進行矯正。讓元素上移自身高度的50%
left :50% 同理 用translateX屬性就行
我們給緞帶加上陰影后，看一看效果
.vribbon, .hribbon {
box-shadow: 0 0 20px rgba(black, 0.5)
}複製程式碼
提示：在sass/scss處理器中。顏色可以使用預定義的英文名(如black，white，green)。但是普通CSS處理器是不支援的。會報錯
Line"/>
接下來繪製一下 盒蓋
.cap {
height: 15%;
width: calc(100% + 10px); //讓盒蓋的寬度 兩邊都比盒子寬5px
position: absolute;
left: 0;
top: 0;
transform: translateX(-5px); //因為他會左軸對齊，所以我們左移5px
box-shadow: 0 0 20px rgba(black, 0.5);
}複製程式碼
這樣一個完整的盒子就繪製完畢了
4. 進行邏輯編寫
首先，我們先定義一組顏色變數。在scss中，$代表宣告變數。後面是他的值
$colorRed: #f24; $colorWhite: #fff; $colorBlue: #3364f7; $colorYellow: #ffd221; $colorPurple: #c747ff; $colors: ($colorRed,$colorWhite,$colorBlue,$colorYellow,$colorPurple);複製程式碼
在這裡面， $colors 中的（）代表是一個集合。裡面是一個個的變數名。
接下來，我們使用迴圈進行隨機指定盒子的大小，緞帶顏色，盒子顏色
在scss中，迴圈可以使用@for 其語法使用是如下：
@for $i from 1 through 50 複製程式碼
其中 $i 代表是變數。其數值跟著每次迴圈+1 你可以在迴圈中使用這個變數。from 後面的數值是初始值。through後面的是最大值。@for 只允許使用整數定義初始值和最大值
我們在for迴圈的開頭，指定一組初始化變數
$size: random(50)+50; //盒子大小 $rotateDeg: random(20)-10; //旋轉角度 $bodyColor: nth($colors, random(5)); //盒子本體顏色 $ribbonColor: nth($colors, random(5)); //緞帶顏色複製程式碼
其中，random代表生成隨機數。引數是最大值。如果有參從0開始
nth代表選中一個集合內的指定元素，按照下標獲取。所以我們用random隨機生成0-5的座標
接下來，我們呼叫樣式：
.present#{$i} {
@include present(#{$size}px, $bodyColor, $ribbonColor,#{$rotateDeg}deg)
}複製程式碼
#{}代表我可以在{}內拼接變數名。編譯後會插入到裡面
接著準備50個盒子程式碼，每個盒子的框架類名都要按照數字順序排列。沒有那麼多準備幾個都可以
<div class="present1"> <div class="cap"></div> <div class="vribbon"></div> <div class="hribbon"></div> </div> <div class="present2"> <div class="cap"></div> <div class="vribbon"></div> <div class="hribbon"></div> </div> ...... <div class="present50"> <div class="cap"></div> <div class="vribbon"></div> <div class="hribbon"></div </div>複製程式碼
當然，我用的是Vue。可以進行v-for迴圈
<div :class="'present'+i" v-for="i in 50"> 複製程式碼
這樣我們看看效果：
emmm......感覺好醜啊。和我們的預想不大一樣
其實我們可以看到 有些盒子的顏色和緞帶顏色重合了。導致看起來非常醜
我們可以在@for迴圈內加一個判斷。如果生成的緞帶顏色和盒子顏色一樣，那我們就重新生成緞帶顏色
@if ($ribbonColor==$bodyColor) {
$ribbonColor: nth($colors, random(5));
}
.present#{$i} {
@include present(#{$size}px, $bodyColor, $ribbonColor, #{$rotateDeg}deg)
}複製程式碼
@if代表 scss中的邏輯判斷
這樣我們再看看效果
這樣我們的作品就完成了
歡迎各位小哥哥小姐姐收藏，關注，點贊哦。祝國慶愉快
Sass中文文件
ofollow,noindex"> Sass和Scss異同
建議Sass和Scss搭配學