Sass 是一种 CSS 预处理器，为前端开发者提供了更加高效和便捷的编写 CSS 的方式。在编写网站或者应用程序的过程中，我们常常需要创建不规则形状来实现独特的设计效果。本文将介绍如何使用 Sass 来编写不规则形状的技巧。
Sass 语法基础
在学习 Sass 编写不规则形状之前，我们首先需要掌握 Sass 的基础语法。Sass 支持以下几个关键字：
Variables 变量
定义一个变量可以减少代码重复和提高可读性。在 Sass 中，变量定义以 $ 开头，如 $primary-color: #333; 。变量可以在选择器、属性和文件之间共享，可以通过整个 Sass 文件使用。
Nesting 嵌套
在 Sass 中，可以使用嵌套选择器部分来减少代码量。嵌套选择器部分使你可以将子选择器和后代选择器通过缩进来连接。如：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-
-- -
-------- -------------
- -
------ ---------------
---------------- -----
-
-
-Mixins 混合
混合是 Sass 中的一个很强大的功能，它是将一组属性集合作为一个单元来使用。混合是以 @mixin 开头的关键字，它定义了一个可以在样式表中重用的样式组。如：
-- -------------------- ---- ------- ------ ---------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - ---- - -------- -------------------- -
Extends 继承
继承是 Sass 中用来减少重复代码的一种方法，它允许一个选择器继承另一个选择器的所有属性。继承以 @extend 开头，后跟需要继承的选择器。如：
-- -------------------- ---- ------- ------ - ------- --- ----- ----- ----------------- ----- ------ ----- - -------- - ------- ------- ------------- ----- ----------------- ----- ------ ----- -
Operators 运算符
Sass 支持算术运算符 +、-、* 和 / 和其他高级运算符，如模块运算 %，以及颜色运算符等。
Sass 编写不规则形状
圆角矩形
设计中经常需要创建出圆角矩形。我们可以使用 border-radius 属性来实现它，但是如果需要设置各个角的半径不同或者使用不规则的角，就需要一些更高级的技巧了。
Sass 提供了 mixin 来方便创建圆角矩形，如下所示：
@mixin border-radius($radius-top-left, $radius-top-right, $radius-bottom-right, $radius-bottom-left) {
-webkit-border-radius: $radius-top-left $radius-top-right $radius-bottom-right $radius-bottom-left;
-moz-border-radius: $radius-top-left $radius-top-right $radius-bottom-right $radius-bottom-left;
border-radius: $radius-top-left $radius-top-right $radius-bottom-right $radius-bottom-left;
}使用 mixin 来制作圆角矩形：
.box {
@include border-radius(5px, 10px, 0, 20px);
}斜角矩形
有时候，我们需要创建的矩形有两个相邻边的斜角，如下所示：
Sass 提供了一个比较有用的函数 slope-angle()，可以帮我们计算两条线段之间的夹角。我们可以使用计算得出的角度和 transform: rotate()，来实现斜角矩形。
需要引入一个 Sass 扩展，如下所示：
@import 'compass/compass';
然后，使用如下代码编写斜角矩形：
-- -------------------- ---- -------
---- -
------- ------
------ ------
--------- ---------
--------- ------- -
-------- ---
--------- ---------
------ ------
------- ------
----------------- -----
-
-------- -
---- --
----- --
---------- ------------ ---------------
----------------- -- -----
-
------- -
---- --
------ --
---------- ----------- ---------------
----------------- ---- -----
-
-波浪形
下面，我们来看看如何使用 Sass 制作波浪形。
我们可以使用 clip-path 和 SVG 来创建波浪形，如下所示：
-- -------------------- ---- -------
----- -
------- ------
------ -----
----------------- -----
---------- -----------
-
---- ---------- ----------
------
--------- ----------
----- --------------------------------------------------------------------------------------------------------------------------------------------------------
-----------
-------
------其中，SVG 中的 path 可以通过网上在线工具制作得出，然后使用 Sass 的变量和 mixin 来拼接生成 clip-path。
椭圆形
如果想要创建一个椭圆形，可以使用圆形半径和 border-radius 属性来实现。但是如果要创建一个椭圆形的 border-radius，需要引入一些额外的代码：
@mixin border-radius-ellipse($width, $height) {
border-radius: ($width / 2) ($height / 2) ($width / 2) ($height / 2) / 50% 50% 50% 50%;
-webkit-border-radius: ($width / 2) ($height / 2) ($width / 2) ($height / 2) / 50% 50% 50% 50%;
-moz-border-radius: ($width / 2) ($height / 2) ($width / 2) ($height / 2) / 50% 50% 50% 50%;
}然后，创建椭圆形的代码如下所示：
.oval {
height: 150px;
width: 200px;
@include border-radius-ellipse(200px,150px);
background-color: gray;
}总结
本文主要介绍了 Sass 编写不规则形状的技巧，包括圆角矩形、斜角矩形、波浪形和椭圆形等等。掌握这些技巧可以让前端开发者更加高效地创建不同形状和设计效果的页面和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d49866b5eee0b525c2a30d