B.8. Variable

B.8.1. Pengertian Variable

Variabel CSS adalah cara untuk menyimpan nilai yang dapat digunakan kembali di seluruh stylesheet. Variabel ini membantu membuat kode CSS lebih terstruktur, mudah dibaca, dan mudah diubah.

Variabel CSS dimulai dengan tanda -- (dua tanda minus) dan biasanya didefinisikan di dalam selector :root agar berlaku secara global.

B.8.2. Benefit Menggunakan Variable

Lantas apa sih manfaat menggunakan variable ini? Contohnya, kita akan memiliki halaman website sederhana dengan base color atau warna utama hijau:

index.html

      <navbar class="navbar">
  <h1 class="nav-logo">Logo</h1>
  <ul class="nav-menu">
    <li class="nav-item"><a href="#">Menu 1</a></li>
    <li class="nav-item"><a href="#">Menu 2</a></li>
    <li class="nav-item"><a href="#">Menu 3</a></li>
    <li class="nav-item"><a href="#">Menu 4</a></li>
  </ul>
</navbar>

<!-- Hero section -->
<section id="hero" class="jumbotron">
  <h1 class="jumbotron-title">Welcome to My Website</h1>
  <h4 class="jumbotron-subtitle">Look at everything I've built.</h4>
  <div class="jumbotron-actions">
    <button class="get-started button">Get started</button>
    <a href="#" class="follow-link button">Follow my instagram</a>
  </div>
</section>

style.css

      * {
  margin: 0;
  font-family: "Source Code Pro", sans-serif;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2.5rem;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.nav-logo {
color: blueviolet;
}

.nav-menu {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 2rem;
}

.nav-item {
list-style: none;
}

.nav-item a {
text-decoration: none;
color: black;
}

.nav-item a:hover {
color: blueviolet;
}

.jumbotron {
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 1.5rem;
}

.jumbotron-title {
font-size: 48pt;
color: blueviolet;
}

.jumbotron-subtitle {
font-size: 24pt;
color: rgba(0, 0, 0, 0.7);
}

.jumbotron-actions {
display: flex;
align-items: center;
}

.button {
width: fit-content;
padding: 0.75rem 1.5rem;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: 600;
}

.get-started {
background-color: blueviolet;
color: white;
}

.follow-link {
text-decoration: none;
color: blueviolet;
}

---

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.5-box-model

Mmm apakah halaman ini membantu🤔?

Ayo share tentang pengalaman belajarmu!