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变数的格式有哪些

• 格式

1. 数字: 10px , 1rem
2. 字串: 'test' , '../images/dog/'
3. 颜色: #000000 , rgba(0,0,255,255,0.1) , red
4. 布林: true , false
5. 空值: 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切分成多支档案来管理
若有任何问题 或 内容有误
都可以跟我说唷