问题[sass](coding)

我想创建一个从原色到完全透明颜色的线性渐变来突出元素。我在 Vue 3 单文件组件中使用 SCSS。

我按照指南的建议尝试过：

background: linear-gradient(
    to top,
    rgba(var(--v-primary-base), .3) 0%,
    rgba(255, 255, 255, 0) 100%
);

但那不起作用，似乎没有--v-primary-base可用的变量，没有应用颜色。

并且vuetify-settings.scss似乎没有导出与原色/次色相关的内容：

我可以让它与特定的颜色一起工作，例如：

background: linear-gradient(
    to top,
    rgba(red, .3) 0%,
    rgba(255, 255, 255, 0) 100%
);

但我需要它是 DRY 并且支持主题。

我的 vite css 配置：

resolve: {
    alias: {
        '@': path.resolve(__dirname, './resources'),
        '@components': path.resolve(__dirname, './resources/ts/Components'),
    },
},
css: {
    preprocessorOptions: {
        scss: {
            additionalData: `@use '@/css/vuetify-settings';@import "@/css/variables.scss";@import "@/css/app.scss";`
        }
    }
}

我的@/css/vuetify-settings.scss：

@forward 'vuetify/settings';

我正在将 React 应用迁移到 Svelte。React 应用没有限定其 CSS 的范围；所有内容都包含在一个由几十个 SCSS 文件组成的样式表中。此样式表只有 8 kb，因此我想在我的 Svelte/SvelteKit 应用中将其用作全局 SCSS 文件。

sveltekit repo 中对全局样式进行了长时间的讨论，但我无法在那里找到解决方案。

根据该讨论，似乎 SCSS 导入应该在全球范围内完成+layout.svelte。

因此我添加了以下几行：

<style lang="scss">
    @import '../assets/css/AppGlobal.scss';
</style>

然后我用构建了应用程序npm run build；出现了几个关于未使用的 CSS 选择器的警告，但构建已完成。

然后我检查了应用程序npm run preview，发现我编译的 SCSS 没有加载到任何地方（不在/路径中）。

我需要做什么才能让 SCSS 在全球范围内运行？这是我使用 Svelte 的第一天。

Svelte 4 和 SvelteKit 2。

我正在将我的应用程序中的分页功能切换到 Pagy gem。我很难理解如何让样式发挥作用。

我查看了此处的文档：https://ddnexus.github.io/pagy/docs/api/stylesheets/，但不清楚这些样式是否包含在 gem 中，我如何@import在 SCSS 文件中导入它们？

有人可以帮我一下吗？

根据官方Bootstrap指南中展示的示例，使用边框类时调整边框宽度大小似乎很容易... ```html ``` 但如果我们只想使用底部边框，例如... ```html ``` 我们如何利用这些相同的尺寸选项呢？ 我能在我的自定义.scss文件中写些什么来扩展utilities.scss文件（node_modules/bootstrap/scss/mixins/_utilities.scss），以允许底部边框有不同的边框大小吗？ 我尝试了 ```css $utilities: map-merge( $utilities, ( "border-width": ( property: border-width, class: border, values: $border-widths ) ) ); ``` 和 ```css $utilities: map-merge($utilities, ("border-width": map-merge(map-get($utilities, "border-width"), (values: ( 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px, ), )))); ``` 但当与`border-bottom`一起使用时，没有效果。 但即使我找到了解决方案...在utilities.scss文件中的以下Bootstrap规则有一个重要的语句应用到它的规则上...  有没有办法解决这个问题？ 我能想到的唯一办法是如果我们设置一个switch case（SASS map）或多个if else语句过程来改变`--bs-border-width`的值，这取决于类的名称...？我完全不知道。

我在我的 React 项目中使用 antd 组件。我想覆盖scss. 我找到了 css 的答案，但同样的事情不适用于 scss。

我想覆盖antd-tooltip-arrow组件的背景颜色。

我用的是这个scss（我的scss版本）

section[data-testid="title-cast"] {
    .ipc-media--avatar-circle,
    .ipc-avatar {
        &,
        .ipc-lockup-overlay,
        .ipc-lockup-overlay__screen {
            border-radius: 5px !important;
        }
    }
}

得到这个CSS（预期输出）

section[data-testid="title-cast"] .ipc-media--avatar-circle,
section[data-testid="title-cast"] .ipc-avatar,
section[data-testid="title-cast"] .ipc-avatar .ipc-lockup-overlay,
section[data-testid="title-cast"] .ipc-avatar .ipc-lockup-overlay__screen {
    border-radius: 5px !important;
}

但得到了这个CSS（输出错误）

section[data-testid=title-cast] .ipc-media--avatar-circle,
section[data-testid=title-cast] .ipc-media--avatar-circle .ipc-lockup-overlay,
section[data-testid=title-cast] .ipc-media--avatar-circle .ipc-lockup-overlay__screen,
section[data-testid=title-cast] .ipc-avatar,
section[data-testid=title-cast] .ipc-avatar .ipc-lockup-overlay,
section[data-testid=title-cast] .ipc-avatar .ipc-lockup-overlay__screen {
  border-radius: 5px !important;
}

如何

我正在尝试在 sass 中循环嵌套地图，以便为主题列表创建某些 css 变量。

我有一个这样的主题图：

$themes: (
    theme-1: (
        primary: (
            "el-background": #000,
            "el-background-hover": #0d0d0d,
            "el-color": #2c2f33,
            "el-link-color": #fff,
        ),
        secondary_1: (
            "el-background": #000,
            "el-background-hover": #ccc,
            "el-color": #f2f2f2,
            "el-link-color": #fff,
        )
    ),
    theme-2: (
        primary: (
            "el-background": #f90,
            "el-background-hover": #ccc,
            "el-color": #000,
            "el-link-color": #fff,
        ),
        secondary_1: (
            "el-background": #f2f2f2,
            "el-background-hover": #000,
            "el-color": #f2f2f2,
            "el-link-color": #fff,
        )
    )
);

我期望在 css 中得到这样的结果：

.theme-1 {
    .primary {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }

    .secondary_1 {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }
}

.theme-2 {
    .primary {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }

    .secondary_1 {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }
}

我如何调整这个循环来实现这一目标？我想我需要把它包裹在另一个@each但不知道如何。

@mixin theme() {
    @each $theme, $map in $themes {
        .#{$theme} {
            @each $key,
            $value in $map {
                --#{$key}: #{$value};
            }
        }
    }
}