sass 相关问题

在已居中的容器上方制作文本框

我正在尝试制作一个内容丰富的文本框，我觉得答案应该非常简单，但我忽略了一些东西。经过几次尝试并检查了强大的 GPT，我来到这里寻求建议。

使用带有点亮自定义元素的scss？

只是想知道 rollup-plugin-scss-lit 是否仍然是使用带有 lit 自定义 html 元素的 scss 文件的最佳方式。我最后看到的是 2022 年左右的 SO 帖子，搜索时在点亮的网站上没有任何内容......

Storybook 和 sass 文件导入不起作用

所以我有一个带有 vue 3 + Storybook 项目的小型 vue cli。 当我开始收到有关样式的错误时，我开始为我的组件添加故事。我去了 Storybook 官方文档并

从我的 scss 文件中使用 Bootstrap 的实用 API

Bootstrap 文档解释了如何启用负边距 - 但这是针对自定义 Bootstrap 的情况。 我从 CDN 使用它，但我仍然想要这些类（例如 mt-n1）。我愿意

带对角线分隔符的图像滑块

我制作了一个包含 5 个图像的滑块容器，用于预览下一个和上一个图像。我唯一的问题是我需要使图像由对角线而不是水平线分隔

限制影响 DIV 或容器内部的 CSS 文件

我正在一个大型应用程序中工作。开发很久以前就开始了。该应用程序中有大约 500 多个 HTML 页面。现在计划重新设计每个页面。请找到下面的 CSS 层次结构。 | |-

将垫子图标移动到扩展面板标题标题的左侧？

我稍微更改了 Angular Material 文档扩展面板手风琴演示，以便将帐户圆圈图标移动到标题左侧，如下所示： 我稍微更改了 Angular Material 文档扩展面板手风琴演示，以便将帐户圆圈图标移动到标题左侧，如下所示： <mat-expansion-panel-header> <mat-icon>account_circle</mat-icon> <mat-panel-title> Personal data </mat-panel-title> </mat-expansion-panel-header> 但是它仍然出现在右侧。 我们如何将图标移动到标题左侧，同时将 CSS 保留在声明组件内？ 使用 order更改图标和标题的顺序。 mat-panel-title { order: 1; } mat-icon { order: 0; margin-right: 1rem; } 在 mat-panel-title 中添加图标 <mat-panel-title> <mat-icon>account_circle</mat-icon> Personal data </mat-panel-title> 这对我有用。 剩下的唯一问题是图标和文本之间的间距。添加<div>&nbsp;</div>解决了这个问题

无法覆盖 Bootstrap 5 实用程序

我的SCSS结构： 主要.scss： @import '~bootstrap/scss/functions'; @import '主题/变量'; @import '~bootstrap/scss/bootstrap'; @import '主题/主题'; 主题.scss： ... @import“实用程序&qu...

使用 Bootstrap 5 Utility API 添加实用程序

我将实用程序地图合并代码移动到了文件中我能想到的每个地方，但它仍然不起作用。尝试将引导导入放在最后，因为人们说这应该有所帮助并且......

密码测试器 - 满足要求时帮助显示复选标记

我正在尝试使用密码强度测试器制作一个项目，并且已经使其大部分工作正常。我正在努力在完成后在数字、标志和大字母上打勾......

是否可以在scss文件中@import bootstrap图标并通过@extend在其他scss类中使用它？

是否可以像导入bootstrap.scss一样导入并扩展scss文件中的bootstrap-icons.css？ 到目前为止我已经尝试过但没有成功： @import“../node_modules/bootstrap-icons...

<stdin>：14：11：错误：[插件：angular-css-resource]将角度16更新为17时无法解决“open-sans/cyrillic-italic_300.woff2”问题

将 Angular V16 更新到 V17 时出现以下错误。 [错误] 无法解析“open-sans/latin_700.woff2”[插件 angular-css-resource] :581:11: 第581章 │ src: url("打开-...

Sass 每个 Map 循环都带有默认变体的修饰符类

我很难避免重复的代码。 我有一个可以使用大小修饰符来改变元素外观的元素：sm、md、lg。假设我的元素名为 .element 而我的...

基于其他规则应用 CSS 规则 - RTL 特定样式

演示 我正在尝试建立一个可用于多种文化、具有不同阅读方向的网站。 为此，我只需在根 HTML 元素上添加 dir="rtl" 属性即可。 我的问题是...

网格如何去除柱网格

如何从显示网格中删除垂直柱网格 我使用 display: grid 和 grid-template-column: Repeat(2, 1fr) 来获取这个垂直网格 ---------------------------------------------------- 如何重新...

如何通过新的调色板更新临时更改 Ionic 8 中组件中颜色变量的值？

在带有 Ionic Framework 的 Angular 应用程序中，我有一个组件，在特定操作中，我需要使默认颜色变量 --ion-background-color 透明，并恢复为定义的

React 应用程序中的字体不适用于 .scss 扩展名

我使用 Vite 和 React + SCSS。 我有 fonts.scss ，我在项目中使用所有字体： @font-face { 字体系列：“JosefinSans”； src: url("./JosefinSans-Regular.ttf") ...

将任何类的悬停扩展到 SASS 或 SCSS 中的任何其他类的悬停

有没有办法将 &:hover 任何类的悬停扩展到任何其他类的悬停？ 我的代码是这样的，它停止了两个类的悬停： 超文本标记语言 有没有办法将任何类的&:hover扩展到任何其他类的悬停？ 我的代码是这样的，它停止了两个类的悬停： HTML <a href="#" class="button1">Button 1</a> <a href="#" class="button2">Button 2</a> SCSS .button1 { background: black; padding: 5px 10px; text-decoration: none; color: white; &:hover { background: red; } } .button2 { background: blue; padding: 5px 10px; text-decoration: none; color: white; &:hover { @extend .button1:hover } } 您可以使用占位符。 %hover { background: red; } .button1 { background: black; padding: 5px 10px; text-decoration: none; color: white; &:hover { @extend %hover; } } .button2 { background: blue; padding: 5px 10px; text-decoration: none; color: white; &:hover { @extend %hover; } } 或者，也许更好的解决方案是为按钮使用更通用的类： .btn { padding: 5px 10px; text-decoration: none; color: white; &:hover { background: red; } } .btn--1 { background: black; } .btn--2 { background: blue; } 您可以使用mixin @mixin hoverStyle { &:hover{ background: red; } } .button1 { background: blue; padding: 5px 10px; text-decoration: none; color: white; @include hoverStyle; } .button2 { background: blue; padding: 5px 10px; text-decoration: none; color: white; @include hoverStyle; } 尝试这个解决方案。这对我有用 http://jsbin.com/lezuwalida/edit?html,css,输出 生成的CSS看起来是一样的 .demon:hover, .demon.demo { outline: 3px solid red; } .demon2:hover, .demon2.demo2 { outline: 3px solid red; } 对我来说，它可以使用这种较新的 sass 语法。 .link:hover { .button { @extend .other-button, :hover; } } 处理所有这些事情的一个好方法是使用变量， 例如，如果您定义这样的内容： $buttons-hover-color: #somecolor; 然后您可以在任何按钮中调用它，如果将来您想更改它，只需更改变量即可，所有按钮都会更新。 另一件重要的事情是扩展在媒体查询中不起作用，所以也许将来当你瞄准移动设备时你不希望在移动设备中出现红色，所以你只需要为其创建另一个变量。 类似这样的： $btn-hover-color: red; $btn-hover-mobile: black; .button1 { background: black; padding: 5px 10px; text-decoration: none; color: white; &:hover { background-color: $btn-hover-color; } } .button2 { background: blue; padding: 5px 10px; text-decoration: none; color: white; &:hover { background-color: $btn-hover-color; } @media (max-width: 800px) { &:hover { background-color: $btn-hover-mobile; } } } 希望这对您有帮助

如何在Typo3 12中从scss链接png或其他来源？

Typo3 12 将所有扩展移至供应商文件夹（因此 /public 文件夹表单扩展不再公开），并在“_assets”文件夹中为每个扩展创建一个散列命名的文件夹...

使用 SCSS 时，如何更改将鼠标悬停在父元素上时子元素的样式？

有一个包含多个嵌套元素的块： 有一个包含多个嵌套元素的块： <div class="block"> <h1 class="block__title"></h1> <p class="block__text"></p> <a href="" class="block__link"></a> </div> 我使用此代码，但它不起作用： .block:hover { &__title { text-decoration: underline; } } 您当前的代码被解释为.block:hover__title，这不会产生您想要的效果。 要让您的子元素对悬停做出反应，您可能需要执行以下操作： .block { &:hover { .block__title { text-decoration: underline; } } } （编译为 .block:hover .block__title 这将正确影响子元素）