Post by account_disabled on Jan 28, 2024 7:12:52 GMT
这是最初发表于 2014 年 11 月 11 日的文章的更新版本。 Sass 有许多内置函数可以帮助您更快、更轻松地设置项目的样式。 让我们深入研究其中的一些！ Sass 函数变暗和变亮 可能是这个列表中最著名的两个函数，我将它们算作一个，因为它们做同样的事情，但方向不同。 Learn to Code with JavaScript 顾名思义，darken和lighten会分别使颜色变暗和变亮一定的百分比。您可以在按钮的悬停状态或整个网站上使用它们来创建层次结构。就是这样：这两个函数中的第二个参数采用百分比值，通过该百分比值使颜色变暗/变亮。这样，每次您想要一个简单的交互状态时，您就不必查找十六进制来查找稍浅的颜色。例如，您可以这样做： 编译成这样： 使用这些函数意味着您可以创建一个有效的调色板，该调色板可以在整个项目中保持一致。例如，如果您有基于主要品牌颜色的突出显示和非活动状态颜色，并且您的客户决定在开发过程中更改其主要颜色（这种情况发生的次数比我愿意承认的要多……），您只需更改一个值并看到它级联到网站的其余部分。
不透明化和透明化 Sass 函数 仍然坚持使用颜色，opacify并transparentize分别使颜色或多或少不透明。 就我个人而言，我发现这些在使用模式和其他弹出窗口时很有帮助，您可能希望背景内容淡出。 darken与和不同lighten，这两个函数中的第二个参数 WhatsApp 号码数据 需要是 0 到 1 之间的小数而不是百分比。这些功能对于基于渗透到整个项目的单一主要品牌颜色的颜色很有帮助。再说一遍，通过包含这些函数，您可以单独更改主颜色，并且它会相应地传播。 opacify您可以使用通过和获得的值，transparentize如下所示： 它将编译成这样您还可以使用fade-in和fade-out创建与这些相同的效果，因为它们是opacify和 的别名transparentize。 Sass 补集函数 顾名思义，complement将返回输入其中的任何颜色的补色。如果您尝试在页面或视图上创建号召性用语并且需要一些视觉对比，这尤其有用。使用此内置功能可以减少在色轮上查找颜色的需要。函数 Sass 的数字函数可帮助您创建自己的函数和循环。
percentage例如，该函数将任何数字转换为百分比，如下所示：该percentage函数甚至不关心您是否将像 px 这样的单位推到值上。这使得它成为轻松排版或响应式价值转换的候选者，其中百分比为王。多好的一个人啊！ If Sass 函数 Sass 能够使用 编写普通的 if 语句。它在复制传统编程语言中的功能以创建一些奇妙的条件逻辑方面做得很好。 Sass 还提供了一个内联if函数，其工作方式与许多其他编程语言中的三元运算符非常相似：该函数接受三个参数，第一个是要检查的条件，第二个是条件为 true 时的输出，第三个是条件为 false 时的输出。 如果您想在样式表中创建依赖于变量的条件（例如，如果文章元素的宽度大于旁注元素），则可以使用此三元函数，尽管此函数的可能性更开放一些 -结束了。 就我个人而言，我发现if在响应式项目中更有用。您可以使用此函数来更改基于其他不相关变量的属性（例如font-size元素的属性取决于width其容器的属性），甚至让属性依赖于在不同屏幕尺寸或显示下更改的变量（例如更改某个元素的背景图像）视网膜屏幕的元素）。
不透明化和透明化 Sass 函数 仍然坚持使用颜色，opacify并transparentize分别使颜色或多或少不透明。 就我个人而言，我发现这些在使用模式和其他弹出窗口时很有帮助，您可能希望背景内容淡出。 darken与和不同lighten，这两个函数中的第二个参数 WhatsApp 号码数据 需要是 0 到 1 之间的小数而不是百分比。这些功能对于基于渗透到整个项目的单一主要品牌颜色的颜色很有帮助。再说一遍，通过包含这些函数，您可以单独更改主颜色，并且它会相应地传播。 opacify您可以使用通过和获得的值，transparentize如下所示： 它将编译成这样您还可以使用fade-in和fade-out创建与这些相同的效果，因为它们是opacify和 的别名transparentize。 Sass 补集函数 顾名思义，complement将返回输入其中的任何颜色的补色。如果您尝试在页面或视图上创建号召性用语并且需要一些视觉对比，这尤其有用。使用此内置功能可以减少在色轮上查找颜色的需要。函数 Sass 的数字函数可帮助您创建自己的函数和循环。
percentage例如，该函数将任何数字转换为百分比，如下所示：该percentage函数甚至不关心您是否将像 px 这样的单位推到值上。这使得它成为轻松排版或响应式价值转换的候选者，其中百分比为王。多好的一个人啊！ If Sass 函数 Sass 能够使用 编写普通的 if 语句。它在复制传统编程语言中的功能以创建一些奇妙的条件逻辑方面做得很好。 Sass 还提供了一个内联if函数，其工作方式与许多其他编程语言中的三元运算符非常相似：该函数接受三个参数，第一个是要检查的条件，第二个是条件为 true 时的输出，第三个是条件为 false 时的输出。 如果您想在样式表中创建依赖于变量的条件（例如，如果文章元素的宽度大于旁注元素），则可以使用此三元函数，尽管此函数的可能性更开放一些 -结束了。 就我个人而言，我发现if在响应式项目中更有用。您可以使用此函数来更改基于其他不相关变量的属性（例如font-size元素的属性取决于width其容器的属性），甚至让属性依赖于在不同屏幕尺寸或显示下更改的变量（例如更改某个元素的背景图像）视网膜屏幕的元素）。
