scss中!default和mix函数的使用

最新推荐文章于 2024-09-22 21:44:08 发布

lznism666

最新推荐文章于 2024-09-22 21:44:08 发布

阅读量3.9k

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/lznism666/article/details/108223383

版权

前端专栏收录该内容

32 篇文章

订阅专栏

本文深入探讨了SCSS中的变量默认值(!default)及其应用场景，特别是在UI组件库中的作用。同时，详细介绍了mix函数如何混合两种颜色，并解释了其在UI设计中的实用性。通过具体示例，读者可以了解如何在实际项目中有效利用这些特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. !default

该标记也是用于表示SCSS变量的默认值，在UI组件库中使用广泛。其用法如下：

$primary: #ddd !default;

如果没有给$primary变量赋值，那就采用#ddd的默认值

$primary: #ccc;
$primary: #ddd !default;

如果$primary已经赋值了，那就不会采用#ddd这个默认值，而是采用#ccc这个值。

2. mix函数

该函数用于将两种颜色混合在一起，在UI组件库中使用比较广泛

mix($color1, $color2, $weight)

其中$weight是一个可选参数，如果不传入，则默认两种颜色按照各50%混合。如果传入了，表示$color1的比例为$weight，$color2的比例为1-$weight

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lznism666

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css之sass混合函数方法

前端工程师--则丸

10-29

2063

// 引入scss变量文件 @import "./variable.scss"; /*=================================================================== 变量前缀为$ ,方法前缀为_ ====================================================================...

Sass系统学习

Kate_sicheng的博客

06-23

2733

一、变量二、嵌套三、父选择器 & 父选择器 & 是 Sass 发明的一种特殊选择器，在嵌套选择器中用于引用外部选择器。它可以以更复杂的方式来复用外部选择器。四、插值 #{表达式} 用来输出或计算一个表达式的内容。字符串与变量的拼接使用。常用于在写mixins时根据传入的参数创建选择器。五、函数 @function 和 @return 和结合，用于定义可在 SassScript 表达式中使用的自定义函数，函数最后通过@......

参与评论您还未登录，请先登录后发表或查看评论

scss-mixins-collection：方便的scss mixins的集合

02-05

SCSS-MIXINS-COLLECTION 方便的scss mixins的集合。安装您可以通过npm安装它： npm install --save-dev scss-mixins-collection 或者，如果愿意，可以通过Bower： bower install scss-mixins-collection 然后只需@import '[node_modules || bower_components]/scss-mixins-collection/_index.scss' @import '[node_modules || bower_components]/scss-mix

scss中的mix函数

youhebuke225的博客

09-04

1036

函数还可以用于带有透明度的颜色，这时候第三个参数就显得尤为重要，因为它不仅影响颜色的比例，还会影响最终颜色的透明度。在这个例子中，红色颜色定义为半透明（50% 不透明度），所以混合后的颜色也会带有一定的透明度。函数用于混合两种颜色，并返回一种新的颜色。该函数可以根据给定的比例将两种颜色混合在一起。在这个例子中，通过将红色的比例设置为 70%，我们可以得到一个更偏向于红色的混合颜色。

Sass-Mix()函数

MichaelAn的博客

02-13

1057

Sass-Mix()函数 sass 基本功能和使用参考 https://www.runoob.com/sass/sass-tutorial.html 问题提出在项目中需要自定义一套主题色，那么相关的组件都需要对应的主题色。目前项目使用的是 reactstrap，默认的颜色是 primary, secondary, ...

常用scss函数基本使用及操作（mixin）

霸霸的博客

09-22

3123

scss自出来之后，广受欢迎，如何能快速写出想要的css呢，可自定义一些scss方法，本人罗列了一些最近用到的scss函数，其实包括文本超出范围的格式化、弹性盒子居中、左浮动、右浮动、iPhone适配、细边框、图标、背景、伪类样式改变等。在scss中除了可以定义变量，具有@extend和@mixins等特性之外，还自备了一系列的函数功能。

scss-!default默认变量

banchousuo6747的博客

10-25

503

　　在变量赋值之前，利用!default为变量指定默认值。　　也就是说，如果在此之前变量已经赋值，那就不使用默认值，如果没有赋值，则使用默认值。　　代码实例如下: $content: "antzone" !default; #main { content: $content; } 　　编译为css代码如下: #main { content: "...

Deprecation Warning on line 30, column 20 of file:///D:/work/tefron/jhipsterSampleApplication/src/main/webapp/content/scss/global.scss:30:20: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0. Use color.mix instead. More info and automated migrator: https://sass-lang.com/d/import 30 | background-color: mix($dropdown-link-hover-bg, $dropdown-link-active-bg, 50%);

热门推荐

王二红

09-23

1万+

基本使用如果分配给变量的值后面添加了 !default 标志，这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值。如果在此之前变量已经赋值，那就不使用默认值，如果没有赋值，则使用默认值。如果变量之前没有赋值，则使用默认值： /* 如果之前没有赋值,则使用默认值 */ $const: "hello" !default; div{ co...

css预处理器scss中!default的用法解析

friend_ship的博客

12-06

3124

scss文件： $content: "first"; $content: "second" !default; $new_content: "new content" !default; #app { content: $content; font-family: $new_content; } 编译结果为： #app { content: "first"; font-family: "new content"; } 注意：变量是null空值时将视为未被!defa

SCSS 混合宏（Mixins）

疯狂假前端的博客

09-22

610

使用@mixin在这个例子中，我们定义了一个box-shadow混合宏，可以接收四个参数，分别表示水平偏移、垂直偏移、模糊半径和颜色。混合宏（Mixins）在 SCSS 中提供了强大的可重用性和灵活性，可以通过参数化样式，减少代码重复和提高可维护性。

Scss学习--定义变量!default、!global、!optional

hide_in_darkness的博客

07-23

2262

!default 如果变量已经被赋值，不会再被重新赋值但是如果变量还没有被赋值，则会被赋予新的值。 $content:"First blood"; $content:"Double kill" !default; p{ content:"#{$content}"; } >>>P{ content:'First blood'; } $contents:"Double kill" !default; p{ content:"#{$contents}"; } >&

Scss系列之--lighten & darken vs scale-color vs mix()

weixin_34144450的博客

05-15

2796

lighten & darken vs scale-color vs mix() 这几个函数都是跟颜色有关，来调节颜色的明暗程度。但是我们真的理解他们的作用原理么？ 1.lighten & darken：它们的工作原理是将颜色转换成hsl格式，我们知道l代表的是明暗程度，假如我们有一个颜色#036，转成HSL是hsl(210,100,21)。我们看到hsl中的l也就是亮度只有2...

Sass:RGB颜色函数-Mix()函数

weixin_34112900的博客

06-02

1467

Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。其使用语法如下： mix($color-1,$color-2,$weight); $color-1 和 $color-2指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。 $weight为合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明...

SCSS 文件里的感叹号用法 - 给变量设置默认值

2007 年 ~ 2025 年，深耕 SAP 技术 18 年

09-27

668

如下图所示： $useTabsOnPDP: false !default; https://stackoverflow.com/questions/10643107/what-does-default-in-a-css-property-value-mean 含义如下： !default 在 Bootstrap Sass 中经常使用。它类似于反向 !important。所有 Bootstrap 变量都使用 !default 设置，以允许开发人员进一步自定义引导程序。使用 !default sass

SCSS混合器的基础用法、继承，常见函数的基本使用

m0_61902288的博客

07-25

1114

当你的代码中需要用到大段大段重用样式代码的时候，可以通过SCSS的混合器实现大段样式的重用。混合器使用@mixin定义。

scss 中！deafault作用与用法

07-23

下面是一个示例，展示了在 SCSS 中使用 `default` 的用法： ```scss $color: default; // 设置变量 $color 的默认值为 null .element { background-color: $color; // 使用 $color 变量 } ``` 在上面的例子中，...