Sass(Syntactically Awesome Style Sheets)是CSS的扩展,添加了嵌套规则,变量,mixins和类扩展等功能。这使开发人员能够编写结构化,可管理且可重用的CSS。 Sass被编译成标准CSS。
我的网站正在尝试显示字母“ä”和“??”,它们在一起通常会变成“??” 但是,我的网站(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 上测试的)
我有一个名为“_teapot_card.scss”的CSS卡组件文件,位于通常的“组件”文件夹中,以及其他CSS组件(正在工作),例如导航栏....
我在块图钉中包含了一些文本,并且文本的顶部溢出了。下面是我的 SCSS 样式表: .chunk-page { 背景颜色:#EEEEEE; 宽度:100vw; 显示:柔性; ...
嗨,我正在尝试为某些类别和子类别设计样式。这是代码 const listStyle = styled.div` --填充值:40px; 。裹 { 。项目清单, .listItemCategory { 填充...
我想要一个变量,其中包含 CSS 文件中所有图像的根路径。我不太清楚这在纯 Sass 中是否可行(实际的 Web 项目不是 RoR,所以不能使用
我正在研究切换,这是我的代码: 从“./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 轴。
我正在制作拨动开关,我想将拨动旋钮完全垂直地放置在开关内。以下是我尝试实现此目标的方法: 从“./Toggle.module.scss”导入样式; 出口
如何使 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"> <!-- This is unneeded extra placeholder --> <div class=" bg-blue-300 grow"></div> <!-- center content whose width is not determined --> <div class="py-10 bg-yellow-300">Center Me</div> <!-- right content whose width is not determined --> <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"> <!-- This is unneeded extra placeholder --> <div class="bg-blue-300 grow"></div> <!-- center content whose width is not determined --> <div class="py-10 bg-yellow-300">Center Me</div> <div class="bg-blue-300 grow"></div> <!-- right content whose width is not determined --> <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"> <!-- This is unneeded extra placeholder --> <div class="bg-blue-300"></div> <!-- center content whose width is not determined --> <div class="py-10 bg-yellow-300">Center Me</div> <!-- right content whose width is not determined --> <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>
我对这件事很陌生,所以请耐心等待。 我最近一直在弄乱视图,想知道是否可以覆盖存储在引导程序中的断点。 IE) :根 { --
使用 CSS、LESS 或 Sass 可以同时为 2 个 css 属性分配相同的值吗? 就像: .c1, c2 {相同值} 但像这样: .c2 { 背景颜色:, 颜色: sameValue}
如何在 SASS Rails 解释器中使用 css 变量? (冲突)
我正在使用 sass-rails gem,我尝试使用这样的 css 变量: --h:198 --l:38% --c: hsl(var(--h), 100%, var(--l)) 背景图像:线性渐变(向右,var(--c) 0%,#000 100%) ...
在大元素上做 CSS 背景动画,而不会隐藏在主体上并保持滚动
我想知道是否有一种方法可以在不影响页面滚动的情况下对背景上的大对象进行动画处理,因为我目前所处的情况,当...
我有许多包含颜色值的 CSS 变量。我想以 HSL 格式定义它们,但是我可以让 Sass 将它们转换为十六进制值吗? 输入: :根 { --深色: hsl(210, 50%, 13%); } 出去...
在 GitHub Pages (Jekyll) 中,如何更改网站的背景颜色?
我目前正在尝试更改使用 GitHub 页面创建的网站的背景颜色。该网站位于grassschool.github.io/,这是存储库。我正在努力改变...