[笔记] Sass 实战全攻略 – 4 – mixin 统整你常用的 CSS 方法

章节连结

妥善运用变量和 mixin,这样就可以方便管理你常用的 css 方法,在必要时候免去你上网 google 查询的困扰。同时,你也可以借此开始打包一套属于自己的常用 mixin 数据库包,在日后撰写各种 css 时来优先加载。sass logo


课程对应章节

Course 24 ~ Course 28 (全部一共有 72 Courses)

请注意:本系列文章为个人对应课程的消化吸收后,所整理出来的内容。换言之,并不一定会包含全部的课程内容,也有可能会添加其他资源来说明。课程连结网址:http://tinyurl.com/ueo7bm2

内容

1. mixin的语法为 @mixin name{<something>} 或是 @mixin name($a,$b){<something>} 。你可以想像成在写一个函式,然后你可以传入变量来做使用。
2. 实际运用上,记得由上到下的读取规则,先在作为 index 的 all.scss 加载 @import “mixin”,然后在要使用的 css 所在用 @include <方法名称>(变量),就可以成功编译。

范例

 


Sass 实战全攻略系列文章

  • [笔记] Sass 实战全攻略 – 11 – 自制格线系统
  • [笔记] Sass 实战全攻略 – 10 – 设计模式和规范
  • [笔记] Sass 实战全攻略 – 9 – 错误的 CSS 设计方式
  • [笔记] Sass 实战全攻略 – 8 – 关于命名的那些事儿
  • [笔记] Sass 实战全攻略 – 7 – Sass/CSS 设计模式 (OOCSS)
  • [笔记] Sass 实战全攻略 – 6 – Sass/CSS 设计模式 (Smacss)
  • [笔记] Sass 实战全攻略 – 5 – mixin 解决响应式网页的断点问题
  • [笔记] Sass 实战全攻略 – 3 – import 切分档案和维护
  • [笔记] Sass 实战全攻略 – 2 – 变量的运用
  • [笔记] Sass 实战全攻略 – 1 – 简介
  • 按赞加入粉丝团

    延伸阅读