前端Sass语法学习及Demo练习

前言

在接下来的日子要学习前端知识体系，2023继续保持知识拓展。
请教了公司前辈，学习前端要循序渐进，先学Sass基础 Sass 教程

学习Sass之前要有以下的基础

HTML 教程 HTML 教程
CSS 教程 CSS 教程

学习完Sass自己跟着练习了一个登录页面
实现效果如下

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">
    <!-- 加载的 -->
    <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代码

 $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;

                 }
             }
         }
     }
 }

总结

跟着视频学习，其实很简单，主要就是很多语法要记住是干什么用的
多写多练自然就形成知识记在脑子里了。
所以不能只看，还要动手练习，一起加油吧~

前端Sass语法学习及Demo练习

前言

Html代码

Sass代码

总结

猜你喜欢