sass 相关问题

:host::ng-deep .class 和 .class :host::ng-deep 之间的区别？

scss中下面两个有什么区别， 在代码片段中举一些例子。 :host::ng-deep .content-body { ... } 和 .content-body :host::ng-deep { ... }

旧版 JS API 已弃用，并将在 Dart Sass 2.0.0 中删除。与 Vue2

我意识到之前已经有人就这个警告提出过类似的问题，但是所提出的解决方案都没有为我解决这个问题，或者适用于我的场景。 我最近升级了...

Angular 2 Material 主题指的是 SCSS 中的颜色

我已经根据官方指南创建了一个自定义主题。 @import '../node_modules/@angular/material/core/theming/_all-theme'; @include mat-core(); $primary: mat-palette($mat-teal); $accent: 垫板...

在scss中使用@for循环

我需要在 SCSS 中创建一个“@for”循环，从 1 循环到 100，并相应地将数字添加到类中。我有一个类“width-percentage-x”，x 应该是与 i 相对应的数字...

如何覆盖“最小错误”主题的主题默认值

我正在使用 Minimal Mistakes Jekyll 主题开发一个托管在 GitHub 页面上的网站。我正在做一些基本的定制 - 仍在努力学习 - 所以我从练习一些开始

npm node-sass 和 npm sass 之间有什么区别

我刚刚知道我应该在 sass 中使用 @use 而不是 @import 。但据我了解，我应该使用 npm sass 而不是 npm node-sass 来做到这一点。这两者有什么区别？为什么@use 和@

当我在 dart-sass 中使用 mix() 时，输出是 rgb() 而不是 HEX(#)

我在 Mac 上使用 [email protected] 、 [email protected] 。 gulp任务如下。 从 'gulp' 导入 { src, dest, series, watch }; 从'sass'导入*作为dartSass； 从 'gulp-sass' 导入 gulpSass； 常量...

离子控制控制器模态高度

我正在使用像这样启动的控制器弹出窗口 异步 openNwInsights(){ const modal = 等待 this.modalCtl.create({ 组件：ExplainNetworthComponent }) 模态.present(); ...

基于背景的边框颜色

我经常在 SASS 风格中利用变暗和变亮的优势。我目前正在编写一个具有边框的类，但将依赖于另一个类的背景颜色。我想做的事...

有没有一种方法既可以通过 URL 加载 SVG 图像，又可以用 CSS 颜色变量填充它？

我正在构建一个编辑器，用户可以在其中从我们的 CDN 选择 SVG，并选择其填充颜色。在前端，我希望能够以用户选择的颜色渲染这些 SVG，但这

sass mixin 将参数作为 css 变量传递

我有一个 mixin 来生成一些网格类，如下所示： @mixin 网格列($columns) { @for $i 从 1 到 $columns { .grid-col-#{$i} { 网格列：跨度#{$i}； } } } 我也

Htmx-指标和 Bulma css

Bulma css 本身提供了一个 is-loading 类，该类在应用该类时显示一个旋转图标。 https://bulma.io/documentation/elements/button/ Htmx提供了一个指示符属性——https:/...

如何解决 Angular Material 侧边栏的滚动问题

我的预期结果： 在桌面上时，屏幕左侧有一个“固定”侧边栏，它占据全屏高度，宽度为 226 像素。 在移动设备上应该有一个可用的工具栏...

Firefox 和基于 Chromium 的浏览器的布局完全不同

我正在为一个学校项目开发一个网站，我注意到我在基于 chromium 的浏览器中创建和测试的布局在 Firefox 中查看时完全被破坏了。 该项目本身是用

使用 Angular Material 进行 Sass 迁移

我在 Angular Material 中有一个具有许多定义的全局样式表。我使用 SASS 操作符中的 @import 。根据文档，我应该迁移导入，因为它们已被弃用 -

如何正确链接rails应用程序中使用的dartsass-rails编译的库中的资源文件

我目前正在使用 dartsass-rails 库在我的 Rails 应用程序中编译 scss 文件。在库中，我尝试使用 @font-face 和本地字体文件创建一个自定义字体系列； @font-f...

如何解决“SASS：弃用旧版 JS API”警告？

我有一个使用 T3 Stack（Next JS / Vercel / 等）构建的项目。 和我们许多人一样，我现在收到了 Dart Sass 2.0.0 上 SASS 弃用的警告。 看到很多人推荐

SCSS 中 :where(:root) 是什么意思

我有一个示例代码：where(:root) ：哪里（：根）{ //代码 } 我知道 :root，但不知道 :where()。 我在谷歌上找不到任何东西。它实际上有什么作用？

我怎样才能使::ng-deep仅适用于一个组件

<igx-dialog igxOverlayOutlet #variantDialog class="variant-dialog"> <div class="dialog-content"> <div class="variant-options"> <div class="variant-card"> <img src="assets/images/variants/color_variant.png" alt="Color Variant" class="variant-image"> <p class="variant-text">COLOR VARIANT</p> </div> <div class="variant-card"> <img src="assets/images/variants/style_variant.png" alt="Style Variant" class="variant-image"> <p class="variant-text">STYLE VARIANT</p> </div> </div> </div> </igx-dialog> SASS 文件 .dialog-content display: flex justify-content: center align-items: center width: 55vw height: 55vh .variant-options display: flex gap: 1rem .variant-card text-align: center padding: 1rem width: 100% height: 100% position: relative background-color: transparent .variant-image max-width: 600px max-height: 600px border-radius: 15px .variant-text font-size: 4rem line-height: normal font-weight: bold position: absolute top: 30% left: 5% color: #3A3A3A ::ng-deep .variant-dialog .igx-dialog__window background: transparent ! important box-shadow: none ! important ::ng-deep .variant-dialog .igx-dialog__window 根本不影响 css， 但 ::ng-deep .igx-dialog__window 会影响它。 还尝试使用 :host 但没有解决问题。 主持人 对于 Host 来说，“未知的 CSS 属性‘host’”设置 :host 不再发出警告，而对于 underneeth 主机来说，它说“非法嵌套：只有属性可以嵌套在属性下面” 所以这里的问题是如何在不影响其他 igx-dialogs 的情况下封装它。 :host 标签将确保对话框样式仅应用于组件的子组件，因此 CSS 的作用域仅适用于该组件。 ::ng-deep确保样式到达动态创建的对话框元素。 :host ::ng-deep .igx-dialog__window { background: transparent !important; box-shadow: none !important; } Stackblitz 演示 如果您在同一个组件上使用多个对话框，那么您可以使用下面的 SCSS，我们首先向对话框添加 id，以便它是唯一的并且可以设置样式。 <igx-dialog #dialog1 message="This will create a new social media account." id="custom-dialog-to-style" > 然后，我们使用此 ID 以及 ::ng-deep 和 :host 使其应用于此元素，然后使用 #custom-dialog-to-style 来定位特定对话框。我们可以使用 CSS Next-sibling (+) Combinator (+) 来获取下一个同级，即模态，然后我们向其添加样式。 :host ::ng-deep #custom-dialog-to-style ~ div.igx-overlay__wrapper--modal .igx-dialog__window { background: transparent !important; box-shadow: none !important; } Stackblitz 演示 最后你的 HTML 可能不正确，因为 igxOverlayOutlet 应该是 igx-dialog 的父元素，我可能是错的，但请使用 stackblitz 作为代码参考。 <div igxOverlayOutlet class="variant-dialog"> <button igxButton="contained" igxRipple="white" (click)="openDialog()"> Show Styled Dialog </button> <igx-dialog #dialog1 message="This will create a new social media account." id="custom-dialog-to-style" > <igx-dialog-title> <div class="dialog-container"> <igx-icon>account_box</igx-icon> <div class="dialog-title">Create a new account?</div> </div> </igx-dialog-title> <div igxDialogActions class="dialog-container dialog-actions"> <button igxButton="contained" igxRipple="white" (click)="dialog.close()"> CREATE </button> <button igxButton="contained" igxRipple="white" (click)="dialog.close()"> CANCEL </button> </div> </igx-dialog> </div>

SCSS 设计系统中的主题

我正在 SCSS 中开发设计系统，并努力设置主题。 到目前为止，我在这个平台上的一个答案的帮助下取得了很多成就，但需要一些进一步的帮助。 我创建了一个 mixin ...