sass 相关问题

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

AspNetCore.SassCompiler：不编译变量

我正在尝试让 blazor Web 应用程序（服务器端渲染、Windows、.net8.0）使用 scss 文件来存储某些变量，稍后我想将其导入到 .css 文件中。 MS 文档提到了 AspNetCore。

css asp.net-core sass blazor-server-side

回答 1 投票 0

如何用javascript控制Sass变量

我有一个正在生成 CSS 文件的 Sass 文件。我在 sass 文件中使用了许多变量作为背景颜色、字体大小，现在我想通过 JavaScript 控制所有变量。例如...

javascript sass

回答 10 投票 0

使用 Angular 自定义主题从 (sass-loader/dist/cjs.js) 构建模块失败

我正在尝试运行我的 Angular 16 应用程序，但在尝试在本地提供服务时使用材质颜色的每个 .scss 文件中都会出现以下错误。看看下面的错误：错误：模块不...

angular typescript sass angular-material

回答 1 投票 0

如何设置 Vuetify v-data-table 行悬停时的背景颜色？

如何设置的背景颜色属性？我尝试了这个，它有效，但不适用于作用域属性，它也会影响组标题行： ....</desc> <question vote="0"> <p>如何设置<pre><code><v-data-table></code></pre>的背景颜色属性？</p> <p>我尝试了这个，它有效，但不适用于 <pre><code>scoped</code></pre> 属性，它也会影响组标题行：</p> <pre><code><style lang="css"> .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) { background-color: green; } </style> </code></pre> </question> <answer tick="true" vote="5"> <p>使用 <pre><code>item</code></pre> 的 <pre><code><v-data-table/></code></pre> 槽并将您的类添加到该自定义表格行元素。</p> <pre><code><v-data-table ...> <template v-slot:item="{item}"> <tr class="green-bg"> <td>{{item.property1}}</td> <td>{{item.property2}}</td> <td>{{item.property3}}</td> </tr> </template> </v-data-table> </code></pre> <pre><code>.green-bg { /* Set the display to `table-row` because Vuetify makes `flex` */ display: table-row; } .green-bg:hover { /* `!important` is necessary here because Vuetify overrides this */ background: green !important; } </code></pre> <p><a href="https://i.sstatic.net/4skJX.gif" rel="noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvNHNrSlguZ2lm" alt="enter image description here"/></a></p> <p>这里有一个示例演示，位于 <a href="https://codesandbox.io/s/epic-gareth-84qp1?file=/src/components/Playground.vue:89-387" rel="noreferrer">codesandbox</a>。</p> </answer> <answer tick="false" vote="0"> <p><strong>Vuetify 3</strong></p> <p>根据 <a href="https://vuetifyjs.com/en/api/v-table/#props-hover" rel="nofollow noreferrer">documentation</a> 传递 <pre><code>:hover=true</code></pre> 作为 <pre><code>v-data-table</code></pre> 属性将在表格行上添加悬停效果</p> <p>并设置悬停颜色集</p> <pre><code>$table-hover-color: rgb_color </code></pre> </answer> </body></html>

css sass vuetify.js

回答 0 投票 0

多个主题取决于路线

我有 5 个结构相同的页面和 5 个主题（1 页 = 1 个主题）。主题文件也具有相同的结构，仅包含带有调色板和背景图像的 sass 变量。所以我想转行

vue.js sass nuxt.js

回答 1 投票 0

循环将mixins分配给scss中的类

我想将几个@mixins分配给具有相同名称的类，例如： @$listaHerramientas 中的每个 $herramienta { .#{$herramienta} { @include #{$herramienta}; } } 比较...

css loops sass include

回答 1 投票 0

SassError：找不到要导入的样式表。 - 从外部包导入样式时

我有一个使用自定义 Webpack 配置的 React 应用程序。我想添加组件库，特别是最新版本 1.62.1 中的@carbon/react。我的应用程序使用 React 18，W...

reactjs webpack sass

回答 1 投票 0

Camel Case 中的 Rect CSS 模块和 Snake - case 中的 SCSS 样式

我看过示例代码，其中 React 应用程序中的打字稿代码将 CSS 作为模块导入。然后您可以使用 Style.cssClassName 引用此 CSS。然而，scss/css的类名是写...

css reactjs typescript sass

回答 1 投票 0

如何在Next JS中应用CSS ID选择器？

我是 Next JS 的新手（在得知 npx create-react-app 已停止使用后），我正在尝试将我的网站之一从纯 HTML、SASS (CSS) 和 JavaScript 转换为使用 Next JS 和SASS。一个

css reactjs next.js sass

回答 1 投票 0

创建扩展 Tailwind css 类的类

我在我的项目中使用 Tailwind，我想创建使用 tailwind 现有类的类。例如，我的按钮目前如下所示：我在我的项目中使用 Tailwind，我想创建使用 Tailwind 现有类的类。例如，我的按钮目前如下所示： <button class="text-light-blue bg-white rounded-full border-solid border-2 border-light-blue py-1 px-4 box-border shadow hover:bg-blue-700 hover:text-white hover:border-blue-700"> Button </button> 正如你所看到的，我使用了很多类，我想要这样的东西： <button class="app-btn"> Button </button> 与 @import '/node_modules/tailwindcss/utilities.css'; .app-btn { @extend .text-light-blue; @extend .bg-white; ... } 但是当我尝试这样做时，出现以下错误： SassError: ".app-btn" failed to @extend ".bg-white". The selector ".bg-white" was not found. Use "@extend .bg-white !optional" if the extend should be able to fail. on line 4 of src/assets/styles/app-shared-style.scss 有办法实现我想要做的事情吗？谢谢你可以这样做： .app-btn { @apply text-white rounded-full py-1 px-4 shadow hover:bg-blue-700. } 我找到了解决方案：您需要使用 postcss-import 安装 npm install postcss-import，并使用以下命令调整 postcss.config.js： module.exports = { plugins: [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ] } 然后您可以使用以下命令基于 lib 类创建类： @import 'tailwindcss/utilities'; @import 'tailwindcss/base'; @import 'tailwindcss/components'; .app-btn { @apply text-white; @apply rounded-full; @apply py-1; @apply px-4; @apply shadow; &:hover { @apply bg-blue-700; } } 如果您使用laravel mix const mix = require('laravel-mix'); 您需要通过以下方式之一配置您的 webpack.mix.js 1]你可以像这样使用postCss mix.postCss('resources/css/app.css', 'public/css', [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ]); 2]或者，你可以像这样使用sass mix.sass("resources/css/app.scss", "public/css").options({ postCss: [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ], }); 示例： .input { @apply p-2 text-center mb-2 border rounded focus:outline outline-2 focus:outline-blue-500; } .file-input { @apply input border-none text-slate-500 leading-10 file:block md:file:inline-block file:w-full md:file:w-auto file:btn file:h-min file:border-none file:cursor-pointer file:mx-3; } 无需 CSS 预处理器您必须转到包含 @component @utilities 和 @base 的文件，然后输入： @layer component{ .class-name{ @apply your classes } } 是的，您可以扩展自己的 tailwind 类，而无需插件。只需在 tailwind 的 components 层中定义您的基类，然后在同一位置定义的另一个类中使用它即可。以下是我在主 css 文件中使用它的方法： @layer components { /* my base class "button" */ .button { @apply rounded p-1 bg-gray-200 text-black; } /* here, extending it with "button-red" */ .button-red { @apply button text-red-500; } } 并且可以在您的组件中使用： <button class="button-red"> Button </button>

css sass tailwind-css

回答 6 投票 0

scss 文件 Yii2 高级中 @use 的问题

我被 scss 和 yii2 困住了我有 common.scss，其中包含另外两个文件 _theme.scss 和 _variables.scss 这是我的 common.scss 的样子： @use“变量”； @使用“主题”；所有三个...

sass yii2

回答 1 投票 0

Angular 更新时出现 Sass 错误“@use 即将推出，但此版本的 Dart Sass 不支持”

我在将项目从 Angular v7 更新到 v8 期间收到一条错误消息。 @use 即将推出，但此版本的 Dart Sass 不支持它我正在按照 Angular 更新的步骤进行操作

angular sass

回答 1 投票 0

在CSS中，有没有一种方法可以在桌面上将margin-inline设置为auto，但在移动设备上将margin-inline设置为1rem，而不使用媒体查询？

我正在制作响应式布局。我首先将其开发为移动设备，主容器有一个 margin-inline: 1rem;。当视口增长到桌面大小时，我想限制容器的宽度...