ruby新手（我通常使用python/django），sass新手。我只是尝试配置输出css目录选项 有关问题如下: 在这里： 两者的答案都是更改config.rb。config.rb在哪里？是否有其他方法设置选项？在文本编辑器中打开config.rb，并将“css_dir”从“样式表”更改为“/”（见下文） config.rb特定于Compass项目，位于项目的根目录中。如果您正在使用Compass，您可以根据自己的喜好指定css\u dir，记住/是Compass项目的根 css_dir =

现在我有一个类，我正在扩展到所有的按钮元素。然而，我不想将它扩展到一个按钮，也不想通过改变HTML使其成为链接 是否有任何方法可以删除SASS中特定规则的@extend？否。您的选项包括： 不要设置所有按钮的样式（使用类或更具体的选择器以避免您的唯一元素） 替代唯一元素的样式（根据使用的样式，很难将每个浏览器的按钮恢复为其默认外观） 对您来说，最轻松的解决方案是使用：not选择器： // style all buttons, except for ones with the "default"

首先，我会说我有一个奇怪的网页包构建。我有两个项目，主项目和共享项目（像一个公共库） 每当我从主项目中引用我的共享项目时，就会出现一些奇怪的IE only/react/webpack构建错误，在尝试引用我的共享库时会出现错误。为了解决这个问题，我在另一个文件夹中将我的共享库引用与我计算机上的实际源使用别名。看起来是这样的： var alias.shared-library='c:\\shared library\\index.js' 这解决了我奇怪的IE问题。然而，我的网页制作版本中提出了另一个

我不完全确定我所尝试的是否可行，但我已经尽可能多地搜索了，并构建了以下嵌套循环来创建许多十六进制颜色的变体（而不是手动键入变量名） 但是，我在第二个循环中遇到以下错误： $ gulp sass [17:01:14] Using gulpfile ~/Sites/webcomponents/gulpfile.js [17:01:14] Starting 'sass'... events.js:163 throw er; // Unhandled 'error' event

我有一个mixin或多或少是这样声明的 @mixin color-background { background: yellow; } 我希望使用这种颜色作为png的背景。但我似乎无法将两者混合 现在我想做的是举个例子 .myImageWithBackgroundColor{ background: url(image.png),@include color-background } 如何使用SASS和mixin实现这一点？您可以将mixin的背景值存储到一个变量中，然后在第二个

我已经通过foundation cli安装了foundation 6，并选择了zurb模板。当我跑步时，一切正常 foundation watch 从这一刻起，我在src文件夹中更改的任何文件都会重新加载浏览器。 当我在自己的_settings.scs中更改任何内容时，问题就会出现 我收到的错误消息是： Error in plugin 'sass' Message: src\assets\scss\app.scss Error: File to import not found or

我正在尝试安装odoo12，但出现如下错误 AttributeError:模块“sass”没有属性“compile” 我安装了libsass python库，这是安装odoo12后发生错误所必需的 请任何人帮助。尝试执行pip freeze | grep sass如果输出列出libsass旁边的sass模块，这就是问题所在。删除sass（或者重新安装libsass）应该可以解决问题。尝试执行pip freeze | grep sass如果输出列出libsass旁边的sass模块，这就是问题所在。

Sass变量可以这样使用： !blue = #3bbfce .content_navigation border-color = !blue color = !blue - #111 !blue = #3bbfce .content_navigation background= !blue "url(/path/to/image) 0 0 no-repeat" 这在“单值”变量上非常有效。我无法在“多值”css规则上使用它们，例如背景： !blue = #3bbfce /

我试图使用Sass（和Compass）来简化百分比宽度布局的创建 使用target/context=result之外的列表中的公式，其中上下文是980px，设计宽度是640px，我尝试使用 #leftcol { width: ((640/980)*100%); } 编译成 #leftcol { width: 65.306%; } 有比不反复输入更简单的方法吗？我想出来了，我做了一个混音： @mixin flex($target, $context){ width: (($target/$

我最近从使用较少的罗盘转向使用指南针。我使用Codekit，但不使用内置Compass编译器，因为它在使用插件时有问题。现在我的问题是，与更少的编译相比，编译要长得多。我意识到这是因为它在每次编译时都会生成精灵。有没有办法关掉这个？也就是说，只有当我有一个特定的定制时才编译。我查看了定制，没有办法设置一个定制属性来告诉何时以及何时不编译一个新的sprite。换句话说，我想手动告诉编译器何时生成精灵 其他人有解决方案吗？由于我在任何地方都找不到解决方案，我决定创建一个单独的sprite.scss文

有没有标准的方法来缩放指南针创建的所有精灵？也就是说，有一个图像的分辨率是我需要的两倍，我希望从该图像的所有精灵有大小。目前，我可以通过迭代加载的精灵并设置背景大小和修改背景位置来实现这一点 为了清楚起见，举个例子，如果我使用的是正常大小的精灵，我会这样做： @import "settings/*.png"; @include all-settings-sprites; 但要得到双倍大小的精灵，我必须这样做： @import "icons/*.png"; @include retina-spr

有没有办法将自定义文本传递给已编译的CSS？我们正在尝试传递{if}语句，但不希望在最终CSS中有注释标记： {if something} 正文{颜色：红色；} {/if} 现在我遇到了编译错误。使用{}和引号的组合'： #{'{if something}'} body { color: red; } #{'{/if}'}

我习惯于在SCS中编码，但对更少的人来说是相当陌生的 我在SCSS中有以下代码，但想知道如何用更少的代码编写 这是SCSS代码 @mixin posL($property, $value) { {$property}: $value; } .box { width:200px; height:200px; background:red; position:absolute; @include posL(left, 100px); } 到目前为止，我有这样

下面是我的SCSS文件及其输出。但是，当您检查编译后的注释时，所有注释都放错了位置 SCSS /* Navigation */ .navigation{ background: red; /*Subnavigation 1*/ .subnav{ background: #FFF; } /*Subnavigation 2*/ .subnav2{ background: black; } } 输出 /* Navigation */ .

使用Sass（SCSS）/Compass，是否可以从外部托管的文件将一些CSS/scs导入到代码中 我在CDN上托管了一个jQuery插件，希望CSS保持在同一个位置，这样我就不会丢失它。但是，我也希望能够将CSS拉入我的代码中，并在我的主CSS中编译它，而不是在HTML中拉入额外的CSS文件。这可能吗？Sass不会从远程位置编译任何文件，所有文件都必须可以从文件系统（本地硬盘、共享网络驱动器、挂载驱动器等）访问 Sass也根本不编译CSS文件 编译成 @import "my.css"; 也许

刚刚用Mavericks在我的MacBook上进行了新的安装。我正在使用Yeoman和grunt来编译我的项目。重新安装并从repo中取出代码后，我看到以下错误： Warning: LoadError on line ["55"] of /Library/Ruby/Site/2.0.0/rubygems/core_ext/kernel_require.rb: cannot load such file -- app/bower_components/compass-breakpoint/lib

有没有一种时髦的方法来编写这个scss代码并避免重复 $gutter: 0.5em; $width-l: 62em; $width-xl: 98em; $columns: 4; .bloc { margin-right:$gutter; } .content-bloc { margin-right: -$gutter; } 复制部分： @media (min-width: $width-l) { body { width: $width-l; } $bloc-width:

我已经得到了我的Gulpfile来编译我的sass，我只是一个“实时重新加载远离转储codekit”的人。不过，我正在努力让这种风格的注入发挥作用。我正在尝试设置： 当我在终端中运行gulp时，它似乎编译了sass，但没有注入样式。我做错了什么？我在chrome+中安装了livereload扩展，包括以下节点模块： "devDependencies": { "gulp": "~3.5.0", "gulp-sass": "~0.6.0" }, "dependencies

当我使用sass 3.4.1将fontawesome.scss编译为css文件时 $fa-var-music: "\f001"; .#{$fa-css-prefix}-music:before { content: $fa-var-music; } 它被编译为 .fa-music:before { content: ""; } 由于我在项目中主要使用Win1252编码，我想知道如何在css文件中保留“\f001”。为什么SASS要重写？摘自SASS 3.4.0： Sass现在遵循CS

我在Compass框架中使用了非常旧的SASS 3.1.15版本，我想升级到3.4.3，这是最新的版本。我正在研究升级的过程，在阅读了SASS变更日志之后，我希望能够升级，然后如果我看到很多错误等等，回到旧版本，因为我目前有实际的开发工作要与此研究并行进行。我希望避免由于遗留代码与新的SASS不兼容而被阻止，但我也希望看到升级会带来什么问题（如果有的话）。有什么方法可以做到这一点吗？我相信升级就这么简单： $ sudo gem uninstall sass $ sudo gem install

运行grunt sass Running "sass:dist" (sass) task Warning: /home/max/dev/ang-news/src/scss/app.scss:2: file to import not found or unreadable: "foundation" Current dir: /home/max/dev/ang-news/src/scss/ Use --force to continue. Aborted due to warnings.

如何删除特定选择器 所需的SAS .a { .b { .c { .d { .g { ... } } } .c > { .e { .h { ... }

我有一个特殊的情况，每一个规则集。 下面是我的示例scss代码。对于样式指南来说似乎是可以的，它说在多行中编写不相关的规则 $test: 'red' 'green'; .a, .b { color: orange; @each $i in $test { .#{$i} & { color: #{$i}; } } } 我有以下生成的css文件： .a, .b { color: orange; } .red .a, .red .b { co

我成功安装了bourbon，但在我的项目中看不到任何文件夹。为什么？ 因为您不是通过安装gem来创建Bourbon项目。您只需安装Bourbon应用程序。了解 要创建Bourbon项目（确保gems位于PATH内），请运行： 这将在当前文件夹中创建一个Bourbon项目。另外，请参阅Bourbon的CLI上的所有。因为您不是通过安装gem来创建Bourbon项目。您只需安装Bourbon应用程序。了解 要创建Bourbon项目（确保gems位于PATH内），请运行： 这将在当前文件夹中创建一个B

我成功地使用了grunt scss皮棉 但我想排除一个或多个文件夹，但在运行任务后仍然捕获该文件夹，知道如何排除该文件或目录吗 文件中说： exclude Type: String or Array Default: null Exclude one or more files from being linted. 咕哝任务 scsslint: { allFiles: [ 'scss/_main.scss', ], opti

我尝试用可视化代码编译几个.scss文件 我试过了 { "version": "0.1.0", "command": "sass", "isShellCommand": true, "tasks" : [ { "taskName": "Turquoise.scss&quo

我是否可以使用sass和循环来创建以下内容： .m-t-0 { margin-top: 0px !important; } .m-t-1 { margin-top: 1px !important; } .m-t-2 { margin-top: 2px !important; } .m-t-3 { margin-top: 3px !important; } .m-t-4 { margin-top: 4px !important; } .m-t-5

我有一个如下的scss代码 .hello-station { &-hello123 { .site-logo__image { @extend .logos--hello-123; margin: 27px 0; } } } 现在你可以看到“你好”这个词在整个。。。数字也是如此 我想创建一个mixin或函数，这样单词和数字可以作为变量传递。这可能吗？非常简单实际上，Sass/SCSS提供了一种连接语法： $word: 'he

如何将以下css放入SASS/SCSS中 .lowernav>li>a:hover:not(.active) { background-color: #FF4E4E; color: white; } 应在悬停选择器之前使用：not选择器： .lowernav { > li { > a { // base styling &:not(.active):hover { /

我想知道是否有一个scss变量与激活菜单项的颜色（例如顶栏）相关 做一个： grep--color=auto-R'active'*scss 我在找到的行中看到： scss/components/_menu.scss:.active>a{ scss/components/_menu.scss:background:$菜单项background active； scss/components/_menu.scss:color:$菜单项color active； 我不太确定这些是否是我的自定义SC

当我开始一个新的设计项目时，我从我现有的样板开始，即sass（partials/mixin、partials/reset、partials/variables）等 问题是如果我在当前项目中将新的mixin添加到mixin.scss，要将新的mixin用于旧项目，我必须手动复制该项目中旧的mixin.scss中的新mixin 我有几个项目，如上所述更新mixin会让人头疼 我想要的是管理一个中心mixin文件，所有项目（新的和旧的）都可以从一个集中的远程repo（在github中）中拉入该文件 一

由于我是sass的新手，我还没有找到一种方法来在筑巢时对父母使用相同的规则。下面的例子展示了一个基本的例子，我知道你可以使用@extend，但是有没有更干净的方法呢 寻找 .table, .table th, .table td{ background:#000; } 无礼 可以使用引用父选择器，如下所示： .table { &, th, td { background:#000; } } 可以使用引用父选择器，如下所示： .t

我试图使用Sass的@extend功能来减少重复代码，但由于某些原因，它抛出了一个错误。下面是示例代码 在\u title.scss中： .title { font-family: "Open Sans"; } @import "_title"; @import "_user-content"; [13:15:02] gulp-notify: [Gulp] src/assets/styles/base/user-content/_user-content.scss Error: ".user

我有一些时髦的格式，我用它来覆盖聚合物组件。这是自定义变量的混合。Scss不喜欢用它来编译。是否可以设置一个不通过sass方式编译的块？类似于jekyll原始html标记 比如说 // tag do not compile with sass // --my-component-custom-mixin: { background-color: #000; color: #fff; }; // tag finish do not compile with sass // 您可以使用

今天我第一次开始使用Gulp，我一直在修改_variables.scss文件中的一些变量来修改主题。我在颜色系统的灰度中添加了一个灰色，当我用gulp将其编译成css时，我得到了一个错误： 错误：节点\u模块\bootstrap\scss\u变量。scss错误：未定义 变量：“$GRY-950”。 在节点模块/bootstrap/scss/_variables.scss$body bg:$grey-950的第135行上！违约 ----------------------------^ 我对_va

这是SASS中的bootstrap 4-beta版 问题是如何在我的SASS应用程序中使用引导颜色变量？我为此所做的是： color: $theme-colors(primary); 但这不起作用，并抛出一个错误 感谢您的帮助 谢谢你你应该使用这个：颜色：主题颜色（“主色调”） 主题颜色不是一个变量，它是一个函数，这就是为什么不应该在它之前使用$。只需使用 color: $primary; 在将颜色值添加到主题颜色之前，Bootstrap会为颜色值指定值，以便它们在variables.scs

尝试为关键帧创建混合，该关键帧将对基于供应商的属性使用包含 @mixin vendor($property, $value) { -webkit-#{$property}: #{$value}; -moz-#{$property}: #{$value}; #{$property}: #{$value}; } @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content;

执行以下操作的新方法是什么 border-color: transparent lighten((#F1CE18 * 1.05), 5%); CodeKit警告我： DEPRECATION WARNING on line 104 of /Users/r/Documents/anglicans/wordpress/wp-content/themes/afl_theme1/scss/_header.scss: The operation `#F1CE18 times 1.05` is depre

我试图在包含主题混合时设置全局变量，因为它似乎比我从搜索中找到的这个“”东西更容易使用 这个想法有点像是将\u themes.scss与 @mixin light-theme { $primary-color: #123456 !global; } @mixin dark-theme { $primary-color: #654321 !global; } body.light-theme { @include light-theme } body.dark-theme { @include

当我尝试使用带有Parceljs绑定器的globbing导入目录的所有内容时，会出现一个错误。它给出了“要导入的文件找不到或不可读”错误。我的印象是，Parcel为您处理此类设置的配置。我正在尝试导入我的分区，如下所示： @import './someDirectoryName/*' 我是否需要为Parceljs配置一些东西来导入目录的内容

我正在尝试设置我的gulpfile.js文件，其中包含“scss到css转换”/“watcher/live reload”等功能 // Variables var gulp = require('gulp'); var plugins = require('gulp-load-plugins')(); var source = './src'; var destination = './dist'; var browserSync = require('browser-sync'); // S

我把VSCode设置搞砸了，现在无法恢复SCSS格式。它既不适用于Vue SFC也不适用于普通SCSS文件。我已经安装了Vetur，没有比它更漂亮的了。 以下是我的VSCode设置： { "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.codeActionsOnSave": { "source.fixAll":

我想知道是否有办法通过特定变量的值包含mixin（指南针或我自己的） 目前，我有以下mixin（有效） 我想把它转换成下面的代码（或者其他更短、更可读的代码） 我使用的是Sass 3.4.5（选择性Steve）Sass文档对插值有如下说明： 您还可以在选择器和属性名称中使用SassScript变量 使用#{}插值语法 没有关于在mixin或函数中使用它们的内容。但是没有什么可以阻止您将自己的供应商循环添加到mixin，而不是使用compass mixin。像这样： @mixin aligned-

我正在一步一步地走下去 我已经安装了所有设备，当我输入终端“scss lint”时，似乎工作正常 然而，我希望这是在咕噜运行 Grunfile： scsslint: { allFiles: [ 'src/scss/**/*.scss', ], options: { bundleExec: true, config: '.scss-lint.yml',

我希望在我将输入放入SassMesister时提供此输出： .brand-kampagne-klick, .brand-kampagne-klick-1 { margin-top: 3rem; } .brand-kampagne-klick img, .brand-kampagne-klick-1 img { width: 100%; } .brand-kampagne-klick .beispiel-brand-kampagne, .brand-kampagne-klick-1 .be

我希望能够检查两种颜色的对比度，并在对比度低于某个阈值时发出警告。这是我的密码： @function contrast-check($color1, $color2, $threshold: 4.5) { @if contrast($color1, $color2) < $threshold { @warn 'contrast #{$contrast} between #{$color1} and #{$color2} too low!'; } } @函数对比度检查（$c

当我第一次开始使用Bootstrap时，我通常会使用类内联布置网格。不管出于什么原因，在我看来，它更容易阅读等等 现在，我已经开始更多地使用sass mixin。例如： body.archive #secondary { @include make-col-ready(); @include make-col(12); @include media-breakpoint-up(lg) { @include make-col(4); } } 关于性能，是否有理由使用一种方

试图抓住Grav，使用默认Quark主题的最小值（或者在我理解的早期阶段，基本上是复制）从头创建了一个全新的主题 我已经准备好了基本文件和文件夹，但我正在努力弄清楚我该做什么，以使SCSS编译工作正常 我正在安装Plesk的CentOS 7 Linux服务器上工作 我知道在Grav中可能有不同的主题制作方法，但在我学习系统的同时，我希望我的自定义主题能够像Quark主题一样工作。我已经在主题文件夹中设置了scss文件夹以及css compiled文件夹，以便将已编译的css移动到其中 我在下面附

我已经少用了很多年了，我只是在尝试SASS。我有一个非常基本的问题，所以我希望有人能帮助我 我想要实现的是： 文件theme.scss（编译成theme.css）包含单独的组件（用于标题、导航、字体等） 定义组件中重复使用的品牌颜色等变量 我已经让它与@import一起工作，但因为它（将被）弃用，我想用@use来代替它。根据这一点，这应该是可能的 我的文件设置如下： |- style |- _definitions.scss |- theme.scss |- compone

我正在使用@import url（）开发一个Vue应用程序，我的嵌套样式如下图所示。我发现，当我使用external.scss时，这就是为什么我的样式没有转换为css，但我不明白为什么？以及该怎么办。 下面是我的代码 li{ border-bottom: 1px solid #eaeaea; background: #fff; a{ div{ border: 1px solid red; } } } 编译时也没有错误。看起来您在htm