例如，如果 $site\u name是汽车，或船只，然后类似 #{$site_name}-product-list background: #ffc 这将成为 #cars-product-list background: #ffc // this is still SASS, but the CSS will be like this #cars-product-list background: #ffc 在SASS中可能吗？（我们没有使用SCSS，所以正在寻找S

我正在尝试在Chrome canary中设置映射功能。我跟着截图走了进去 主要功能起作用了，当我检查一个元素时，它会指向我的本地sass文件，当我编辑它时，本地文件会安全，并且会触发“sass--watch”。但是，即使在devtools中的“常规”选项卡上，我选中了“Sass保存时自动重新加载CSS”，浏览器也不会刷新 浏览器应该重新加载吗？有没有办法让它重新加载 Ps-我有指南针，但我不能使用它，因为它不支持映射，所以我通过终端编译sass 谢谢我通过安装Extension解决了这个问题，现

我不确定这是一个bug还是配置错误，但当使用grunt查看一些sass文件时，它肯定会查看这些文件，但仅在我退出监视程序时编译sass并更新目标文件 这是我的手表节点： watch: { sass : { files: [sassPath.scss], tasks: ['sass'] } } 例如，这就是当前发生的情况： 1. I do `grunt watch` on the command line 2. Start editing sas

我正在使用它，它有一个grunt任务，似乎无法处理一些scss文件。我得到这个错误： Warning: LoadError on line ["1"] of /Users/antonioortiz/Sites/_aortizRefresh_/app/_bower_components/refills/lib/refills.rb: cannot load such file -- refills/import_generator Run with --trace to se

我刚刚用ruby 2.1.2安装了'foundation'（v.1.0.4）gem，我想使用sass语法而不是scss创建一个项目。我本以为用于创建新项目的“foundation”命令会提供一个“-syntax sass”选项，但似乎它唯一的选项是： 选项： [--libsas]，--no libsas] [--version=version] 令人惊讶的是，我找不到任何有关“foundation”命令的文档，该命令允许我使用sass语法创建一个新项目。就像sass语法刚刚从地球上消失了一样呵呵

我正在尝试学习如何在中使规则静音（特别是emptylinebetween blocks） 例如，我可以在终端中运行scss lint--list rules，在输出中找到我不喜欢的规则，并将其添加到sublimiter.sublimite-settings中的ignore数组中（如下所示） 对于SCSS，似乎没有类似的方法在终端中查找规则名称，并且在Sublime Linter设置中也没有SCSS lint对象。那么…这是怎么做到的 多谢各位 这是我找到的一种方法 我在我的主目录（~/）中创建

由于典型的默认浏览器字体大小为16像素，因此需要计算网格大小。如果希望基本字体大小不同且不影响网格断点，请将$rem base设置为$global font size，并确保$global font size为像素值 我照写的做，我的12列网格是1050而不是1200px。这是rem-calc（）的问题吗？这可以通过某种方式修复或绕过 它不是重复的，类似主题的任何响应都没有帮助。奇怪：函数rem-calc（）位于\u unit.scss文件中，并采用默认值$rem base值，但不是我定义的值。

我想制作sass——观察将相同的sass编译成2个位于2个不同位置的相同css文件 例如 有什么想法吗？sass——监视样式。scss:path/to/file1.css样式。scss:path/to/file2.css 这是创建两个观察者并将两个文件输出到给定的文件夹中 示例输出 sass --watch style.scss:path/to/file1.css style.scss:path/to/file2.css >>> Sass is watching for cha

是否可以像使用参数一样为@content定义默认值 例如： @mixin foo { @content: width:100%; } 试试这个： @mixin foo($content: 100%) { width:$content; } 或者这个： @mixin foo() { $content: 100%; width:$content; } 不，@content不是变量。不能为其设置默认值。您不能操纵或检查它 如果Ale

我一直在查看文档并检查其他人的问题，但我找不到简单的答案，即如何将我的所有sas编译成一个简单的css文件，并指定我希望生成的css文件输出到的目录 对于快速上下文： 我有一个公共目录，其中有一个样式表目录和一个构建目录。webpack将应用程序编译成build，我想让sass将style.css编译到stylesheets目录中 这是我的公共目录的截图： <link rel="stylesheet" href="/stylesheets/style.css" /> 我希望能

如何编译SASS文件并让它输出json文件中每个变量的所有最终值 我以前也问过类似的问题，这里有人认为我是想让你们做我的工作。在我走上一条最终是浪费时间的道路之前，我只是想看看这是否可能。如果可能的话，我不知道该怎么开始 我的CMS主题构建在引导sass和其他sass框架上，我希望我的CMS能够访问我们在sass文件中使用的变量。在我看来，如果在编译SAAS文件时，我得到了一个CSS、MAP和JSON文件，那么我就万事大吉了 我可以把它写成某种混合体，但即使这样，我也需要能够 所有变量的列表 将

我需要sass中的if语句，如so： @each $name, $char in $font-icons { @if ($name ends with "-outline") { //do something } } 有什么方法可以做到这一点吗？不完全是您想要的，但我认为它与Sass尽可能接近 使用str索引（$string，$substring）可以发现$name是否包含-outline： @每个$name，$char字体图标{ @if（str索引（$name

既然有了上面的代码，为什么网格堆叠而不是并排显示？如果我从flex-grid-column（）中删除4，则会像我预期的那样显示为。4个占用了所有可用空间，但如果我指定了多少列，为什么不呢？标记看起来正确，在我的flex项目中效果很好。 您可以确保在app.scss中设置了flex grid [] 和 < P>通过NPM 导入基础，导入“NoDyMease/BaseStudio/SCSs/Base.SSCS”；然后我需要@包含基础所有内容（true）将true开关传递给flexbox 我在这个页面

我目前正在处理以下问题（注意：实际的mixin有点复杂，我已经简化了它们，但我确实希望使用mixin实现这种方法） 我有一些断点的混入： @mixin sm { @media (max-width: 740px) { @content; } } @mixin lg { @media (min-width: 741px) { @content; } } 我用这个mixin将边距应用于一个元素（实际的mixin有点复杂） 所以基本上，

我有以下SCS .mat-tab-label { &:focus { background-color: #1976d2 !important; color:white; } } .mat-tab-label-active { background-color: #1976d2 !important; color:white; } 两个选择器需要相同的属性，但如何删除重复项？变量只存储单个值。查看sass基础 搜索扩展/插入部分和混合部分。两者都提供了跨sass

我正在尝试这些CSS动画浏览器前缀的SCSS混音，但它输出的是文本$animation\u name，应该输出CSS中$animation\u name的实际值。如何将实际值输入CSS输出 SCSS： CSS输出（注意代码中的文字$animation\u name） 这是我的建议 检查中的CSS以查看其输出的CSS似乎可以解决问题： SCSS： CSS输出： @-webkit-keyframes inFromTop { from { margin-top: -100%; }

CodePen不想根据我对.scss文件所做的更改来更新我的.css。它得到了我做的第一组更改，但此后没有任何更改。这是密码笔： 下面是styles/index.scss文件的内容 /** * index.scss * - Add any styles you want here! */ body { background: #f5f5f5; width:70%; } #intro { background-color:#C43835

像许多开发人员一样，我使用SASS作为预处理器。我想用Chrome编辑我的样式表。我已经设置了源地图来实现这一点，我知道Chrome现在支持SASS 我有一个SASS文件，style.scss，用于创建页面上使用的style.css。它主要是导入其他SASS文件。例如： @import "colors"; 单击导入的SASS文件，如\u colors.scss，它会显示一个绿色的“活动”图标，并显示它链接到源地图 但是，当我编辑SASS变量时（如下面屏幕截图中的$深蓝色），我将其改为红色-文件

如何将计算结果输出到内容 例如： @for $i from 1 through 8 { .list-el { $test: calc($i * 10); &:before { content: '#{$test}'; } } } 上面只输出计算值calc（$i*10），而不是结果。我希望看到一个列表：10、20、30、40、50、60、70、80只需删除“calc（）” calc不在Sass中计算

我的sass或css文件正在渲染，我遇到了这个池回退错误 有人知道这个错误是什么意思吗 carlagoncalves:~/workspace (master) $ node server.js server running.... ^C carlagoncalves:~/workspace (master) $ node app.js carlagoncalves:~/workspace (master) $ sass --watch styles.scss:s

我用Sass来表示风格。当我尝试编译这部分代码时： .heart { width: $size * 2; height: $size * 1.65; cursor: pointer; &:before { position: absolute; content: ""; left: $size; width: $size; height: $size * 1.65; background: #fff; border

假设我有以下HTML代码： <div class="parent"> <div class="parent__son parent__son--red"></div> <div class="parent__son parent__son--yellow"></div> <div class="parent__son parent__son--red parent__son--yellow" ></d

我想根据颜色的单个HSL值以编程方式调整样式。具体来说，如果背景颜色足够暗，那么我希望自动将文本颜色更改为白色，反之亦然 我试图实现的伪代码类似于 @mixin text-color($color) if lightness of $color > 127 color: #000 else color: #fff 混合使用： .something { background-color: $blue; @include tex

我已经将布尔变量设置为false，点击按钮我想在scss文件中更改其背景色。但显示变量似乎未设置为true on:active，如何实现此功能 这是我的scss文件 $display : false; .bot { &:active { $display: true; display: none; } } @if $display { .bot { background-color: brown; } } 这是我的html文件 <

我试图修改包含另一个类的：：before标记 HTML <div class="foo active"> <div>...</div> </div> SCSS .foo { &:before { content: ""; border-top: 3px solid $grey; width: 50%; transform: translateY(-10px); &:first-child {

我刚刚创建了一个干净的Vue CLI 4项目，并通过Vue CLI添加了Vuetify。在这一步上，一切都顺利进行。 通过添加变量.scss问题出现： $grid-breakpoints: ( 'xxs': 0, 'xs': 375, 'sm': 600px, 'md': 960px, 'lg': 1280px - 16px, 'xl': 1920px - 16px, 'xxl': 2560px - 16px ); 我编写了一个简单的3列模板： <v-row&

为将像素转换为rem而编写的SCSS函数会在值和单位之间生成一个空格。如何避开空间。URL中提到的详细信息如下所示 JSFIDLE domain+/9pe5a1kx/1/使用此函数： @function px2em($px, $metric: 'em', $base-font-size: 16px) { @if unitless($px) { @warn "Assuming #{$px} to be in pixels, attempting to convert it i

我试图使用Susy Compass框架将2个div向右浮动，但出现了一个清除问题： <div class="div-1"> <h2>DIV 1</h2> </div><!--end div-1--> <div class="div-2"> <h2>DIV2</h2> </div><!--end div-2--> <div class="div-3">

我有一个SCSS规则集，看起来有点像这样： .thing { div { // rules } } .thing div { // rules } .deactivated .thing div { // override for when it's in body.deactivated } .thing { div { // rules } } .deactiviated { .thing { div { // othe

大家好 我一直在研究奇点网格框架，到目前为止，我非常喜欢它的简单性和概念/心智模型。然而，和其他人一样，我仍然对如何在奇点中正确地进行嵌套网格感到困惑。在研究了类似的问题之后： 我给出了以下创建嵌套网格的示例：一个仅使用网格span，另一个使用布局和网格span： 正如您所见，虽然使用layout方法感觉更好，但它们实现了相同的最终结果。考虑到这一点，我的问题有两个方面： 是否有“最佳/推荐做法”用于创建具有奇点的嵌套网格 当使用网格跨度与布局时，为什么背景网格在相同元素上绘制

我是否可以利用sass中的静态类来根据定义的颜色变量设置子元素的样式 假设我有一个名为red的类，我想定义一个名为$color:classname或$color:#ff0000基于该类 如果类为红色，则定义一个具有自定义颜色的现有变量，以便根据容器上的类在scss文件中的任何位置重用该变量 请注意，我需要的颜色数量有限，可以在sass中定义它们。如果我理解并纠正了您的问题，您可以使用红色类，并在需要时扩展该类 $red: #FF0000; .red { color: $red; } .d

我想创建如下目标： grunt/sass.js： "严格使用",； module.exports={ 阿尔法：{ 选项：{ 包括路径：['bower_组件/基础/SCS'] }, 地区：{ 选项：{ outputStyle:“压缩” }, 档案：{ “css/app.css”：“scss/app2.scss” } } } }; Grunfile.js： module.exports=函数grunt{ 需要'load-grunt-config'grunt； }; 我不能让它正常工作。只有当我将sa

指南针的配置属性描述非常模糊。绝对不清楚，没有任何额外的解释或示例。这是： 这两者有什么区别 css_dir - ...where the css stylesheets are kept css_path - ...where css stylesheets are kept http_stylesheets_path - ...http path to stylesheets on the web server 这些呢 sass_dir - ...where the sass styles

我只是想像在文档中一样用.scss文件编译整个目录，但是我得到了一个错误，我做错了什么 命令是：sass-scss:public/main.css，但我得到以下错误： Errno:EISDIR:是一个目录@rb_sysopen scss Use--trace for backtrace Sass文档中没有显示使用Sass命令进行编译的这种用法。不能将目录编译为单个文件 您还可以告诉Sass查看文件并每次更新CSS Sass文件更改： sass --watch input.scss:output.

我最近一直在使用prepos，它会自动执行一些魔术，决定改用Gulp，我想我有麻烦了 我有多套scss文件，例如： mixins.scss（我在这里存储所有的mixin） variables.scss（此处为变量） colors.scss（和颜色） base.scss（我的应用程序的基本样式） app.scss（我在这里输入混音、变量、颜色和基色-按顺序） 现在，Prepos的工作原理是这样的——首先将所有文件导入app.scss，然后生成漂亮的app.css文件，既简单又无痛 我假设Gulp试

我的目标是使用onescss文件和n个资产部分来创建n个css样式表，同时使用gulpruby-sass 以下是我的目录结构示例： - project_folder gulpfile.js - css _asset.scss style.scss “gulpfile.js”中包含以下内容： var gulp = require('gulp'); var sass = require('gulp-ruby-sass'); gulp.task('build',

嗨，我有一个网站设置。但是，我无法让jekyll将我在sass文件中所做的实际更改编译为每个文章帖子的css文件 我需要在我的吞咽文件中添加一些东西吗？我以为jekyll会自动将sass样式编译成css，而不需要在gulp中实现它？还是package.json 我使用gulp命令让sass工作并编译网站布局css文件夹，但是在文章部分和帖子中，当我更改每个文章的sass样式文件时，什么都不会发生，我必须直接编辑实际的css文件以查看更改 我遗漏了一些东西这是我的代码 { "name": "b

如何在Sass中创建“变体类”？例如： .bookshelf { color: brown; height: 100px; .panel { trimmed: no; height: 10px; } .door { height: 100px; .knob { shape: circle; height: 10px; }

我和SCS在GoDaddy上有问题。我在Codepen上创建了一个简单的网页，并将其全部移动到GoDaddy，但我无法让CSS工作，因为我不知道如何导入SCS 你能导入它吗？因为它是编译器，而不是库…？来自： 它将获取预处理的Sass文件，并将其保存为普通CSS文件，您可以在网站中使用该文件 实现这一点最直接的方法是在终端中。安装Sass后，可以从终端运行Sass input.scss output.css 因此，托管并不重要。您可以在构建时转换为CSS，然后将静态CSS文件与站点的其余部分一起

为了一个项目，我花了几年时间锁定在一个古老的技术堆栈中，终于有机会探索更多的最新框架，并深入了解React和Webpack。到目前为止，这在很大程度上是一次令人耳目一新和愉快的经历，但我在使用网页时遇到了一些困难，我希望蜂巢思维能够帮助解决这些问题 我一直在仔细阅读Webpack2.0文档，搜索得非常彻底，结果很短（我只找到了一个问题，很接近，但我不确定它是否适用）。由于缺乏信息，我认为我正在考虑以下两种情况之一： 我想做的是疯狂的 我想做的是基本的，不需要动脑筋 …然而，我在这里 我正在寻找的

我想为间隔设置几个类，如下所示： .spacing-top-20 { margin-top: 20px; } .spacing-top-40 { margin-top: 40px; } .spacing-top-60{ margin-top: 60px; } //and so on... 有没有可能让SCS以某种方式生成多个非常相似的类？我知道这将是一个很好的使用mixin的案例，但是您仍然会为您想要的每个间距写下它。您可以使用@for指令： @for $i from 1 to

我想更改UI组件主题颜色 我认为我的代码可以优化（因为它是重复的），并且很容易为将来添加新的主题颜色xxx。例如主题颜色蓝色或主题颜色绿色 但我不知道该怎么办。也许我可以用@做什么的 $pink:#FF768C； $orange:#FF9F00； $themeColor:#fff！违约 $rootSelector:&； $imagePath:“../../../images”； @每一个$name在北云、怀云、男孩、女孩、箭一样的粉红色、箭一样的橙色{ .icon-#{$name}{ 背景图片：

谁能帮我解释一下吗？我对使用Sass是个新手。但我不明白为什么人们在可以通过终端运行的情况下使用sass文件的编译器。不久前我在学习sass时也遇到了同样的问题 我一直在想，为什么大多数教程都涉及使用GRUNT/GULP或某种任务运行程序，而sass专有命令甚至用于使用以下命令实时查看您的文件： sass --watch app/sass:public/stylesheets 我将在这里引用我自己的话（没有人回答），只是为了分享我在SASS编译方面的经验： Grunt：使用Grunt cont

我使用cli创建了一个新的Aurelia，并为CSS处理器设置了SCS，为bundler设置了webpack。我的问题是SCS似乎被忽视了，我不知道为什么 我在project/src/styles/styles.scss中有一个文件 在aurelia.json文件中（我添加了源属性） 您是否在任何组件中导入了scss文件？我认为您可以通过将这一行添加到app.ts文件（或您正在使用的任何启动组件）来实现 导入“app.scss” 在模板中要求它也应该起作用，这里提供了对这两种方法的讨论：该链接将

升级到macOS Catalina后，我的Sass gem停止工作。最初，我是使用gem install sass安装它的，但现在它没有出现在gem列表下。我读了另一篇文章，其中建议使用Homebrew在~目录中重新安装Sass，但在尝试之前，我想检查一下是否确实需要 当我导航到我的/Library/Ruby/Gems/文件夹时，我可以在以下位置看到Sass： /Library/Ruby/Gems/2.0.0/Gems/sass-3.4.23 /Library/Ruby/Gems/2.3.0/G

我正在尝试在svelte 3中使用SCS，我已经完成了本文中的步骤： 但我一直收到一个语法错误 “冒号应为Svelte（css语法错误）” 在这样的代码中： <style type="text/scss"> #container { display: flex; /*error in the div below*/ div { background: red; } } #容器{ 显示器：flex； /*下面的div中有错误*

我对sass有点新，但当我学习它时，sass网站说开始使用@use而不是import，所以经过大量的尝试和错误，我终于知道了如何使用它，与import几乎相同 注意：我正在使用预印本进行编译。 我把这个mixin放在mixin文件夹中自己的文件中： // scss/mixins/_flex.scss @mixin flex($flex-flow: row, $justify-content: center, $align-items: center) { display: flex;

使用以下CSS： .notice--info::before { position: relative; font-family: "Font Awesome 5 Free"; font-weight: 900; top: .5em; left: 0; color: #ff980052; content: "\f071 "; font-size: 4em; vertical-align

我有一个使用sass的html+js项目。只要我不想使用--watch模式，效果就很好。运行后： sass——观看main.scss:main.css 错误是： sass --watch main.scss:main.css >>> Sass is watching for changes. Press Ctrl-C to stop. LoadError: cannot load such file -- sass-listen Use --trace for backtr

我正在尝试使用SCSS实现以下结果。我可以用CSS来做这件事 .header__top-nav, .header__main-nav { display: flex; } 我曾尝试使用以下代码（下面的示例），但它不起作用。请有人帮我找到解决办法 .header { &__top-nav, &__main-nav { display: flex; } } 对我来说很好。请描述一下你这边到底出了什么问题。你得到了什么结果？您使用的是什么SCSS