Day16 Sass Mixin

大家好,我是乌木白,今天要和大家介绍~ Sass 的另一个很好用的功能就是!!Mixin

什麽是Mixin?

因为在写 code 的时候,常常可能会因为不常用的语法,所以要另外去找资料,这时候就可以使用 Mixin 来帮你记住 Css 的技巧,让你的头脑不需要打结!

如何使用 Mixin?

以下范例程序码:

@mixin blueSize {
    color: blue;
    font-size:13px;
}

.header h1 {
    @include blueSize;
    background: #000;
}

.footer h2{
    @include blueSize;
}

因为 Mixin 是会写一些固定的元件在使用,类似时间线或者一些你在设计稿上类似的元件。这样写的用意就是我们不需要遇到的时候一直再去找资料一直复制贴上,我们只需要引入就可以了。

Mixin和变数差异

Mixin 和 变数 的写法很相似,但是使用的时机不太一样,就像上述所说的,我们在写变数是纯粹可以随时更改或改变的资料,但是 Mixin 是尽量以一个的元件为主!


这个是Bootstrap 的Mixin,这样大家可能比较清楚我的意思!

Mixin + import

欧赴抠斯,我们的 Mixin 也可以和 import 都能一起使用喔!!
但是最重要的一点就是我们要记得载入顺序,不然可能会出错喔!!

参数及Mixin 一起使用

@mixin color ($color){
    color:$color;
    border: 5px solid $color;
    text-decoration: $color;
}

.box {
    @include color(#ff0000);
}

这个的意思就是把我们先把这个程序码组成一个固定的元件,但是在其他地方可能他的颜色不一样,所以我们就在把颜色带入即可。

大家一定要多方尝试喔!


<<:  【Day10】Git 版本控制 - 将档案 push 到 GitHub 的懒人包

>>:  Day18-"字串练习-1"

Promise 方法

今天继续认识四种 Promise 可以使用的方法,基础的用法可以先参考昨天的文章 Promise.a...

Day09 测试写起乃-FactoryBot(1)

在测试时常会需要建立假资料以供测试使用,就可以安装 FactoryBot 来建立资料 安装 Fact...

[Day29] Whack A Mole Game

[Day29] Whack A Mole Game 打地鼠 需要用到的技巧与练习目标 const s...

React hooks 的基础概念:hooks链表

当函数组件进入render阶段时,会被renderWithHooks函数处理。函数组件作为壹个函数,...

GitHub Branch 策略 - 哪一种方式适合你?

若您对於 Git 相当熟悉,你应该对於建立分支(Branch) 应该不陌生。依据 GitHub 官方...