Front-end Sass grammar learning and demo exercises

foreword

In the next days, we will learn the front-end knowledge system, and continue to expand knowledge in 2023.
I asked the seniors of the company to learn the front-end step by step, first learn the Sass basic Sass tutorial

Before learning Sass, you must have the following foundations

HTML tutorial HTML tutorial
CSS Tutorial CSS Tutorial

After learning Sass, I practiced a login page by myself.
The effect is as follows

Html code

<!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>登录</title>
</head>

<body>
    <div class="card">
        <h3>登录之后更加精彩</h3>
        <form>
            <input type="email" id="email" name="email" placeholder="邮箱">
            <input type="password" id="password" name="password" placeholder="密码">
            <input type="submit" value="登录">           
        </form>
        <ul>
            <li><a href="#">注册</a></li>
            <li><a href="#">忘记密码</a></li>
        </ul>
    </div>
</body>

</html>

Sass code

 $main-color: #2ecc71;
 $second-color: #27ae60;
 $line-color: #ddd;
 $dark-color: #333;

 * {
    
    
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
    
    
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     min-height: 100vh;
     background: url(../img/bg.png) no-repeat center center/cover;

     &::after {
    
    
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: -1;
         background: $main-color;
         opacity: 0.5;
     }

     .card {
    
    
         width: 400px;
         padding: 2rem 3rem;
         background: #fff;

         h3 {
    
    
             color: $second-color;
             margin-bottom: 1rem;
             font-weight: 400;
         }

         form input {
    
    
             display: block;
             width: 100%;
             padding: 0.5rem;
             margin-bottom: 1rem;
             border: 1px solid $line-color;

             &:last-child {
    
    
                 background: $second-color;
                 color: #fff;
                 transition: all 0.5s;

                 &:hover {
    
    
                     background: $main-color;
                 }
             }

             &:focus {
    
    
                 outline: 1px solid $main-color;
             }
         }

         ul {
    
    
             list-style: none;
             display: flex;
             justify-content: space-between;
             font-size: 0.9rem;

             li a {
    
    
                 color: $dark-color;
                 text-decoration: none;
                 border-bottom: 1px solid transparent;
                 transition: all 0.5s;

                 &:hover {
    
    
                     color: $main-color;
                     border-bottom: 1px solid $main-color;

                 }
             }
         }
     }
 }

Summarize

Learning from videos is actually very simple. The main thing is that you have to remember what a lot of grammar is for.
Writing more and practicing more will naturally form knowledge and keep it in your mind.
So you can't just watch, but also practice, let's work together~