從一個小專案快速入門Scss

王聖鬆發表於2018-10-02
CSS

TIps: 本文原始碼已託管至碼雲(Gitee)  連結戳這裡


先祝各位國慶快樂鴨

從一個小專案快速入門Scss


很多人昨天都沒找到我，其實我去......

從一個小專案快速入門Scss

麵價格不貴，50一碗可以加個雞蛋加根腸。加個微信就算了哈哈哈哈


向國慶期間還看掘金學習的同行們致敬


話不多說，我們來步入正題

今天我們來用一個veryveryvery simple的小專案來了解一下scss，這個非常火的技術

預覽圖是這樣子的：

從一個小專案快速入門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
}複製程式碼


顯示效果：

從一個小專案快速入門Scss

一個紅色的盒子框架


接下來我們編寫 橫縱向的緞帶。剛才只是給緞帶設定了顏色

.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%);
}複製程式碼


這裡使用了一個小技巧。當你嘗試使用定位進行元素居中時，可能會造成這種情況

從一個小專案快速入門Scss

這樣是因為。我們使用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處理器是不支援的。會報錯

從一個小專案快速入門Scss


接下來繪製一下 盒蓋

.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);
}複製程式碼


從一個小專案快速入門Scss

這樣一個完整的盒子就繪製完畢了


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">
複製程式碼


這樣我們看看效果：

從一個小專案快速入門Scss

emmm......感覺好醜啊。和我們的預想不大一樣

其實我們可以看到 有些盒子的顏色和緞帶顏色重合了。導致看起來非常醜


我們可以在@for迴圈內加一個判斷。如果生成的緞帶顏色和盒子顏色一樣，那我們就重新生成緞帶顏色

@if ($ribbonColor==$bodyColor) {
  $ribbonColor: nth($colors, random(5));
}
.present#{$i} {
  @include present(#{$size}px, $bodyColor, $ribbonColor, #{$rotateDeg}deg)
}複製程式碼

@if代表 scss中的邏輯判斷


這樣我們再看看效果

從一個小專案快速入門Scss

這樣我們的作品就完成了


歡迎各位小哥哥小姐姐收藏，關注，點贊哦。祝國慶愉快

Sass中文文件

Sass和Scss異同

建議Sass和Scss搭配學


相關文章