從一個小項目快速入門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處理器是不支持的。會報錯

接下來繪製一下 盒蓋

.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中文文檔

Sass和Scss異同

建議Sass和Scss搭配學