sass 相关问题

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

CSS calc() 函数中的 Sass 变量

我正在尝试在 Sass 样式表中使用 calc() 函数，但遇到了一些问题。这是我的代码： $body_padding：50px 身体顶部填充：$body_padding 高度：计算（100% - $body_paddin...

css sass css-calc

回答 6 投票 0

SCSS 使用断点声明 Mixins

是否可以使用 SCSS 来编写 Mixins，并根据媒体查询来更改属性。以此根据断点声明映射更改字体大小和行高。这是……

sass media-queries scss-mixins

回答 1 投票 0

Bootstrap 5.3.2 主题颜色

我想知道哪种是处理主题颜色的最佳方法。我需要更改浅色模式和深色模式的主颜色。我尝试使用此代码，但深色不起作用。 // 轻...

sass bootstrap-5

回答 1 投票 0

如何设置垫选选项的样式？

我想更改 Angular 15 上垫选择的所选选项文本的颜色。 .html 来自我想更改 Angular 15 上垫选择的所选选项文本的颜色。 .html <mat-form-field> <mat-label>From</mat-label> <mat-select panelClass="mat-select-red"> <mat-option>January</mat-option> <mat-option>February</mat-option> <mat-option>March</mat-option> </mat-select> </mat-form-field> .ts ViewEncapsulation 设置为无。 @Component({ selector: 'app-myapp', templateUrl: './myapp.component.html', styleUrls: ['./myapp.component.scss'], encapsulation: ViewEncapsulation.None }) .scss 我已经尝试了所有这些，但没有任何效果。 .mat-select-red.mat-mdc-select-value-text{ color: red !important; } .mat-select-red.mat-select-value-text{ color: red !important; } .mat-select-red.mat-mdc-select-value{ color: red !important; } .mat-select-red.mat-select-value{ color: red !important; } .mat-select-red.mat-mdc-select{ color: red !important; } .mat-select-red.mat-select{ color: red !important; } .mat-select-red.mat-mdc-select-min-line{ color: red !important; } mat-mdc-form-field{ color: red; } 注意：以下 CSS 有效且已正确应用。但它改变了背景颜色。我想更改所选值的文本颜色。 .mat-select-red.mat-mdc-select-panel { background: rgba(255, 0, 0, 0.5); } 更新根据请求添加渲染的 html。 <mat-select role="combobox" aria-autocomplete="none" aria-haspopup="listbox" formcontrolname="startMonth" panelclass="mat-select-red" class="mat-mdc-select ng-tns-c33-1 ng-tns-c20-0 ng-valid ng-star-inserted ng-touched ng-dirty" ng-reflect-panel-class="mat-select-red" ng-reflect-name="startMonth" aria-labelledby="mat-mdc-form-field-label-0 mat-select-value-1" id="mat-select-0" tabindex="0" aria-expanded="false" aria-required="false" aria-disabled="false" aria-invalid="false"><div cdk-overlay-origin="" class="mat-mdc-select-trigger ng-tns-c33-1"><div class="mat-mdc-select-value ng-tns-c33-1" ng-reflect-ng-switch="false" id="mat-select-value-1"><span class="mat-mdc-select-value-text ng-tns-c33-1 ng-star-inserted" ng-reflect-ng-switch="false"><span class="mat-mdc-select-min-line ng-tns-c33-1 ng-star-inserted">February</span></span></div><div class="mat-mdc-select-arrow-wrapper ng-tns-c33-1"><div class="mat-mdc-select-arrow ng-tns-c33-1"><svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" class="ng-tns-c33-1"><path d="M7 10l5 5 5-5z" class="ng-tns-c33-1"></path></svg></div></div></div></mat-select> 我可以使用它更改所选选项的颜色，希望它有帮助 /* TEXT COLOR WHEN OPTION IS SELECTED*/ .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text { color: red !important; }

css angular sass

回答 1 投票 0

将 objectFit 与 gatsby-plugin-image 中的 StaticImage 结合使用

我在网络应用程序中使用 gatsby-plugin-image 的 StaticImage 组件，但在将 objectFit 的属性从“cover”更改为“contain”时遇到问题。这是我的代码示例：从 '

reactjs sass gatsby

回答 3 投票 0

如何删除使用 flex-wrap 的响应式列表中的死空间

我有以下问题。我有两列项目。一列只能包含一个项目，第一列可以包含多个项目。根据用户屏幕的大小，我需要......的列表

css sass

回答 1 投票 0

SVG CSS 动画问题

我正在尝试重新创建这个 gif 动画，但是是在 SVG 上。 SVG 与 gif 的图标相同。我不确定 CSS 是如何实现的。这是动图 svg { 宽度：200px； } svg [数据名称=“右...

css animation svg sass frontend

回答 1 投票 0

达到高度限制时如何裁剪图像？使用 html 和 css

我有一个很大的图像，为了让它不占据更宽设备上的所有屏幕，我希望它在达到一定高度限制时从顶部和底部裁剪，...

javascript html css typescript sass

回答 1 投票 0

如何隐藏谷歌翻译工具栏弹出窗口？

我需要隐藏用户选择语言后出现的谷歌翻译工具栏。我做了我的研究，大多数答案点使用以下代码来隐藏弹出窗口： .skiptranslate { 显示...

javascript css sass google-translate google-translation-api

回答 1 投票 0

@apply 在 @mixin

我正在尝试将 Tailwind 类应用于 @mixin，即 CSS 选择器中的 @include，如下所示： @mixin 卡 ($shadowColor) { @apply p-4 m-4 阴影-xl $shadowColor; 边框半径：4px；博...

sass tailwind-css postcss

回答 1 投票 0

Sass 数学无效 css

我使用 Zurb Foundation.tramide Sass 框架。当我去编译时，我收到此错误：错误 scss/node_modules/foundation-sites/scss/util/_math.scss （第 23 行：“ @return mat 之后的 CSS 无效...

sass zurb-foundation

回答 1 投票 0

在 Angular 应用程序中混合 less 和 sass 文件

我正在使用 ng-zorro 组件库构建一个 Angular 应用程序。通常，我还会为一些实用程序导入整个 Bootstrap css 文件，例如我喜欢的网格系统和间距类...

angular twitter-bootstrap sass less ng-zorro-antd

回答 1 投票 0

多租户微服务架构中订阅的数据流

我是微服务新手，目前正在设计一个基于 SASS 的多租户应用程序。现在我有 4 项服务，一项用于身份验证相关活动，一项用于用户、角色和 rbac，一项用于租户和...

sass microservices multi-tenant subscription

回答 1 投票 0

Firefox 绝对定位无法按预期工作

我用React + SCSS做了一个组件。它在 Chrome 上正常工作：但是当我在 Firefox 中打开同一页面时，它移动到左上角并且看起来很奇怪：我需要改变什么才能使它在 Firef 上工作......

javascript css reactjs sass jsx

回答 1 投票 0

Bootstrap5.3 |反应 js 18 | SCSS 覆盖 _variables | [postcss] [sass] 未定义的混合

嗨，我想覆盖 bs5 变量，我从此链接复制了 bs5 默认变量文件 https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss 当我将此代码粘贴到我的自定义文件中时，我...

reactjs sass bootstrap-5 scss-mixins bootstrap-themes

回答 1 投票 0

将 2 个弹性列合并为 1 个交替的子列

我有一个有 2 列的弹性容器。每列也是一个弹性容器，里面有许多盒子。我有一个 flex 容器，有 2 列。每列也是一个弹性容器，里面有许多盒子。 <div class="flex-container"> <div class="column left-column"> <div class="box boxA">Box A</div> <div class="box boxB">Box B</div> </div> <div class="column right-column"> <div class="box boxC">Box C</div> <div class="box boxD">Box D</div> <div class="box boxE">Box E</div> </div> </div> 我希望在移动视图中，2 列变成 1。现在，我通过将 flex-direction: column 添加到 flex-container 来实现这一点，这使得 2 列彼此重叠（垂直，而不是 z 轴）。 .flex-container { display: flex; gap: 10px; padding: 10px; max-width: 800px; } .column { display: flex; flex-direction: column; flex: 1; gap: 10px; } .left-column { flex: 2; } .right-column { flex: 1; } .box { border: 1px solid lightgrey; border-radius: 8px; padding: 8px; } @media (max-width: 800px) { .flex-container { flex-direction: column; } } 但现在我还需要重新排列框的顺序，以便在移动视图中显示为 A、C、D、E、B。我认为仅使用 CSS 无法实现这一点，因为它需要“破坏”弹性列。这是我目前拥有的沙箱：https://codepen.io/marcysutton/pen/ZYqjPj 顺便说一句，这是在 React 应用程序中，所以我可能必须以编程方式重新排列框。如果可能的话，我只是更喜欢使用 CSS 来做到这一点。在下部宽度处使用 display: contents“破坏”包装 div，然后在 order 上使用 .boxB。 .flex-container { display: flex; gap: 10px; padding: 10px; max-width: 800px; } .column { display: flex; flex-direction: column; flex: 1; gap: 10px; } .left-column { flex: 2; } .right-column { flex: 1; } .box { border: 1px solid lightgrey; border-radius: 8px; padding: 8px; } @media (max-width: 800px) { .flex-container { flex-direction: column; } .column { display: contents; } .boxB { order: 2; } } <div class="flex-container"> <div class="column left-column"> <div class="box boxA">Box A</div> <div class="box boxB">Box B</div> </div> <div class="column right-column"> <div class="box boxC">Box C</div> <div class="box boxD">Box D</div> <div class="box boxE">Box E</div> </div> </div>

html css reactjs sass

回答 1 投票 0

使用 :host ::ng-deep 设置 CSS 角色到角度组件 CSS 不起作用？

尝试使用以下方法设置角度组件的 CSS prop :host ::ng-deep .p-dropdown-panel { 变换原点：中心底部！重要；顶部：-119px！重要；左：0！重要； } ...

css angular sass web-frontend

回答 2 投票 0

如何使用css制作如图所示的圆形波浪边框？

图像的右侧是问题所在，我无法将边框做成像这样的波浪。我希望它弯曲但不对称。这是我使用的最接近的（https://css-generators.com/wavy-shape...

html css sass

回答 1 投票 0

如何在网格布局中实现顶部对齐？

我正在尝试制作网格布局。网格中有 7 个项目。我想要显示的布局如下。 1 3 6 2 4 7 5 上面代码显示的实际布局是 1 2 3 4 5 6 ...