Sass 學(xué)習(xí)起來(lái)是很無(wú)趣的一件事，畢竟如果沒有項(xiàng)目單單看文檔是挺無(wú)聊的，還不如看政治課本有趣。這篇文章就從一個(gè)簡(jiǎn)單的例子入手，通過用 Sass 來(lái)簡(jiǎn)化 CSS 代碼來(lái)學(xué)習(xí) Sass 中的一些常用技巧。
學(xué)習(xí)方法
Sass 是前端的一種工具，所以對(duì)于工具一般是邊學(xué)邊用，而不是學(xué)完再去用。而且不要覺得這個(gè)例子中的 Sass 知識(shí)很少，因?yàn)檎鎸?shí)項(xiàng)目一般也用不了很多。如果用到了，可以直接 Google 查就行了。
一個(gè)例子
我們要做的就是兩個(gè)按鈕，當(dāng) Hover 的時(shí)候會(huì)上下動(dòng)。
<div class="buttonWrapper">
<button>Start</button>
<button>End</button>
</div>
下面是用 CSS 實(shí)現(xiàn)的代碼?？梢源蟾趴聪聦?shí)現(xiàn)過程，但是不用細(xì)究。之后會(huì)用 Sass 一步步去簡(jiǎn)化這些代碼。
/* 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%);
}
}
代碼也很簡(jiǎn)單，分別是兩個(gè)按鈕的基本樣式和 Hover 樣式，以及兩個(gè)動(dòng)畫。
嵌套
下面開始重構(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 好像有點(diǎn)重復(fù)的感覺，但是這又不是嵌套的關(guān)系，只是有點(diǎn)像。所以這就要用到 Sass 占位符了。
& 代表了上一級(jí)的選擇器，這里可以用 & 來(lái)替換 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)兩個(gè)按鈕的代碼差不多，唯一不同的就是顏色。有沒有像函數(shù)一樣的東西，傳入顏色參數(shù)就生成一樣的代碼呢？Sass 有 Mixin 這個(gè)東西，其本質(zhì)就是函數(shù)，只是名字有點(diǎn)奇怪。
定義 Mixin 前面要用 @mixin，調(diào)用的時(shí)候要在前端用 @include
Sass 的變量要用 $ 開頭。還有一定別忘了要在結(jié)尾加分號(hào)。
...
@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 那里用黑色明顯不好，我們更希望的是按鈕顏色再深一點(diǎn)的顏色?？梢允褂?Sass 提供的 darken(color, percentage) 來(lái)生成對(duì)應(yīng)顏色。
...
@mixin buttonStyles($color) {
background: $color;
box-shadow: 0px 5px 0px 0px darken($color, 20%);
}
...
循環(huán)和條件
在 @keyframes 里代碼也有很多相似的地方。這里可以用 Sass 提供的循環(huán)和條件語(yǔ)法來(lái)生成 keyframes 代碼。
for 循環(huán)使用 @for $i from x to y 將會(huì)從 x 開始到 y - 1 依次遍歷。if 條件語(yǔ)句使用 @if condition。
#{$xxx} 和 ES6 的模板字符串一樣，里面要放變量。整體就是一個(gè)字符串。
...
/* 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é)
- 嵌套語(yǔ)法用于父子選擇器
- 占位符用代表父選擇器
- Mixin 就是我們熟悉的函數(shù)
- 可以使用 Sass 提供的顏色函數(shù)
- 變量使用
$variable - 循環(huán)語(yǔ)句
@for $i from 0 to 4，條件語(yǔ)句@if condition
