SASS Calc 函数以及 CSS|SCSS 中的示例

SASS是一个CSS语言的预处理程序，它是一个大型应用的高级css。它提供了计算函数来计算不同css单位的数学值。

本教程讲述了计算函数的使用实例

SASS中的计算函数

我们在CSS中已经有了计算函数，可以在浏览器中计算表达式，而SASS中的计算只在编译时进行。计算函数接受加、减、除和百分比的数值。数值是不同的单位，如10px、20%、1rem等。

语法:

calc(expression)

表达式被评估为px,em等单位。

sitewidth:900px;
 .container {
  width: calc($sitewidth-20px);
  margin-left: 10px;
  margin-right: 10px;
}

生成的css将是

.container {
  width: 880px;
  margin-left: 10px;
  margin-right: 10px;
}

如何在计算函数中使用sass变量

计算函数也可以包含使用的sass变量。sass变量可以在计算中使用带空格的插值语法。

这里使用的插值语法#{variablename}。

$padding: 10px;

div {
  padding-left: calc(#{$padding} + 10px);
  background: gray;
}

用像素计算百分比

有些时候，我们需要计算百分比和静态数字单位的加法。这将被生成为css计算函数，只在浏览器上计算百分比值。

由于sass在编译时运行，无法找到源值的百分比。

.header { 
    height: calc(10% + 10px); 
} 

生成的css是

.header { 
    height: calc(10% + 10px); 
} 

sass变量的百分比减去像素

sass变量可以保存百分比值，可用于计算函数减去像素值。

这里的计算函数接受百分比值和像素值，使用减号，它生成的css计算函数只在浏览器上运行:

$pageheight:20%;
.header {
    height: calc(#{$pageheight} - 5px);
}

编译的css:

.header{
height: calc(#{$pageheight} - 5px);
}