sass.jpg
Sass 学习起来是很无趣的一件事，毕竟如果没有项目单单看文档是挺无聊的，还不如看政治课本有趣。这篇文章就从一个简单的例子入手，通过用 Sass 来简化 CSS 代码来学习 Sass 中的一些常用技巧。
学习方法
Sass 是前端的一种工具，所以对于工具一般是边学边用，而不是学完再去用。而且不要觉得这个例子中的 Sass 知识很少，因为真实项目一般也用不了很多。如果用到了，可以直接 Google 查就行了。
一个例子
我们要做的就是两个按钮，当 Hover 的时候会上下动。
<div class="buttonWrapper">
<button>Start</button>
<button>End</button>
</div>
下面是用 CSS 实现的代码。可以大概看下实现过程，但是不用细究。之后会用 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 样式，以及两个动画。
嵌套
下面开始重构代码。嵌套是 Sass 最常用的技巧，以后的
.a .b .c .d {
color: red;
}
就可以写成
.a {
.b {
.c {
.d {
}
}
}
}
我们的代码里的 .buttonWrapper 和 button 就是这种结构的，所以可以改写成下面：
...
.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;
}
}
...
占位符
我们发现像 button:first-child 和 button 好像有点重复的感觉，但是这又不是嵌套的关系，只是有点像。所以这就要用到 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
我们发现两个按钮的代码差不多，唯一不同的就是颜色。有没有像函数一样的东西，传入颜色参数就生成一样的代码呢？Sass 有 Mixin 这个东西，其本质就是函数，只是名字有点奇怪。
定义 Mixin 前面要用 @mixin，调用的时候要在前端用 @include
Sass 的变量要用 $ 开头。还有一定别忘了要在结尾加分号。
...
@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;
}
}
}
}
...
颜色函数
在 box-shadow 那里用黑色明显不好，我们更希望的是按钮颜色再深一点的颜色。可以使用 Sass 提供的 darken(color, percentage) 来生成对应颜色。
...
@mixin buttonStyles($color) {
background: $color;
box-shadow: 0px 5px 0px 0px darken($color, 20%);
}
...
循环和条件
在 @keyframes 里代码也有很多相似的地方。这里可以用 Sass 提供的循环和条件语法来生成 keyframes 代码。
for 循环使用 @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);
}
}
}
}
总结
- 嵌套语法用于父子选择器
- 占位符用代表父选择器
- Mixin 就是我们熟悉的函数
- 可以使用 Sass 提供的颜色函数
- 变量使用
$variable - 循环语句
@for $i from 0 to 4，条件语句@if condition
网友评论