sass相关内容
所以我正在将一个应用程序从 CRA 迁移到 NextJS,我遇到了一些组件和页面的 .module.scss 文件的错误: 语法错误:选择器“:global(.label-primary)"不是纯的(纯选择器必须至少包含一个本地类或 id) 对于所有 :global 和 :local css-module 选择器,我都会收到此错误.根据我的搜索,我可以通过将选择器包装在一个类中并编辑 jsx
..
我想在 next.jsapp 中使用 css 和 scss. 我的项目中有 next.config.js. 此配置适用于scss: //next.config.jsconst withSass = require('@zeit/next-sass');module.exports = withSass({cssModules:真,cssLoaderOptions: {进口装载机:1,
..
我的 React 应用运行良好,还使用了全局 CSS. 我运行了 npm i next-images,添加了一张图片,编辑了 next.config.js,ran npm run dev,然后现在我收到了这条消息 全局 CSS 不能从您的自定义 以外的文件导入.请将所有全局 CSS 导入移至 pages/_app.js.阅读更多:https://err.sh/next.js/c
..
我用 sass --watch scss:css 让 Sass 为每个 SCSS 文件(来自我的 /scss 目录)自动创建 CSS 文件(并将它们放在 /css 目录中). 在我的 SCSS 文件中,我有这个: .foo::before {内容:“▶";} 当我在浏览器中测试网页时,没有显示“播放"字符 - 相反,我看到了一堆带有卡隆和其他口音的奇怪字母. 我检查了生成的 C
..
假设我有两个几乎相同的 HTML 结构,但具有不同的 class 名称.它们仅在几个变量上有所不同,例如 width 和 height.通过使用 SASS/SCSS 变量,我想我可以做这样的事情: .widget-a {$宽度:50px;}.widget-b {$宽度:100像素;}.widget-a,.widget-b {按钮 {背景:红色;宽度:$width;}} 这会让我为小部件 a 和
..
我有一个 mixin,它接受我想传递给变量的参数. @mixin my_mixin($arg) {背景颜色:$state-#{$arg}-text;} 解决方案 目前在 SASS 中无法插入变量名.这是讨论此问题的问题 https://github.com/nex3/sass/issues/626> 但是,您可以使用占位符的插值: %my-dark-styles {背景色:#000;}%
..
有没有办法在 scss 中向后嵌套?在 css 中,当我想覆盖 IE 或其他浏览器特定样式的样式时,我喜欢选择器在它覆盖的样式之后.像这样 css .class-a .class-b{ 颜色:粉红色 }.ie6 .class-a .class-b{ 颜色:蓝色} 这在 scss 中可能吗?因为现在我是这样写的(而且我不喜欢) scss .class-a{.class-b { 颜色
..
我正在尝试使用动态元素构建导航,这些元素在小屏幕尺寸下可能会分成两行,我希望能够为每行的第一个和最后一个元素设置样式. 以下是一些在小屏幕尺寸下会中断的示例 scss(圆角应位于每行的第一个和最后一个元素上): 首页
第二页
第三页
第四页
另一个示例页面
这可能是最后一页
但它不是
..
我没有使用指南针 我更喜欢使用 Breakpoint.scss 我在使用 susy 2.0 我知道有很多关于这个问题的帖子,但我有 0 次运气找到关于这个主题的 Breakpoint.scss 和 Susy 2.0. @import "susy";@import "断点";$medium: 800px;$susy: (列:6,排水沟:3/4,装订线位置:拆分);@include 断点(
..
我的目标是创建一个具有未知数量项目的响应式网格,使它们的纵横比保持在 16:9.现在看起来像这样: .grid {显示:网格;网格模板列:重复(自动填充,160 像素);网格模板行:1fr;网格间距:20px;}.物品 {高度:90px;背景:灰色;}
..
我有什么办法可以修改 Sass 处理小数位的方式吗?看到有几个人说Sass会动态做响应式布局所需的(target/parent)*100计算,并在编译时输出结果.它甚至还有一个百分比函数,它基本上会取两个值并执行此操作. 唉,Sass 只会给我 3 位小数.到目前为止,我的理解是,在某些情况下,这可能不足以让所有浏览器正确显示布局而不会出现任何问题. 谁能帮我弄明白这件事的真相?
..
我在跨范围使用 Sass 中的变量默认值时遇到问题.我的测试示例是: @mixin foo {$val: '红色' !default;.酒吧 {颜色:$val;}}@include foo;.class1 {$val: '绿色';@include foo;.class11 {@include foo;}}$val: '黑色';.class2 {@include foo;}.class3 {$va
..
我尝试构建一些通用的边距/填充混合... 这是我的代码: [class*="shift"] {$sft-o: 10px;@mixin shift_stp($val) {&[class*="_sml"]{ $val: $sft-o;}&[class*="_mid"]{ $val: $sft-o * 2;}&[class*="_big"]{ $val: $sft-o * 3;}}&[class
..
Vuejs 相对较新并测试其组件.使用 vue-test-utils 和 jest 进行测试.得到以下错误测试日志 .vue 文件由模板、组件和样式组成.下面是 SignupLayout.vue 出错的部分 - @import '../stylesheets/colors'html[path="/signup"], html[path="/login"]高度:100%背景图片:网址(“
..
我目前使用 Web Essentials 2013 更新 4 来支持在 Visual Studio 中编译 .scss 文件. 该工具过去对我来说很好用,但是我刚刚创建了一个新的 .scss 文件,并将引导程序未缩小的 css 复制到这个新文件中. 保存后,屏幕右侧的编译窗口无法更新或显示已编译的 css 或任何错误消息.同时,我的 Visual Studio 屏幕底部的蓝条卡在
..
如何在 Visual Studio 2013 中使用 Sass CSS 预处理器?是否有支持 Sass 的扩展? 解决方案 Visual Studio 2013 Update 2 Visual Studio 2013 Update 2 具有对 SCSS 和 LESS 文件的本机语法支持.您可以创建 SCSS 或 LESS 文件,并查看这些文件类型的语法突出显示和智能感知.但是它不提供
..
我使用 Compass 1.0,当我使用 @include display-flex; 或任何其他与 flex 相关的属性时,我只得到 display: -webkit-flex;显示:弹性;-webkit-flex-flow:行换行;flex-flow:行包装; 等等.没有 -moz 或 -o 前缀.知道为什么吗? 解决方案 Opera 从不为 Flexbox 使用 -o- 前缀.它
..
我正在尝试在圆圈之间画线,我有这个代码 https://codepen.io/cfmorales/pen/qBEqGpr,在某种程度上它是有效的,但是当你调整页面大小时,线条的高度与圆圈不匹配,我有什么想法可以让它响应吗?所有的魔法都在 :before td:nth-child(2) {垂直对齐:基线;}td:nth-child(1) {显示:弹性;对齐内容:居中;右边距:28px;宽度:4
..
假设我有以下标记
..
如何跟踪包含许多 sass 文件的整个目录中的更改?我正在使用以下命令来观察 sass 中的变化 文件: sass --watch style.scss:style.css 但是如何观察包含许多 sass 文件的整个目录/文件夹的变化. 解决方案 只需使用命令sass --watch :,像这样: $ ls -lcss/sass/$ sass --watch sass:css
..