--varName:var(--varName)
/*
CSS VARIBLES AKA Custom Properties
hold a value and reuse it
--varName:var(--varName)
scope
:root{} === global
element === local
any property
*/
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">
<title>CSS Tutorial</title>
<link rel="stylesheet" href="styles.css">
</head>
<body >
<h1 class="heading">main heading</h1>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo culpa optio voluptatum ea at consequatur.</p>
<div class="main">
<p class="main-text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio, inventore?
</p>
</div>
<h3 class="second-heading">
another heading
</h3>
<h3 class="third-heading">
another heading
</h3>
</body>
</html>
CSS:
/*
CSS VARIBLES AKA Custom Properties
hold a value and reuse it
--varName:var(--varName)
scope
:root{} === global
element === local
any property
*/
:root {
--primaryColor:red;
--secondColor:blue;
--mainTransition:all 0.4s linear;
}
.heading {
color: var(--primaryColor);
}
.second-heading {
color:var(--primaryColor);
transition:var(mainTransition);
}
.second-heading:hover {
color: var(--secondColor);
}
div {
--primaryRed:red;
}
.main-text {
color: var(--primaryRed);
}
.third-heading {
color: var(--primaryRed);
}
评论
发表评论