sass 

<!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 rel="stylesheet" href="./css/sass.min.css">
</head>
<body>
    <button>按钮</button>
    <a href="#">超链接</a>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
</html>

　　css样式

html{margin:0}body button{color:pink;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border:2px solid red}body
 a{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}body ul{display:flex;justify-content:space-between;
align-items:center;border:2px dotted red}body ul
 li{list-style:none}body div,body span{border:1px solid red;background-color:red}
body span{font-size:20px;background-color:transparent}

　　scss

@import "./common.scss";//导入的语法

body{
    button{
        color: $error;
        @include border-rad;
        @include border(2px,solid,red);
    }
    a{
        @include border-rad;
    }
    ul{
        @include h-ul;
        // $s:dotted 虚线
        @include border($w:2px,$s:dotted,$c:red);
    }
// 继承
    div{
        border: 1px solid red;
        background-color: red;
    }
    // 继承div的样式
    span{
        @extend div;
        font-size: 20px;
        background-color: transparent;
    }
}

　　

posted @ 2021-12-10 12:02  与神明画过押  阅读(42)  评论(0)    收藏  举报