sass 相关问题

Sass（Syntactically Awesome Style Sheets）是CSS的扩展，添加了嵌套规则，变量，mixins和类扩展等功能。这使开发人员能够编写结构化，可管理且可重用的CSS。 Sass被编译成标准CSS。

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

css angular ionic-framework sass modal-dialog

回答 1 投票 0

基于背景的边框颜色

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

html css sass background-color

回答 4 投票 0

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

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

css svg sass

回答 2 投票 0

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

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

css sass

回答 2 投票 0

Htmx-指标和 Bulma css

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

html css sass bulma htmx

回答 1 投票 0

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

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

css angular sass angular-material

回答 1 投票 0

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

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

html firefox sass layout chromium

回答 1 投票 0

使用 Angular Material 进行 Sass 迁移

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

sass angular-material

回答 1 投票 0

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

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

ruby-on-rails sass dart-sass

回答 1 投票 0

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

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

sass deprecated dart-sass

回答 1 投票 0

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

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

sass

回答 2 投票 0

我怎样才能使::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>

html css angular sass ng-deep

回答 1 投票 0

SCSS 设计系统中的主题

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

css sass scss-mixins

回答 1 投票 0

焦点-可见轮廓被父母截断overflow-x: auto;

我有一个可在 x 轴上滚动的按钮容器，并且具有焦点可见样式以实现可访问性，显示溢出容器并因此被切断的轮廓。 ...

css sass

回答 1 投票 0

Scss 在多 UI 主题场景中使用 @use 和 @forward 而不是 @import

我试图弄清楚如何在多主题场景中管理从 @import 到 @use/@forward 指令的迁移。我有多组变量目录，每个变量代表一个 UI 主题....