SassCSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins

CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 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>

sass部分:

$info:blue;
$error:green;

//声明函数 混入器
@mixin border-radius {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

@mixin h-ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    //嵌套
    li{
        list-style: none;
    }
}

//参数
@mixin border($w,$s,$c) {
    border: $w $s $c;
}


html{
    margin: 0;
}

@import "./common.scss";//导入的语法不用url 直接用双引号

body{
    button{
        color: $error;
        @include border-radius;//解决浏览器兼容性问题
        @include border(2px,solid,red);
    }

    ul{
        @include h-ul;
        @include border($w:2px,$s:dotted,$c:red);//命名参数 顺序可以打乱
    }

    //继承
    div{
        border: 1ps solid red;
    }

    span{
        @extend div;
        font-size: 20px
    }

}