Ứng dụng Sass cơ bản vào dự án thực tế

Ứng dụng Sass cơ bản xây dựng một trang web thực tế có giao diện như hình dưới đây

Click vào ảnh để xem ảnh lớn

1. Thêm bootstrap css v5

Thêm bootstrap css v5 để reset css cho nhanh


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">

2. Thêm font Jura

Tải font tại: https://fonts.google.com/specimen/Jura

3. Cấu trúc thư mục

Tải ảnh tại: http://ouo.io/bNq4I1
Như vậy tổng kết toàn bộ cấu trúc thư mục sẽ như dưới này


Sass_P7/
|
├── css/
│   ├── style.scss
├── fonts/
│   ├── Jura-Bold.ttf
│   ├── Jura-Light.ttf
│   ├── Jura-Medium.ttf
│   ├── Jura-Regular.ttf
│   ├── Jura-SemiBold.ttf
├── images/
│   ├── bg.jpg
├── index.html

Các bạn lưu ý là file style.css mình chưa hề tạo mà dùng phần mềm Koala để biên dịch ra
Cách sử dụng phần mềm Koala các bạn tham khảo tại https://kentrung256.blogspot.com/2018/01/huong-dan-cai-dat-phan-mem-koala.html

4. Code file 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>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="wrapper">
    <div class="mask"></div>
    <div class="content">
      <h1 class="logo-text">Ocean</h1>
      <div class="big-text">We're Coming Soon</div>
      <div class="small-text">Stay tuned for something Amazing</div>
      <ul class="list-time">
        <li>
          <div class="time">02</div>
          <div>Days</div>
        </li>
        <li>
          <div class="time">12</div>
          <div>Hours</div>
        </li>
        <li>
          <div class="time">43</div>
          <div>Minutes</div>
        </li>
        <li>
          <div class="time">23</div>
          <div>Seconds</div>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

Giao diện trang web ban đầu sẽ như này

5. Code file style.scss

File style.scss


@font-face {
  font-family: JuraLight;
  src: url(../fonts/Jura-Light.ttf);
}
@font-face {
  font-family: JuraRegular;
  src: url(../fonts/Jura-Regular.ttf);
}
@font-face {
  font-family: JuraBold;
  src: url(../fonts/Jura-Bold.ttf);
}

$white: #fff;

body {
  font-size: 25px;
  color: $white;
  font-family: JuraRegular;
}
.wrapper {
  width: 100vw;
  height: 100vh;
  background: url(../images/bg.jpg)no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(233, 155, 75, 0.6);
  }
  .content {
    position: relative;
    z-index: 2;
    text-align: center;
  }
  .logo-text {
    font-size: 70px;
    font-family: JuraLight;
    margin-bottom: 80px;
  }
  .big-text {
    font-size: 65px;
    font-family: JuraBold;
  }
  .small-text {
    margin-bottom: 50px;
  }
  .list-time {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    li {
      margin: 0 20px;
      font-family: JuraLight;
      .time {
        background: #1c1e29;
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        border-radius: 50%;
        font-size: 60px;
        margin-bottom: 20px;
      }
    }
  } 
}

File khi đã build style.css


@font-face {
  font-family: JuraLight;
  src: url(../fonts/Jura-Light.ttf);
}
@font-face {
  font-family: JuraRegular;
  src: url(../fonts/Jura-Regular.ttf);
}
@font-face {
  font-family: JuraBold;
  src: url(../fonts/Jura-Bold.ttf);
}
body {
  font-size: 25px;
  color: #fff;
  font-family: JuraRegular;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  background: url(../images/bg.jpg) no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wrapper .mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(233, 155, 75, 0.6);
}
.wrapper .content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.wrapper .logo-text {
  font-size: 70px;
  font-family: JuraLight;
  margin-bottom: 80px;
}
.wrapper .big-text {
  font-size: 65px;
  font-family: JuraBold;
}
.wrapper .small-text {
  margin-bottom: 50px;
}
.wrapper .list-time {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}
.wrapper .list-time li {
  margin: 0 20px;
  font-family: JuraLight;
}
.wrapper .list-time li .time {
  background: #1c1e29;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 60px;
  margin-bottom: 20px;
}

/*# sourceMappingURL=style.css.map */