Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它使用一种更简洁、更易于维护的语法来编写CSS样式。以下是Sass常用语法：
1. 变量：Sass支持定义变量，可以使用$符号声明变量，并在样式中使用它们。例如：
scss复制代码border radius什么意思
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100%$font-stack;
color: $primary-color;
}
2. 嵌套：Sass允许嵌套选择器，使样式更易于组织和阅读。例如：
scss复制代码
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px12px;
text-decoration: none;
}
}
3. 混合宏：混合宏是一种可重用的代码块，可以在样式中多次调用。例如：
scss复制代码
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
4. 继承：Sass支持选择器继承，可以减少重复的代码。例如：
scss复制代码
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
5. 运算：Sass支持基本的数学运算，例如加法、减法、乘法和除法。例如：
scss复制代码.container { width: (200px + 20px); }
6. 颜函数：Sass提供了一些内置的颜函数，例如lighten()、darken()、saturate()和desaturate()等。例如：
scss复制代码
$primary-color: #333;
$light-color: lighten($primary-color, 20%);
$dark-color: darken($primary-color, 10%);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。