#1 – What are CSS Variables?
什麼是 CSS 變量?
Why CSS Variables?
.intro-text{
color: #ee44f9;
margin: 20px;
font-size: 2em;
font-weight: bold;
}
.outro-text{
color: #ee44f9;
margin: 10px;
font-size: 1em;
}
.blurb{
color: #ee44f9;
margin: 0;
}“primary-colour” variable
Custom Properties
- CSS Variables are also known as “Custom Properties”
- They look like regular CSS properties, with a — before them
- –my-property: value;
- CSS Variables == Custom Properties
範例程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Variables</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav class="main-nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="banner">
<h1>Mario & Luigi</h1>
<p>Plumbing Extravaganzas</p>
</div>
<div class="content">
<div class="spot">
<h2>We Love All Kinds of Pipes...</h2>
<p>Lorizzle ipsum crunk brizzle amet, gizzle cool elizzle. Nullam dawg velizzle, aliquet volutpizzle, suscipizzle dizzle, gravida yippiyo, arcu. Pellentesque eget check it out. Fo shizzle my nizzle erizzle. Boom shackalack bling bling dolor turpizzle go to hizzle tempor. Yippiyo mah nizzle nibh et turpizzle. Yo izzle da bomb. Daahng dawg eleifend rhoncus daahng dawg. In hac habitasse fo shizzle dictumst. Yo mamma dapibizzle.</p>
<a href="#">More info...</a>
</div>
<div class="spot">
<h2>In Fact, we're Piping-Mad</h2>
<p>I saw beyonces tizzles and my pizzle went crizzle tellus urna, pretium own yo', mattis away, eleifend we gonna chung, nunc. Daahng dawg suscipizzle. Integer sempizzle velizzle sizzle mah nizzle.</p>
<a href="#">More info...</a>
</div>
<div class="spot">
<h2>Any Shape and Any Size...</h2>
<p>Phasellizzle interdum volutpizzle shizzlin dizzle. Ut semper adipiscing shiz. Ma nizzle sure est. Nulla sapizzle ass, ultrices nec, accumsizzle pizzle, rizzle quis, pede. Dizzle nec shit. Etizzle rutrizzle ornare ante. Maurizzle its fo rizzle. Vestibulum izzle pede varius nibh commodo commodo.</p>
<a href="#">More info...</a>
</div>
<div class="spot">
<h2>No Job is Too Big</h2>
<p>Mofo yo mamma dolor sizzle boofron, consectetizzle adipiscing elit. Hizzle izzle shizzle my nizzle crocodizzle. Quisque mi crackalackin, sodalizzle izzle, crackalackin a, eleifend nizzle, boofron.</p>
<a href="#">More info...</a>
</div>
</div>
</main>
<footer>
<div class="blurbs">
<div class="blurb">
<h3>Blurb title</h3>
<p>Etizzle a magna dang mammasay mammasa mamma oo sa accumsizzle.</p>
</div>
<div class="blurb">
<h3>Blurb title</h3>
<p>Funky fresh in stuff. Yo mamma mauris dolor, shit vitae, its fo rizzle.</p>
</div>
<div class="blurb">
<h3>Blurb title</h3>
<p>Vestibulizzle ante ipsizzle sure dope orci luctus et ultrices posuere shizzle.</p>
</div>
</div>
</footer>
</body>
</html>/* --- Variables --- */
/* --- Main styles --- */
h1, h2, h3{
font-weight: normal;
}
body{
margin: 0;
font-family: Verdana;
}
nav.main-nav ul{
width: 600px;
margin: 30px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
list-style-type: none;
padding: 0;
text-align: center;
}
nav a{
color: #daa33e;
}
.banner{
background: #3e84da;
color: #fff;
font-size: 1.6em;
text-align: center;
padding: 100px 0 160px;
}
.content{
width: 760px;
margin: 0 auto;
position: relative;
top: -100px;
padding: 40px 60px;
background: #fff
}
.spot{
margin: 0 40px 80px;
text-align: center;
}
.spot h2{
color: #3e84da;
}
.spot p{
color: #333;
line-height: 2em;
font-size: 0.9em
}
.content a{
color: #daa33e;
font-size: 1.2em;
}
footer{
background: #ddd;
padding: 60px 0
}
footer .blurbs{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-width: 760px;
margin: 0 auto;
grid-gap: 40px;
}
footer .blurb{
text-align: center;
color: #333;
line-height: 2em;
font-size: 0.9em
}#2 – Declaring Variables
範例程式碼
/* --- Variables --- */
:root{
--theme-color: #3e84da;
--link-color: #daa33e;
}
/* --- Main styles --- */
nav a{
color: var(--link-color);
}
.banner{
background: var(--theme-color);
color: #fff;
font-size: 1.6em;
text-align: center;
padding: 100px 0 160px;
}
.spot h2{
color: var(--theme-color);
}
.content a{
color: var(--link-color);
font-size: 1.2em;
}#3 – CSS Variable Benefits
範例程式碼
/* --- Variables --- */
:root{
--theme-color: #3e84da;
--link-color: #daa33e;
--layout: 1fr 1fr 1fr;
nav{
--link-color: #000;
}
@media screen and (max-width: 760px){
:root{
--layout: 1fr;
}
}
/* --- Main styles --- */
footer .blurbs{
display: grid;
grid-template-columns: var(--layout);
max-width: 760px;
margin: 0 auto;
gap: 40px;
}#4 – CSS Variables & JavaScript
swatch 色板
範例程式碼
<header>
<div class="swatches">
<span style="background: #222;"></span>
<span style="background: #f76262;"></span>
<span style="background: #3e84da;"></span>
<span style="background: #ebb332;"></span>
</div>
</header>
<script type="text/javascript" src="js/swatches.js"></script>.swatches span{
display: inline-block;
width: 20px;
height: 20px;
margin: 10px;
cursor: pointer;
}var swatches = document.querySelectorAll('.swatches span');
var root = document.querySelector(':root');
swatches.forEach((swatch)=>{
swatch.addEventListener('click',(e)=>{
root.style.setProperty('--theme-color',e.target.style.background);
});
});Codepen 範例程式碼
– CSS Variables (CSS 變數)
Codepen 練習
– Swatches (色板切換)