Sass 學(xué)習(xí)起來是很無趣的一件事，畢竟如果沒有項目單單看文檔是挺無聊的缨历，還不如看政治課本有趣以蕴。這篇文章就從一個簡單的例子入手糙麦，通過用 Sass 來簡化 CSS 代碼來學(xué)習(xí) Sass 中的一些常用技巧。
學(xué)習(xí)方法
Sass 是前端的一種工具丛肮，所以對于工具一般是邊學(xué)邊用赡磅，而不是學(xué)完再去用。而且不要覺得這個例子中的 Sass 知識很少宝与，因為真實項目一般也用不了很多焚廊。如果用到了，可以直接 Google 查就行了习劫。
一個例子
我們要做的就是兩個按鈕咆瘟，當 Hover 的時候會上下動。
<div class="buttonWrapper">
<button>Start</button>
<button>End</button>
</div>
下面是用 CSS 實現(xiàn)的代碼诽里√徊停可以大概看下實現(xiàn)過程，但是不用細究须肆。之后會用 Sass 一步步去簡化這些代碼匿乃。
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
/* First button */
.buttonWrapper button:first-child {
padding: 10px 20px;
font-size: 24px;
border-radius: 4px;
color: white;
border: none;
margin: 40px;
background: #55acee;
box-shadow: 0px 5px 0px 0px black;
}
/* First button hover */
.buttonWrapper button:first-child:hover {
animation: horizontalShake .5s;
}
/* Last button */
.buttonWrapper button:last-child {
padding: 10px 20px;
font-size: 24px;
border-radius: 4px;
color: white;
border: none;
margin: 40px;
background: #2ECC71;
box-shadow: 0px 5px 0px 0px black;
}
/* Last button hover */
.buttonWrapper button:last-child:hover {
animation: verticalShake .5s;
}
/* Shake horizontally */
@keyframes horizontalShake {
0% {
transform: translateX(10%);
}
25% {
transform: translateX(-10%);
}
75% {
transform: translateX(10%);
}
100% {
transform: translateX(0%);
}
}
/* Shake Vertically */
@keyframes verticalShake {
0% {
transform: translateY(10%);
}
25% {
transform: translateY(-10%);
}
75% {
transform: translateY(10%);
}
100% {
transform: translateY(0%);
}
}
代碼也很簡單桩皿，分別是兩個按鈕的基本樣式和 Hover 樣式豌汇，以及兩個動畫。
嵌套
下面開始重構(gòu)代碼泄隔。嵌套是 Sass 最常用的技巧拒贱，以后的
.a .b .c .d {
color: red;
}
就可以寫成
.a {
.b {
.c {
.d {
}
}
}
}
我們的代碼里的 .buttonWrapper 和 button 就是這種結(jié)構(gòu)的，所以可以改寫成下面：
...
.buttonWrapper {
button {
padding: 10px 20px;
font-size: 24px;
border-radius: 4px;
color: white;
border: none;
margin: 40px;
}
// First button
button:first-child {
background: #55acee;
box-shadow: 0px 5px 0px 0px black;
}
// First button hover
button:first-child:hover {
animation: horizontalShake .5s;
}
// Last button
button:last-child {
background: #2ECC71;
box-shadow: 0px 5px 0px 0px black;
}
button:last-child:hover {
animation: verticalShake .5s;
}
}
...
占位符
我們發(fā)現(xiàn)像 button:first-child 和 button 好像有點重復(fù)的感覺佛嬉，但是這又不是嵌套的關(guān)系逻澳，只是有點像。所以這就要用到 Sass 占位符了暖呕。
& 代表了上一級的選擇器斜做，這里可以用 & 來替換 button，代碼改寫如下：
...
.buttonWrapper {
button {
padding: 10px 20px;
font-size: 24px;
border-radius: 4px;
color: white;
border: none;
margin: 40px;
// First button
&:first-child {
background: #55acee;
box-shadow: 0px 5px 0px 0px black;
// First button hover
&:hover {
animation: horizontalShake .5s;
}
}
// Last button
&:last-child {
background: #2ECC71;
box-shadow: 0px 5px 0px 0px black;
// Last button hover
&:hover {
animation: verticalShake .5s;
}
}
}
}
...
Mixin
我們發(fā)現(xiàn)兩個按鈕的代碼差不多湾揽，唯一不同的就是顏色瓤逼。有沒有像函數(shù)一樣的東西，傳入顏色參數(shù)就生成一樣的代碼呢库物？Sass 有 Mixin 這個東西霸旗，其本質(zhì)就是函數(shù)，只是名字有點奇怪戚揭。
定義 Mixin 前面要用 @mixin诱告，調(diào)用的時候要在前端用 @include
Sass 的變量要用 $ 開頭。還有一定別忘了要在結(jié)尾加分號民晒。
...
@mixin buttonStyles($color) {
background: $color;
box-shadow: 0px 5px 0px 0px black;
}
.buttonWrapper {
button {
padding: 10px 20px;
font-size: 24px;
border-radius: 4px;
color: white;
border: none;
margin: 40px;
// First button
&:first-child {
$blue: #55acee;
@include buttonStyles($blue);
// First button hover
&:hover {
animation: horizontalShake .5s;
}
}
// Last button
&:last-child {
$green: #2ECC71;
@include buttonStyles($green);
// Last button hover
&:hover {
animation: verticalShake .5s;
}
}
}
}
...
顏色函數(shù)
在 box-shadow 那里用黑色明顯不好精居，我們更希望的是按鈕顏色再深一點的顏色锄禽。可以使用 Sass 提供的 darken(color, percentage) 來生成對應(yīng)顏色箱蟆。
...
@mixin buttonStyles($color) {
background: $color;
box-shadow: 0px 5px 0px 0px darken($color, 20%);
}
...
循環(huán)和條件
在 @keyframes 里代碼也有很多相似的地方沟绪。這里可以用 Sass 提供的循環(huán)和條件語法來生成 keyframes 代碼。
for 循環(huán)使用 @for $i from x to y 將會從 x 開始到 y - 1 依次遍歷空猜。if 條件語句使用 @if condition绽慈。
#{$xxx} 和 ES6 的模板字符串一樣，里面要放變量辈毯。整體就是一個字符串坝疼。
...
/* Shake horizontally */
$offset: 10%;
$step: 25%;
@keyframes horizontalShake {
@for $i from 0 to 4{
#{$i * $step} {
@if $i % 2 == 0 {
transform: translateX(-$offset);
}
@else {
transform: translateX($offset);
}
}
}
}
/* Shake Vertically */
@keyframes verticalShake {
@for $i from 0 to 4{
#{$i * $step} {
@if $i % 2 == 0 {
transform: translateY(-$offset);
}
@else {
transform: translateY($offset);
}
}
}
}
總結(jié)
- 嵌套語法用于父子選擇器
- 占位符用代表父選擇器
- Mixin 就是我們熟悉的函數(shù)
- 可以使用 Sass 提供的顏色函數(shù)
- 變量使用
$variable - 循環(huán)語句
@for $i from 0 to 4，條件語句@if condition
