CSS SASS calc() 计算表达式或使用变量

在CSS中，calc()函数允许你在值中使用算术运算。这非常有用，特别是当你需要基于其他值进行计算时。SASS也支持变量，这使得管理和维护样式更加容易。

以下是一些使用CSS calc() 和 SASS 变量的例子：

1. 使用 calc() 计算宽度：

.element {
  width: calc(100% - 20px);
}

在这个例子中，.element的宽度被设置为父元素宽度减去20px的结果。

2. 使用 SASS 变量来存储颜色值：

$color-primary: #333;
$color-secondary: #666;
 
.element {
  color: $color-primary;
  border-color: $color-secondary;
}

在这个例子中，我们定义了两个颜色变量$color-primary和$color-secondary，然后在.element类中使用这些变量来设置文本和边框的颜色。

3. 结合使用 calc() 和 SASS 变量：

$element-padding: 10px;
 
.element {
  padding: $element-padding;
  margin-bottom: calc(2em + #{$element-padding});
}

在这个例子中，.element的margin-bottom被设置为2em加上$element-padding变量的值。

注意：在使用SASS时，如果你想在calc()函数内部使用变量，你需要在变量前加上#{}，这样SASS就会将变量的值正确地插入到字符串中。