SASS变量不起作用
SASS（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS并提供了更多的功能和灵活性。SASS变量是SASS中的一种特性，用于存储和重用CSS属性的值。
SASS变量的定义使用$符号，后面跟着变量名和变量值。例如，定义一个主题颜色的变量可以这样写：
$primary-color: #ff0000;在SASS中使用变量时，可以通过引用变量名来替代具体的属性值。这样可以方便地在整个样式表中统一修改某个属性的值，提高代码的可维护性和重用性。例如，使用上面定义的主题颜色变量：
.button {
background-color: $primary-color;
}在编译生成的CSS中，上述代码会被替换为：
.button {
background-color: #ff0000;
}SASS变量的优势在于可以减少重复的代码，提高开发效率，并且使样式表更易于维护。通过修改变量的值，可以快速改变整个样式的外观，而无需逐个修改每个具体的属性。
SASS变量适用于任何需要重复使用的CSS属性值，例如颜色、字体、边距等。它们可以在整个项目中广泛应用，提供一致的样式和易于修改的样式主题。
腾讯云提供了云计算相关的产品和服务，其中与前端开发和CSS相关的产品是腾讯云CDN（内容分发网络）和腾讯云COS（对象存储）。CDN可以加速网站的访问速度，提供稳定的内容分发服务；COS提供了可靠的对象存储服务，用于存储和管理静态资源文件。
腾讯云CDN产品介绍：https://cloud.tencent.com/product/cdn 腾讯云COS产品介绍：https://cloud.tencent.com/product/cos
希望以上信息对您有所帮助！如果还有其他问题，请随时提问。
相关·内容
我正在尝试动态地更改我的应用程序主题颜色。我想从服务器获取对象，该对象包含JavaScript的颜色值，然后将这些值传递给sass变量。 我找到了很多关于这方面的文章，但下面的一些文章对我来说都不起作用： https://itnext.io/sharing-variables-between-js-and-sass-using-webpack-sass-loader-713f51fa7fa0 https://github.com/pmowrer/node-sass-json-importer#node-sass-json-importer Is there a way to import v
浏览 30提问于2020-01-10得票数 3
回答已采纳
1回答
我有一个与js共享sass变量的问题，我正在为我的项目使用Reactjs，我想分享一些与断点相关的sass变量，以便构建响应组件。我看到我们可以在.scss文件上使用:export{}表达式共享变量，我在.sass文件上尝试了相同的表达式，但它不起作用。在.sass文件中是否有与:eport{}相同的语法？
谢谢
浏览 3提问于2019-05-02得票数 0
我正在尝试引用基类来更改基于BEM修饰符的子类。 这在SASS中工作得很好，但我现在正在使用LESS。 这是粗鲁的参考..。https://css-tricks.com/the-sass-ampersand/ 这是不起作用的代码。 .s-body {
@self: &;
...
&__door {
...
&--state-past {
#{@self}__image {
...
}
}
}
&__image {
...
}
}
浏览 20提问于2020-10-23得票数 0
1回答
我今天遇到了sass的问题，我在命令行中输入的任何与sass相关的命令都不能工作，它输出的'sass是不被识别的……‘，甚至是sass -v。几天前还不错。我还进入了ruby文件夹，在那里我找到了一个“用Ruby启动命令提示符”，并在那里检查sass，但是在正常的命令行上不起作用。我最近还安装了Python，可能和它有冲突，我不知道。如果有人能掌握一些知识或知道如何解决这个问题，我将非常感激。谢谢!
浏览 3提问于2014-05-18得票数 0
回答已采纳
我可以覆盖所有项目的sass变量。我在文件src/sass/variables.scss中这样做。在此之前，我创建了sass文件夹和这个文件。正如我说的，它可以工作，我可以覆盖这个文件中的变量，整个项目。但我只需要覆盖组件所需的变量。我试着这样做：
<style lang="sass">
$btn-text-transform: lowercase //by default uppercase
</style>
此外，我尝试在变量之前或之后添加@import '~vuetify/src/components/VBtn/_var
浏览 2提问于2021-08-10得票数 3
1回答
你好，我知道这可能是一个重复的问题，但我已经尝试了所有我能在互联网上找到的东西，但都不起作用。
遵循此中的以下建议
在函数rgba()和rgb()中使用sass或css变量时，它们都不会反映任何更改。
--color: 1,60,255;
// usage
border: 1px solid rgba(var(--color), 0.4);
不起作用
border: 1px solid RGBA(var(--color), 0.4);
即使在大写字母之后也不起作用
border: #{'1px solid rgba(var(--color), 0.4)'};
sass插值也不起
浏览 215提问于2019-08-05得票数 0
它是SASS中的bootstrap 4-beta。
问题是如何在我的SASS应用程序中使用bootstrap颜色变量？为此，我所做的工作是：
color: $theme-colors(primary);
但这不起作用，并抛出错误。
任何帮助都是非常感谢的。
谢谢
浏览 0提问于2017-11-24得票数 3
1回答
我终于需要SASS var了，所以我第一次尝试让它们工作，但它们似乎没有加载，或者如果它们正在加载，它们就不会被翻译。 这是一个离子v1应用程序，使用离子CLIv6.10.1运行 这是我的gulpfile.js (Gulp v4)： var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');
var paths
浏览 18提问于2020-08-21得票数 2
2回答
吞咽罗盘压缩不起作用
、、、
运行Sass 3.4.3，Compass 1.0.1，Gulp 3.8.8和Gulp-罗盘1.3.1
gulp.task('compass', function() {
gulp.src('comp/sass/style.scss')
.pipe(compass({
sass: 'comp/sass',
image: 'dev/theme/images',
style: 'compressed'
})
浏览 2提问于2014-09-12得票数 6
2回答
我正在尝试使用sass嵌套功能来实现我的输出。
这是HTML代码：
<div class="title title--no-extra">
<div class="title-element"></div>
</div>
我需要使用sass嵌套特性创建以下CSS输出：
.title.title--no-extra .title-element {
// do something
}
到目前为止，这是我的sass，我之所以使用它，是因为我不想重复.title
.title {
&--no-e
浏览 0提问于2021-06-07得票数 0
我正在开发一个WordPress主题，并试图使用@use方法从另一个文件中使用sass，但它似乎不起作用。@import规则方法即将折旧，该如何解决？我有文件 //_brand.scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88); 然后 //footer.scsss
@use 'brand' as b;
.footer{
padding: 0px 5%;
background-color: b.$base-color;
} 在编译时，我得到了这个错误 Compilation Erro
浏览 152提问于2020-08-08得票数 1
回答已采纳
我正在尝试将NODE_ENV注入到sass文件中，这样我就可以对dev/prod env有不同的输出，并有一个包含类似以下条件的sass函数：@if (NODE_ENV == 'prod') {}
我的webpack.config看起来像这样：
module: {
loaders: [{
test: /\.scss$/,
loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_mo
浏览 2提问于2016-03-02得票数 8
sass 给出的例子不起作用，为什么？
@use "sass:map";
$font-weights: (
'regular': 400,
'medium': 500,
'bold': 700
);
map.set($font-weights, 'extra-bold', 900);
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
map.set($f
浏览 3提问于2021-01-27得票数 8
回答已采纳
3回答
在我正在工作的应用程序中，在对客户端进行呈现之前，我必须动态编译SASS (缓存系统即将到来，不要担心)。目前我正在使用，一切都很好。
这是我目前正在做的事情。为了简洁起见，删除了其他特定于项目的代码：
var sass = require('node-sass'),
autoprefixer = require('autoprefixer-core'),
vars = require('postcss-simple-vars'),
postcss = re
浏览 1提问于2015-06-30得票数 27
1回答
我想用导入器编译SCSS文件。
我的不起作用的代码：
var sassFilesMatchPatterns = [
'styles/default/components/badge/_settings.scss',
'styles/default/components/badge/_badge.scss'
]
var sass = require('node-sass');
sassFilesMatchPatterns.forEach(function (file) {
sass.render({
file: file
浏览 0提问于2016-11-18得票数 0
我尝试在ExtJS 4中使用SASS，但一些变量不起作用。
我的SASS配置：
# $ext_path: This should be the path of where the ExtJS SDK is installed
# Generally this will be in a lib/extjs folder in your applications root
# <root>/lib/extjs
$ext_path = "../lib/extjs"
# sass_path: the directory your S
浏览 0提问于2011-08-30得票数 1
我在.env文件中执行了以下操作: APP_ENV=production MIX_APP_ENV="${APP_ENV}“
在webpack.mix.js文件中: const APP_ENV = process.env.MIX_APP_ENV；
使用if else运算符，我检查了没有任何内容分配给APP_ENV变量。我需要做以下事情-根据环境的不同，将sass和js文件编译到特定的文件夹中。
我正在尝试执行以下操作，但都不起作用：
const APP_ENV = process.env.MIX_APP_ENV;
if (APP_ENV == 'dev' || APP_
浏览 0提问于2019-03-17得票数 3
我需要在Bootstrap (3.3.7) CSS中覆盖一些东西，所以我需要在我的所有其他样式之前加载引导。我理解这样做的方法，就是将其导入到文档顶部的应用程序的主styles.sass中。但当我这么做的时候
@import ./bootstrap.css
我得到：
ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Users/bradley/Work
浏览 3提问于2017-01-31得票数 2
回答已采纳
3回答
如何从HTML-预处理程序(Slim，HAML)直接访问存储在项目资产目录中的SASS变量和混合器？
我的意思是，怎样才能做到这样的事情：
// Ruby Slim
style
sass:
@import 'lib/vars'
body
background: $color
制作：
<style type="text/css">
body {
background: #fff
}
</style>
而$color是在lib/_vars.sas
浏览 8提问于2014-10-20得票数 2
回答已采纳
2回答
假设我有一个使用sass变量的现有代码库。
$sw-primary-1: #ccc;
这些类在各地都被使用，即
.lifecycle {
&.new {
background-color: $sw-primary-1:
}
}
}
有没有什么我可以做的，像这样一个大型的现有代码库，我知道想要根据身体上的不同类来改变这个调色板变量。
即body class="redesign"
我基本上想去的地方
.redesign {
$sw-primary-1: blue;
}
但是上面的方法不起作用，它仍然坚持使用原始的sass可变颜色。
浏览 0提问于2018-09-04得票数 0
这个代码不起作用是Sass：
$color1:
.App {
--color1: $color1;
}
为什么这是无效的语法？正确的语法是什么？
浏览 0提问于2020-08-01得票数 0
回答已采纳
1回答
我在安装sass时遇到了问题。我尝试了gem install sass，它不起作用，所以我尝试sudo gem install sass，但它仍然不起作用。我该怎么办？
PASs-iMac:~ user$ sudo gem install sass
ERROR: While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass
PASs-iMac:~ user$
浏览 0提问于2016-06-28得票数 0
2回答
我正在浏览，并且被困在这部分：
一旦安装了Ruby，就可以通过运行
gem安装sass
所以我打开命令提示符并输入
gem install sass
就像上面说的。但不起作用。我收到这条消息：
'gem' is not recognized as an internal or external command, operable program or batch file.
我几乎不了解命令行，但希望使用Sass。有人能帮我看看我做错了什么吗？
是的，我确实搜索过那些不懂命令行的人的教程。我只想出了一个Mac指南，这对我没有好处，因为我在Windows 8上，我的公司阻
浏览 3提问于2013-06-27得票数 1
回答已采纳
3回答
问题
关于重写!default变量--我有两个.sass文件：
main.sass
$variable: black
@import "_another_import.sass"
@import "_import.sass"
_import.sass
$variable: blue !default
body
background: $variable
在编译的CSS中，$variable解析为blue：
body {
background: blue;
}
但是，如果我在导入_import.sass样式表之前指定了覆盖变量值，Sass会
浏览 0提问于2018-02-24得票数 1
回答已采纳
1回答
我有一个包含以下内容的JSON文件：
{
"colors": [
{
"name": "red",
"hex": "#c33"
},
{
"name": "blue",
"hex": "#2f2"
},
{
"name": "green",
"hex": "#22
浏览 0提问于2016-01-07得票数 0
我正在尝试做一些类似于in sass的事情： provider-details {
position: absolute;
top: calc( #{$speciality-widget-top-offset} + #{$speciality-n-provider-details-gap} + #{attr(data-speciality-widget-height)});
left: auto;
right: $provider-details-right-offset;
bottom: $providers-
浏览 8提问于2021-10-22得票数 0
2回答
我希望得到一个可靠的答案，即是否可以根据另一个变量的值引用变量。这在PHP中是可能的(在其他语言中)。
示例(在Sass中)：
我想将边框颜色设置为$green (或$blue、$yellow等)，它们是从partial中包含的变量。我遍历了一个颜色名称列表，如下所示：
$colors = green, yellow, blue;
@each $c in $colors {
&.#{$c} {
border-color: $#{$c};
}
}
上面的代码(理想情况下)为.green、.yellow和.blue生成类，每个类的边框颜色分别设置为$green、$yel
浏览 0提问于2011-11-16得票数 3
如何使用Bootstrap-Sass更改RoR 3.2.3中的链接颜色。我曾尝试在我的custom.css.scss中添加规则，但它不起作用。我搜索并阅读了一些关于/vendors/assets/stylesheets/variables.css.scss的内容，但是这个文件没有出现在/vendors/../stylesheets目录中。有什么想法吗？
浏览 4提问于2012-04-27得票数 0
回答已采纳
3回答
我想在SASS中动态创建混入，根据列表中的每一项命名，但它似乎不起作用。
我尝试这样做，但得到一个错误：
$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@each $event-icon in $event-icons
@mixin event-icon-#{$event-icon}
background-position: -($event-icon-width * $i) 0
错误：
Invalid CSS after &
浏览 3提问于2013-04-02得票数 18
回答已采纳
4回答
我尝试过在netbeans上安装SASS。我遵循了以下教程：
在创建和尝试保存SASS文件时，我会得到以下错误，而没有创建CSS文件。
-缓存位置“"C:\Users\Leanne\AppData\Local\NetBeans\Cache\7.4\sass-compiler”"C:\Users\Leanne\Documents\work\freelance\sites\fws_templates\gamer\scss\store.scss“"C:\Users\Leanne\Documents\work\freelance\sites\fws_templates\ga
浏览 5提问于2014-03-26得票数 8
回答已采纳
4回答
我正在尝试将样式化的组件慢慢地引入到我现有的代码库中，它严重依赖于全局SASS变量(导入到main.scss中的部分)。
如何引用SCSS变量？以下内容不起作用：
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: $color-blue;
`;
export default Button;
我是不是走错路了？
浏览 0提问于2018-03-09得票数 14
回答已采纳
我对萨斯来说是个新手...我想创建一些带有百分比值的css，比如：
width : 13%;
该值是sass编号运算的结果。写这篇文章
width : $main-width + "%"
scss代码生成以下代码：
width : "13%";
css，实际上没有工作，因为它应该是：
width : 13%;
写作
width : $main-width %;
结果：
width : 13 "%"
这也会导致css规则不起作用。有没有办法让Sass打印出13%的纯文本，不带引号？
浏览 0提问于2012-03-25得票数 16
回答已采纳
我需要将两个来自SASS文件的变量添加到另一个变量中，并使用var()函数导入它们。 我有一个包含以下内容的root.module.scss文件： :root {
--app-padding: 16px;
--header-height: 72px;
} 和另一个home.module.scss文件，我需要在其中添加在前面的:root伪类中定义的变量： .home {
padding-top: var(--app-padding) + var(--header-height); // <-- this doesn't work, obviously
}
浏览 15提问于2021-07-18得票数 0
回答已采纳
我正在做的run项目使用的是SASS，它被编译成Grunt任务，grunt应该在NodeJS中运行。
我已经得到了这些指示，但它不起作用：
我安装了NodeJS (默认文件夹/设置)
然后我进入了CMD C:\Users\Ben\Desktop\officeincambridge>中的项目文件夹。
然后运行命令npm install -g grunt-cli和npm install grunt
如果我输入NPM version (在上面的目录中)，我会得到npm --version: 1.4.14，node --version: v0.10.29
然而，当我尝试使用grunt sa
浏览 0提问于2014-07-02得票数 2
回答已采纳
我正试着从吞咽转换到吞咽-scss，然而令人惊讶的是，它对我不起作用。我已经在下面的Git Hub中签入了我的代码。
"gulp“正在工作，因为它使用了gulp-sass模块。然而，"gulp scss“不起作用，因为它使用了"gulp-scss”。以下是我的任务。
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var scss = require("gulp-scss");
gulp.task(&
浏览 4提问于2015-06-04得票数 0
我刚刚下载了Jekyll来测试sass编译中的"jekyll serve -watch“功能，但它对我不起作用。"jekyll serve“不会观看任何关于sass变化的投票。有没有人有同样的问题？
我安装了jekyll 3.0.1，Python 2.7.5，Node 0.10.32，Sass 3.4.19，Compass 0.12.2。
$ gem install jekyll
$ jekyll new my-awesome-site
$ cd my-awesome-site
/my-awesome-site $ jekyll serve
我的"_config.yml
浏览 0提问于2015-12-03得票数 0
6回答
大家好！我想在Vaadin 7.1.0项目中使用Sass变量作为线性渐变背景，但由于某些原因它不起作用。代码：
$topBarDarkBlue: #5F7FB7;
$topBarLightBlue: #8EABE1;
.title {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue),
color-stop(100%, $topBarLightBlue));
background-image: -moz-linear-gradient(
浏览 5提问于2013-07-05得票数 4
我知道已经有这个话题了，但是，我写这篇文章的原因是其他的话题……
我在使用GIT命令"clone“时遇到了一个问题。CMD抛出一个错误，说“克隆不被识别为内部或外部命令，可操作的程序或批处理文件。”，所以我很自然地搜索了这个错误，并在这里找到了一些解决方案，我做了几个解决方案(因为没有工作)，现在什么都不起作用。我甚至不能启动SASS，因为它抛出了同样的错误："sass无法识别为内部或外部命令、可操作程序或批处理文件。“
那么，我该怎么做呢？
下面是我的path变量的SS：
我确信我现在已经worse...but了，我不知道该怎么做，除了重装windows。请记
浏览 0提问于2018-04-26得票数 0
我正在尝试预编译资产，但是我得到了下面的错误。问题出在gem中使用的css文件之一。如何解决这个问题？
rake aborted!
Sass::SyntaxError: Undefined variable: "$navbar-height".
完整日志：
rake assets:precompile
rake aborted!
Sass::SyntaxError: Undefined variable: "$navbar-height".
/home/zapbuild/.rvm/gems/ruby-2.2.0/gems/spree_backend-3.1.4/
浏览 0提问于2017-03-29得票数 2
我有非常小的hello world SCSS项目如下：
index.html
<h1 class="heading-primary">Hello world!</h1>
sass\main.scss
@import "base/typography"; //Line A
@import "abstract/variable";
sass/abstract/_variable.scss
$color-white: #fff;
$color-black: #000;
$color-red: red;
sass/base/
浏览 0提问于2018-01-28得票数 0
回答已采纳
将颜色修饰符类添加到Bulma的导航栏应该会改变背景颜色(如这里提到的：)。
如果我使用css版本，我发现这可以很好地工作。但我使用的是sass版本，它不起作用。
你知道为什么不吗？
注意--这也是Github上的一个未回答的问题：
浏览 2提问于2017-09-18得票数 3
我试图导入一个SASS部分从流星应用程序包SASS文件。
我的流星应用程序的结构如下
lib
client
stylsheets
_colors.sass
packages
example
lib
client
style.sass
现在我需要将_colors.sass导入到包的style.sass中。但进口不起作用：
_colors.sass
$gray: #ccc
style.sass
@import colors
#something
color: $
浏览 0提问于2016-05-23得票数 0
我是sass的新手，在下载了bulma，安装了gem和sass之后，我尝试用sass style.scss style.css编译一个默认的sass文件，这是我的目录结构
但我得到的错误如下：
/*
Error: Invalid CSS after "$pink": expected selector or at-rule, was ": #ffb3b3 "
on line 2 of styles.scss
1: $blue: #72d0eb
2: $pink: #ffb3b3
3: $orange: #FFA500
4: $fa
浏览 12提问于2017-02-23得票数 3
1回答
我已经在我的mac构建代理上安装了sass。附加批准:这是我的机器的输出
ep@ep2:~$ sass -v
Sass 3.3.8 (Maptastic Maple)
ep@ep2:~$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
Options:
-s, --stdin Read input from standard input instead of an input file
--
浏览 2提问于2014-06-09得票数 0
1回答
我用yeoman搭建了一个webapp项目。在获得sass文件夹结构设置后，我注意到sass变量不起作用。以下是我的sass文件夹结构：
|-styles
|- sass
|-base
|-_base.scss
|-_colors.scss
|-_font.scss
|-_normalize.scss
|-_index.scss
|-layouts
|-modules
|-vendors
浏览 2提问于2016-10-31得票数 0
回答已采纳
2回答
我用的是VS2015和Gulp。我打开Task Runner Explorer并点击刷新，这在日志中显示：
Failed to run "C:\Projects\Test\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
Error: `libsass` bindings not found in C:\Projects\Test\node_modules\gulp-sass\node_modules\node-sass\vendor\win32-ia32-11\binding.node. Try reinstalling `node
浏览 73提问于2015-07-09得票数 102
回答已采纳
我使用一个类似三元的语句来初始化Sass中的一个变量。这允许我将一些默认变量设置为使用的相同内容，但是如果我决定不包含一个Foundation模块，那么事情就不应该落在他们的头上。
$nav-link-icon-color: if( global-variable-exists($topbar-link-color), $topbar-link-color, #fff) !default;
在我升级到Sass 3.4之前，它一直工作正常。在那之后，我就开始得到这个错误：
error sass/style.scss (Line 20 of sass/partials/_navigation-ic
浏览 2提问于2014-08-20得票数 3
回答已采纳
我正在寻找一种方法来查看sass中的行错误。它一直在告诉我：
Warning: Running "sass:server" (sass) task Use --force to continue.
Aborted due to warnings.
但是grunt服务--trace不起作用，Gruntfile中的调整也不起作用
我使用的是yeoman webapp生成器
浏览 1提问于2014-11-14得票数 0
1回答
如何改变主题背景颜色？
、、、
默认的vuetify主题有非常有限的属性需要调整。
dark: {
primary: '#3739FF',
accent: '#101721',
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
我想控制所有的背景色。
我试了一下德米特里·卡尔托维奇的
浏览 0提问于2020-11-29得票数 4
回答已采纳
我正在开发一个vuejs应用程序，并尝试在sass-loader中使用prependData中的@use规则导入我的变量文件，但它似乎无法正常工作。使用@use导入不起作用，并且我收到关于变量的错误。但是使用@import一切都很顺利。我是不是做错了什么，或者对@use规则有了错误的概念？ 在prependData works中使用@import： css: {
loaderOptions: {
sass: {
implementation: require('sass'),
sassOptions: {
indentedS
浏览 143提问于2020-03-27得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
