[笔记] Sass 实战全攻略 – 2 – 变量的运用

章节连结

变量在 Sass 的运用上,最为方便就是可以事先定义一些常用的基准变量,如颜色、大小、字体……等等,同时在搭配运算子进行加减乘除。如此一来,在“语意化”和“维护度”上都可以拥有显著的提升。
sass logo


课程对应章节

Course 10 ~ Course 16 (全部一共有 72 Courses)

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

内容

1.使用 “$” 来进行变量宣告,最后要记得打上 ; ,否则会编译错误
2.可以在变量内使用其他的变量,创造两者的关联性
3.可以对变量进行加减乘除
4.撰写时,请记得是由上到下逐行读取。若有出现变量的参照失效,除了打错字、忘记宣告以外,大概就是行数放置错了
5. darken(<颜色>,<百分比>):将以某个颜色为基础,加深%,Scss 内建,无需宣告
6. lighten(<颜色>,<百分比>):将以某个颜色为基础,调淡%,Scss 内建,无需宣告

范例

 


Sass 实战全攻略系列文章

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

    延伸阅读