Sass（Syntactically Awesome Style Sheets）是CSS的扩展，添加了嵌套规则，变量，mixins和类扩展等功能。这使开发人员能够编写结构化，可管理且可重用的CSS。 Sass被编译成标准CSS。
将 .mat-column-name 样式应用于 Angular Material 中的子组件
子组件包含一个 Angular 材质表，该表是根据作为输入传递的列创建的： 子组件包含一个 Angular 材料表，该表是根据作为输入传递的列创建的： <table mat-table> <ng-container *ngFor="let col of columns" [matColumnDef]="col"> </table> @Input() columns: string[] 父组件提供列定义。然而，我能影响 f.e. 的唯一方法是mat table column width 是通过设置样式表 .mat-column-col-name { width: 10px } 如何从父组件设置mat-column width？列的名称是父级已知的，可以在其样式表中定义。我强烈希望避免任何 encapsulation: none，因为子组件位于我开发的库内。将样式传递为 @Input() 将是最好的解决方案。 我们可以使用 ::ng-deep 使样式从父级到子级可见，就像这样 :: ng-deep .mat-column-col-name { width: 10px } 如果您不喜欢::ng-deep，我建议向包装子.wrapper-class的父元素添加一个类，然后转到角度全局样式文件styles.scss或global-styles.scss并应用样式，这会将样式范围限制为仅此类元素及其子元素，该文件将位于 src 文件夹中！ .wrapper-class .mat-column-col-name { width: 10px } 家长： <div class="wrapper-class"> <child-component/> </div>
Angular Material 18：mat.define-palette() 导致“未定义函数”错误
将 Angular 核心库升级到版本 18 后，我通过运行以下命令迁移到 Angular Material 18： ng 更新@Angular/Material 更新进行得很顺利，但是当我尝试编译我的应用程序时，我得到了......
根据官方 Bootstrap 边框指南中显示的示例，使用边框类时调整边框宽度大小似乎很容易...... 根据边框的官方 Bootstrap 指南上显示的示例，使用边框类时调整边框宽度大小似乎很容易... <span class="border border-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span> 但是，例如，如果我们只想使用边框底部，我们如何利用这些相同的大小选项... <span class="border-bottom border-1"></span> <span class="border-bottom border-2"></span> <span class="border-bottom border-3"></span> <span class="border-bottom border-4"></span> <span class="border-bottom border-5"></span> 我可以在自定义 .scss 文件中编写一些内容来扩展utilities.scss 文件（node_modules/bootstrap/scss/mixins/_utilities.scss）以允许边框底部具有不同的边框大小吗？ 我试过了 $utilities: map-merge( $utilities, ( "border-width": ( property: border-width, class: border, values: $border-widths ) ) ); 和 $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 映射）或多个 if else 语句过程来更改 --bs-border-width 的值，具体取决于类的名称......？我不知道。 border-bottom border-5对我来说效果很好。我建议您在 CSS 中添加一些内容来覆盖这些类名称/对您尝试设置样式的元素应用不同的边框宽度。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <div class="container mt-2"> <h2 class="border-top border-2 border-danger p-2">Border top 2</h2> <h2 class="border-end border-3 border-success p-2">Border end 3</h2> <h2 class="border-bottom border-4 border-primary p-2">Border bottom 4</h2> <h2 class="border-start border-5 border-warning p-2">Border start 5</h2> </div>
我有这个 HTML @for (sortingActions 的动作) { @if (!action.hasChildren) { 我有这个 HTML <div class="options-panel"> @for (action of sortingActions) { @if (!action.hasChildren) { <app-options-item [columns]="columns" [action]="action" (buttonClicked)="changeSorting(theadCol.sorting, action.direction)"></app-options-item> } @else { <app-options-item class="options-divider" [columns]="columns" [action]="action"></app-options-item> } } </div> 还有这个CSS .options-panel { display: flex; flex-direction: column; align-items: flex-start; width: 200px; padding: 8px 0; border-radius: 4px; } 我试图仅为第一个具有选项分隔符类的孩子设置背景颜色。 如果我仅为班级而不是第一个孩子设置背景颜色，则班级将获得背景颜色。 我尝试过这些选项 .options-divider:nth-of-type(1) { background-color: #FF5733; } options-divider:first-of-type { background-color: #FF5733; } app-options-item:has(.options-divider):first-of-type { background-color: palegoldenrod; } 为什么不起作用？ 您可以通过检查@for内数组的索引来检查它是否是第一项 @for(action of sortingActions;let idx = $index){ <div [ngClass]="{'options-divider':idx === 0}">{{action}}</div> } 看起来您的 HTML 有问题，而不是 CSS。 使用这个简化的 HTML 结构： <div class="options-panel"> <div class="options-divider"> one </div> <div class="options-divider"> two </div> <div class="options-divider"> three </div> <div class="options-divider"> four </div> <div class="options-divider"> five </div> </div> 和你的风格，它按预期工作。 https://jsfiddle.net/1muo9h60/
我已经创建了 style.scss 和 style.css 文件，但是当我对 style.scss 进行更改时，它不会自动反映到 css 文件中。 我也尝试过以下命令 npm install -g s...
对于某些背景，我们有设计师提供的一堆主题颜色，并试图将它们集成到单一的事实来源中，因为它们在原型设计阶段经常发生变化。 对此...
当 mixin 保存在单独的文件夹中时，Sass 编译器会抛出“未定义的 mixin”错误
这是我的网站结构的屏幕截图。 在我的 mixins 文件中，我创建了所有必需的 sass mixins。 我为边界半径创建了这个 mixin： @mixin 边界半径($radius) { -
我们有一个包含许多 Blazor 页面的 .NET MAUI Blazor 应用程序。 我们使用 SCSS 和 Tailwind 来代替纯 CSS。我们正在寻找如何完全自动转换为普通 CSS（甚至在管道中）....
移动 - SAFARI：在将固定位置应用于身体时防止滚动重置到移动设备顶部
我的网站上有一个弹出窗口，它可以从隐藏，最小化，到全屏状态，当全屏时，我显然想阻止后面页面的滚动。所以我添加和删除 noscroll
使用 Astro 和 Sass 我想在 scss 文件中使用资源图像。 在 scss 文件中我有： 。地图 { 背景图像： url('src/assets/map.jpg'); 背景重复：不重复； 背景...
为什么它在 scss 中不断给出“预期}”，即使所有括号似乎都已关闭？
我的 SCSS 文件遇到问题，不断收到有关缺少右括号 (}) 的错误，但我似乎找不到问题出在哪里。这是我的 SCSS 代码： 当我尝试写作时
这似乎是一个奇怪的请求，但我正在 HubSpot 的一个网站上工作，它会在将 CSS 和 JS 文件提供给浏览器之前自动为我缩小它们。 我使用 S 进行开发...
我正在使用 SCSS 并在我的 _header.scss 文件中，我在 main.scss 中使用该文件，如下所示： @使用“标题”； 我有以下代码（我剪掉了一些不重要的部分，例如边框，
我的网站正在尝试显示字母“ä”和“??”，它们在一起通常会变成“??” 但是，我的网站（hugo 静态网站）没有渲染连字，因为我......
scss - 不推荐在导入中使用“~” - Angular - vscode
从 Angular 13 开始，使用波形符 (~) 从 node_modules 导入 SCSS 文件 关闭.组件.scss :主机::ng-深{ // 配置 @import“~bootstrap/scss/functions”； @我...
如何在 Vue.js 中使用 /deep/ 或 >>> 或 ::v-deep？
所以，我在这里读到，在 Vue.js 中，您可以在选择器中使用 /deep/ 或 >>> 来创建适用于子组件内部元素的样式规则。然而，尝试使用这个...
在 BULMA 或 SCSS 中，也许更具体地说，我想使用一个组件，但有点复制它而不是覆盖它，这是通过扩展实现此目的的唯一方法，或者是否还有其他机制。
我有以下情况： div { 宽度：计算((100% / 11) - 9.09px); } 在上下文中，100% = 1440px，9.09px 是用 sass 数学生成的。 结果是：94.55px，因为 calc
Angular - 如何从 mat-list-text 中删除 padding-right？
我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码： 我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码： <mat-selection-list [multiple]="false" [class.selected]="currentItem" formControlName="itemListControl" > <mat-list-option *ngFor="let item of items" [value]="item.id" > <div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; align-items: center"> {{ item.name }} </div> <button mat-icon-button> <mat-icon>edit</mat-icon> </button> </div> </mat-list-option> </mat-selection-list> 当我在浏览器中检查站点时，我可以看到有一个 16px 的填充，它将按钮移动到列表项内的左侧： 我已经尝试通过将其添加到组件的 scss 文件中来删除它： .mat-list-item { padding-right: 0 !important; } 由于某种原因，这没有任何效果。看起来这甚至根本没有应用于该元素。我做错了什么以及如何摆脱这种填充（不会造成任何潜在的不良副作用）？ 请按如下方式使用。会起作用的。 .mat-list-text { padding-right: 0 !important; } 谢谢！ 使用整个选择器（而不是仅仅使用 .mat-list-text，复制上图中突出显示的 css 的所有选择器部分）来删除填充，角度材质很难修改。不要忘记添加 !important 。我以前必须这样做。我希望它也对你有用。 步骤1 在您的 component.ts 文件中添加： encapsulation: ViewEncapsulation.None 步骤2 在你的 css 文件中添加新的类自定义选项： .mat-list-option.mat-list-option.custom-option { .mat-list-text { padding-right: 0px !important; } } 步骤3 在您的 .html 文件中将新类添加到您的 mat-list-option 中： <mat-list-option ... class="custom-option"> （注：这是在 Angular V15 上测试的）