sass 相关问题

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

Bulma - 为自己的组件定制 SCSS

在 BULMA 或 SCSS 中，也许更具体地说，我想使用一个组件，但有点复制它而不是覆盖它，这是通过扩展实现此目的的唯一方法，或者是否还有其他机制。

sass bulma

回答 1 投票 0

css calc - 向下舍入两位小数

我有以下情况： div { 宽度：计算((100% / 11) - 9.09px); } 在上下文中，100% = 1440px，9.09px 是用 sass 数学生成的。结果是：94.55px，因为 calc

css sass css-calc

回答 6 投票 0

使用具有多种样式的Scss变量？

我正在进入 scss，并一直在尝试通过变量应用我的大部分样式。我想要多种样式的某些变量。例如与字体相关的东西。我想要...

css sass

回答 3 投票 0

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 上测试的）

html angular sass angular-material angular12

回答 3 投票 0

Rails 项目 .scss 部分文件未加载

我有一个名为“_teapot_card.scss”的CSS卡组件文件，位于通常的“组件”文件夹中，以及其他CSS组件（正在工作），例如导航栏....

ruby-on-rails ruby sass

回答 1 投票 0

如何解决SCSS顶部内容（文本）溢出的问题？

我在块图钉中包含了一些文本，并且文本的顶部溢出了。下面是我的 SCSS 样式表： .chunk-page { 背景颜色：#EEEEEE；宽度：100vw；显示：柔性； ...

reactjs sass jsx

回答 1 投票 0

用一些通用的css代码优化scss嵌套代码

嗨，我正在尝试为某些类别和子类别设计样式。这是代码 const listStyle = styled.div` --填充值：40px；。裹 { 。项目清单， .listItemCategory { 填充...

css sass

回答 1 投票 0

Sass 中的图像路径中有变量吗？

我想要一个变量，其中包含 CSS 文件中所有图像的根路径。我不太清楚这在纯 Sass 中是否可行（实际的 Web 项目不是 RoR，所以不能使用

css sass

回答 5 投票 0

切换错误，斜向移动而不是直线移动

我正在研究切换，这是我的代码：从“./Toggle.module.scss”导入样式；导出默认函数 Toggle() { 返回（ <> 我正在研究切换，这是我的代码： import style from "./Toggle.module.scss"; export default function Toggle() { return ( <> <input type="checkbox" id="toggle" className={style.toggle} /> <label htmlFor="toggle" className={style.label} /> </> ); } .toggle { height: 0; width: 0; opacity: 0; } .label { width:60px; height: 30px; border-radius:30px; display: block; background-color: #ebebeb; box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2) inset; left:10px; padding-left: 5px; position: relative; &::after { content: ''; position: absolute; width: 23px; height: 23px; border-radius: 50px; background-color: green; top: 50%; transform: translateY(-50%); transition: 0.3s; } } .toggle:checked ~ .label::after{ transform: translateX(32px); } 最初，旋钮完全位于开关内部的中心，但是当我单击它时，它会进行对角线移动，而不是向右直线移动。详情请参阅codesandbox。 https://codesandbox.io/p/sandbox/red-microservice-gq48pj?file=%2Fsrc%2Findex.js 您还需要将 translateY: -50% 添加到切换转换中，如果不这样做，该值将不会添加到转换中： .toggle { height: 0; width: 0; opacity: 0; } .label { width: 60px; height: 30px; border-radius: 30px; display: block; background-color: #ebebeb; box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2) inset; left: 10px; padding-left: 5px; position: relative; &::after { content: ""; position: absolute; width: 23px; height: 23px; border-radius: 50px; background-color: green; top: 50%; transform: translateY(-50%); transition: 0.3s; } } .toggle:checked ~ .label::after { transform: translateX(32px) translateY(-50%); } 一种解决方案是： &::after { ... top: 4px transform: translateX(0); ... } .toggle:checked ~ .label::after { transform: translateX(28px); } 注意从translateY 到translateX，因为你是水平移动，所以根本不需要设置Y 轴。

css reactjs sass

回答 2 投票 0

如何在相对父级中垂直定位元素

我正在制作拨动开关，我想将拨动旋钮完全垂直地放置在开关内。以下是我尝试实现此目标的方法：从“./Toggle.module.scss”导入样式；出口

html css reactjs sass

回答 1 投票 0

如何使 div 位于水平对齐（居中）元素的右侧。在 Tailwind 或 CSS 中

如何使其准确：- 上面有一个 div 在中心对齐，然后另一个 div 在它旁边。 div 的宽度随着动画和按钮的变化而变化。 <question vote="1"> <p>如何使其准确：- <a href="https://i.sstatic.net/Jf1l6Ew2.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvSmYxbDZFdzIucG5n" alt="enter image description here"/></a></p> <p>在上面有一个div在中心对齐，然后另一个div在它旁边。 div 的宽度随着动画和按钮的变化而变化。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code><script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="flex justify-center">  <div class=" bg-blue-300 grow"></div>  <div class="py-10 bg-yellow-300">Center Me</div>  <div class=" bg-blue-300 grow"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>在 <pre><code>absolute</code></pre> 容器内使用 <pre><code>relative</code></pre> 的最佳方式是使用它，因为您有将元素推入其中的内容，或者您可以使用网格代替 <pre><code>flex</code></pre> 来按内容</p> <p>使用flex的解决方案： </p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code> <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="flex justify-between relative">  <div class="bg-blue-300 grow"></div>  <div class="py-10 bg-yellow-300">Center Me</div> <div class="bg-blue-300 grow"></div>  <div class="bg-blue-300 absolute right-0 h-full"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> <p>使用网格</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code> <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="grid grid-cols-3">  <div class="bg-blue-300"></div>  <div class="py-10 bg-yellow-300">Center Me</div>  <div class="bg-blue-300"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> <p>最终取决于你如何处理这个问题</p> </answer> </body></html>

html css sass flexbox tailwind-css

回答 0 投票 0

覆盖引导程序@media断点

我对这件事很陌生，所以请耐心等待。我最近一直在弄乱视图，想知道是否可以覆盖存储在引导程序中的断点。 IE）：根 { --

javascript html css sass

回答 2 投票 0

有没有办法同时为2个css属性分配相同的值？

使用 CSS、LESS 或 Sass 可以同时为 2 个 css 属性分配相同的值吗？就像： .c1, c2 {相同值} 但像这样： .c2 { 背景颜色:, 颜色: sameValue}

css sass less

回答 5 投票 0

如何在 SASS Rails 解释器中使用 css 变量？（冲突）

我正在使用 sass-rails gem，我尝试使用这样的 css 变量： --h：198 --l：38% --c: hsl(var(--h), 100%, var(--l)) 背景图像：线性渐变（向右，var(--c) 0%，#000 100%） ...