sass 相关问题

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

SCSS - 使用 '%' 声明 css 样式

这是我的问题：我想在我的项目中做这样的类（class =“h-[2％]”），所以我做了这个小代码，但有些东西不正确...... 我对 SCSS 不熟悉，所以我不知道为什么'...

css sass

回答 1 投票 0

如何确保 div 文本不会移动到新行，并且在窗口大小缩小时根据需要换行？

我有一个 html，其中有一个图标、标题和摘要。标题的宽度应为 250 像素，摘要的宽度应为 400 像素。随着移动设备上窗口尺寸的缩小，

css sass

回答 1 投票 0

变暗、变亮函数中的css变量

我需要从按钮动态更改颜色。首先，我声明 css 变量，然后将 scss varaibe 声明为 css 变量。它工作得很好。但是当我尝试将

css sass

回答 1 投票 0

SASS、Gulp 观察基目录和子目录中的 PHP 文件

我正在本地使用SASS和gulp开发一个WordPress主题。我对 SASS 和 gulp 都很陌生，并且遵循了有关创建自己的框架的非常好的课程。我已经在 html 文件上完美运行了

wordpress sass gulp

回答 1 投票 0

我们怎样才能仅使用 flex 来获得这样的布局？

我想要这样的布局，我该如何编写CSS代码？我的 HTML（我已将 CSS 移至 HTML 的样式中）：我想要这样的布局，我该如何编写CSS代码？我的 HTML（我已将 CSS 移至 HTML 中的样式中）： <div class="container" style={{ display: "flex", flexWrap: "wrap" }}> <div class="orange" style={{ flex: 1 }}> <div id="chart" /> </div> <div class="yellow" style={{ flex: 1 }}> <LineChart width={600} height={300} data={this.state.data2} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} > <XAxis dataKey="name" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} /> <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> </LineChart> </div> </div> Flex 可以方便地正确定位 sidebar 和 content 元素并调整其大小，如下例所示。不需要任何固定的像素宽度，也不需要对简单的块元素header和footer使用flex。 .header { background: red; } .sidebar { background: orange; } .content { background: yellow; } .footer { background: green; } .container { display: flex; } .sidebar { flex: 1; } .content { flex: 3; } <div class="header">header</div> <div class="container"> <div class="sidebar">sidebar</div> <div class="content">content</div> </div> <div class="footer">footer</div> 如果侧边栏和内容位于带有 display: flex 的容器中，您可以通过以下样式来实现此目的 .sidebar { // set width width: 200px; // for example } .content { flex: 1; } 尽管您可能会考虑使用固定侧边栏，但这就是您实现图片布局的方式。

css sass flexbox less

回答 2 投票 0

通过垂直滚动定位粘性和内容

我有一个网格，我想要一个粘性标题行。问题是滚动不在网格内容内，滚动出现在整个页面的主 div 上。所以另一个问题是我

html css angular sass kendo-grid

回答 1 投票 0

由于 css 转换，Vue TransitionGroup 无法正常工作

经过几个小时的调试，我得出的结论是，Vue 不能很好地处理 CSS 过渡属性。过渡组：https://vuejs.org/guide/built-ins/transition-group 经过几个小时的调试，我得出结论，Vue 不能很好地使用 CSS 过渡属性。过渡组：https://vuejs.org/guide/built-ins/transition-group <TransitionGroup name="store" tag="div"> <button v-for="item in store.items" :key="item">{{ item.name}}</button> </TransitionGroup> Vue3 过渡类：css-based-transitions .store-move, .store-enter-active, .store-leave-active { transition: opacity 500ms ease, transform 500ms ease; // reference 1 } .store-enter-from, .store-leave-to { opacity: 0; transform: translateY(2rem); } .store-leave-active { position: absolute; } 按钮上的相关样式（使用scss）： button { display: block; transition: transform 150ms ease; // reference 2 &:hover { transform: scale(1.2); } &:active { transform: scale(0.9); } } 选项A：除非您将 !important 放在 vue 转换类上（参考文献 1），否则转换组根本不起作用。选项B：注释掉按钮选择器上的转换（参考 2）。在这两种情况下，由于过渡上共享变换属性，过渡组无法按预期工作。选项C：当注释掉下面的所有内容时reference 1，过渡组工作得很好。我还没有找到解决这个问题的方法。您遇到了典型的特异性问题。根据您在问题中包含的代码片段，尚不清楚原因。但由于我碰巧也是你们这个主题的大学讲师（🤫），所以我查看了你们的原始代码库。您的按钮转换属性具有以下选择器： .store .stall .window .shelf button[data-v-687e7f7b] 特异性为051。您的 TransitionGroup 选择器具有以下选择器： .store-move[data-v-687e7f7b]等等特异性为 020。这就是为什么添加 !important 可以解决您的问题（尽管您不应该使用它）。移动或更新 TransitionGroup 类，以便它们比您的按钮具有更高的特异性。然而，真正的问题是你创建了某种 CSS 嵌套地狱。我建议重构更多组件（例如 AppButton），保持选择器干净并尽量减少嵌套。

sass vuejs3 vuejs-transition-group

回答 1 投票 0

Tailwind screen 函数破坏了 sass 编译器

我的 global.scss 中使用了 screen 函数 @tailwind基地； @tailwind组件； @tailwind实用程序； .h-主{ 字体大小：74px；字体粗细：600；白颜色; @媒体屏幕（sm）...

sass tailwind-css

回答 2 投票 0

将 Gulp-sass 过滤器写入不同的文件夹

大家好，我使用 Foundation Framework (6.8.1) 进行 TYPO3 网站的前端开发。 Foundation Asset 文件夹位于项目根目录中，我想从那里渲染一些

sass gulp zurb-foundation

回答 1 投票 0

如何在样式字典（amzn）中的设计标记输出中添加更多单位类型（px，rem）

你们都知道，如果我们在 config.json 中使用 "transformGroup": "scss" 进行配置，则大小将隐含为 rem 单位 { "source": ["src/styledictionary/tokens/**/*.json&