Sass 变数 与 darken , lighten DAY33

今天我们要来介绍 Sass的变数啦~~
介绍之前
我们必须先了解
为什么我们需要它呢??
当我们原先在撰写 css的时候
假设有100个地方的颜色皆为红色
但有一天
我们需要更动这些颜色
那我们岂不是要一行一行的去改吗
想到就非常麻烦呀~~
这时候变数就可以解决你的问题
那究竟要怎么写呢??

Sass变数(variables)
1.将时常要设定的 css 放在变数来管理
2.变数是用美元符号($)开头

$text-color: #37523d;body{  color: $text-color}

这里编译后
会变成这样

body {  color: #37523d;}

CodePen: https://codepen.io/wemyferb/pen/XWKWvbg
注意:
1.
要记得补上分号 不然会编译错误
2.
由于 Sass编译是由上往下
所以 有使用到变数的话 变数一定要在使用的地方前面

到这里会发现现在写的东西开始有 语意化 啦~~

---

变数搭配加减乘除

这里先介绍 Sass变数的格式有哪些

格式数字: 10px , 1rem字串: 'test' , '../images/dog/'颜色: #000000 , rgba(0,0,255,255,0.1) , red布林: true , false空值: null支援运算
(10px*2)

$font-sm: 50px;$font-md: $font-sm*1.5;span{  //50px  font-size: $font-sm;}p{  // (50*1.5)px --> 75px  font-size: $font-md;}

CodePen: https://codepen.io/wemyferb/pen/qBNEExJ

---

Sass 字串管理

$font-family-base: 'monospave';body{  font-family: $font-family-title;}

---

Sass darken 与 lighten

$base-color: #0072E3;.box{  width: 100px;  height: 100px;  margin: 20px;}.box1{  background: $base-color;}.box2{  //darken : 以$base-color为基底 再暗20%  background: darken($base-color,20%);}.box3{  //lighten : 以$base-color为基底 再亮30%  background: lighten($base-color,30%);}

CodePen:https://codepen.io/wemyferb/pen/ZEOYYVv

---

那今天的 Sass 介绍就到这里啦
明天将介绍如何将 Sass切分成多支档案来管理
若有任何问题 或 内容有误
都可以跟我说唷