如何在 SASS 中使用 calc 函数

如何在 SASS 中使用 calc 函数

计算 CSS 属性值时，calc() 函数是一个十分实用的方法。如果你正在使用 SASS，你也可以像在 CSS 中一样使用 calc() 函数。

本文将详细介绍如何在 SASS 中使用 calc() 函数。如果你是一个 SASS 初学者，本文将会成为你 SASS 技能提升的最佳助手。

计算属性值

sass 中，我们可以使用数学运算符来计算属性值。例如：

height: 100% - 20px;

可以实现使元素高度减少20像素。当然，也可以使用变量执行计算：

$nav-height: 60px;
$nav-item-height: calc(100% / 3 - #{$nav-height});

.nav-item {
    height: $nav-item-height;
}

这里我们定义了变量 $nav-height，并使用 calc() 函数通过计算让 .nav-item 的高度为除去 $nav-height 后可用空间的三分之一。

变量和运算符之间的空格是可选的，但最好加上，以提高代码可读性。

使用函数

如果你想要执行更复杂的计算，或者要嵌套两个或更多的值，请使用 calc() 函数。Sass 中，可以使用以下实现：

width: calc( ( 100% - #{ $sidebar-width } ) / #{ $main-section-column-count } - #{ $gutter-width } );

这个例子使用了 #{} 插值语法将变量插入到字符串中。

对于非插值字符串，您可以使用 unquote() 函数删除引号。例如，如果你想引用一个类似 "100%/3-20px" 的字符串，使用 unquote() 函数去除引号，并包含在 calc() 函数中：

width: calc( #{ unquote("100%/3-20px") } );

函数测验

到目前为止，我们看到了如何在 SASS 中使用 calc() 函数。让我们通过以下示例来巩固所学内容。

HTML：

// javascriptcn.com 代码示例
<div class="sidebar">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>
<div class="main">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-8">
                <article>
                    <h2>Title</h2>
                    <p>Content</p>
                </article>
            </div>
            <div class="col-12 col-md-4">
                <aside>
                    <h3>Sidebar Title</h3>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </aside>
            </div>
        </div>
    </div>
</div>

SCSS：

// javascriptcn.com 代码示例
$nav-height: 60px;
$gutter-width: 20px;
$sidebar-width: 250px;

.sidebar {
  width: $sidebar-width;
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      margin-bottom: 10px;
      a {
        color: #333;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.main {
  .container {
    .row {
      .col-12 {
        width: 100%;
      }

      .col-md-8 {
        width: calc( ( 100% - #{ $sidebar-width } ) - #{ $gutter-width } );
      }

      .col-md-4 {
        width: calc( #{ $sidebar-width } );
        aside {
          height: calc( 100vh - #{ $nav-height } );
          ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            li {
              margin-bottom: 10px;
              a {
                color: #333;
                text-decoration: none;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
    }
  }
}

本例使用 Bootstrap 的网格系统，注意 SASS 计算形式的使用，特别是对于类似 col-md-8 的元素。

总结

在 SASS 中使用 calc() 函数可以让我们更容易地维护及更新元素的样式，并使代码更易于理解和修改。

在本文中，我们分享了如何在 SASS 中使用 calc() 函数。我们希望这篇文章能够帮助您掌握 SASS 技能，提高前端开发的效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6533622e7d4982a6eb6e89e1