大家好,我是乌木白,今天要和大家介绍~ Sass 的另一个很好用的功能就是!!Mixin
因为在写 code 的时候,常常可能会因为不常用的语法,所以要另外去找资料,这时候就可以使用 Mixin 来帮你记住 Css 的技巧,让你的头脑不需要打结!
以下范例程序码:
@mixin blueSize {
color: blue;
font-size:13px;
}
.header h1 {
@include blueSize;
background: #000;
}
.footer h2{
@include blueSize;
}
因为 Mixin 是会写一些固定的元件在使用,类似时间线或者一些你在设计稿上类似的元件。这样写的用意就是我们不需要遇到的时候一直再去找资料一直复制贴上,我们只需要引入就可以了。
Mixin 和 变数 的写法很相似,但是使用的时机不太一样,就像上述所说的,我们在写变数是纯粹可以随时更改或改变的资料,但是 Mixin 是尽量以一个的元件为主!
这个是Bootstrap 的Mixin,这样大家可能比较清楚我的意思!
欧赴抠斯,我们的 Mixin 也可以和 import 都能一起使用喔!!
但是最重要的一点就是我们要记得载入顺序,不然可能会出错喔!!
@mixin color ($color){
color:$color;
border: 5px solid $color;
text-decoration: $color;
}
.box {
@include color(#ff0000);
}
这个的意思就是把我们先把这个程序码组成一个固定的元件,但是在其他地方可能他的颜色不一样,所以我们就在把颜色带入即可。
<<: 【Day10】Git 版本控制 - 将档案 push 到 GitHub 的懒人包
今天继续认识四种 Promise 可以使用的方法,基础的用法可以先参考昨天的文章 Promise.a...
在测试时常会需要建立假资料以供测试使用,就可以安装 FactoryBot 来建立资料 安装 Fact...
[Day29] Whack A Mole Game 打地鼠 需要用到的技巧与练习目标 const s...
当函数组件进入render阶段时,会被renderWithHooks函数处理。函数组件作为壹个函数,...
若您对於 Git 相当熟悉,你应该对於建立分支(Branch) 应该不陌生。依据 GitHub 官方...