[Day 05] Sass - Variables
Variables
在Sass中，开发者可以使用变数，例如可以将常用的颜色、宽度设定成变数，这样未来如果颜色或宽度要改变时，只需要改掉变数的值，而不用像一般CSS一样需要到每个地方把颜色或宽度改成新的值~
举例来说，在Sass里可以这样用:
// 宣告变数
$image-max-width: 50px;
// 使用变数
img {
max-width: $image-max-width;
}
// 宣告变数
$primary: #0058E6;
// 使用变数
h1 {
color: $primary;
}
直接写比较有感觉，我们来写一些常用的变数
打开我们在Day3建立的专案，在main.scss最上面加上:
// main.scss
// colors
$primary: #0058E6;
$secondary: #00F26D;
$warning: #F5BD2D;
// spacing
$base-padding: 0.75rem;
$base-margin: 0.75rem;
h1 {
color: $primary;
margin: $base-margin;
}
a {
color: $secondary;
}
button {
color: white;
background: $warning;
padding: $base-padding;
display: block;
}
接着修改index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>[Day05] ITHelp Sass</title>
</head>
<body>
<h1>This is an h1</h1>
<a>This is an anchor tag</a>
<button>Warning</button>
</body>
</html>
接下来将专案跑起来(终端机输入gulp编译sass和用Live Server打开index.html，之後的文章不会再提醒~)
就会看到网页显示如下图
恭喜学会了Sass变数的使用，有没有觉得有了变数之後写起来更加顺手了呢?
Day 8 - 用 canvas 复刻 小画家 绘制圆形/椭圆形
圆形 尝试ellipse 按照搜寻结果，我们一开始可能很直觉的会想到使用 ellipse ellip...
Day [1] — this：存在於物件 — JS之浸猪笼系列
太想要放梗图ㄌ..... this = 这个。 如果对this的理解到这里，很棒 您跟我一样完全看...
Day-6:开发专案为什麽写测试？
测试系虾米？ 丢系试试看目前这个东西有没有达到理想状态，或者有没有不足的地方？ 坏掉…等，当然，不可...
Day-9: Migration 系虾米哇贵？
Migration建立资料表系虾密？ Rails使用了Migration资料库迁移机制来定义资料库结...
Day 6 : 数学运算与逻辑判断
今天将会介绍程序中的数学运算，并且学习python的逻辑判断。 数学运算 Python也可以拿来当计...