本文介绍了设置SCSS颜色变量不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在SCSS中定义自己的颜色变量，但是如何?
I'd like to define my own color variables in my SCSS, but how?
我检查了此网站，并做了其中描述的所有内容.它不起作用.
I checked this website and did everything that is described there.. but it doesn't work.
我已经安装了预处理器！
I have installed a preprocessor already!
此外，我尝试创建一个颜色图并使用map-get访问颜色..也不起作用.
Furthermore I tried to create a color-map and access the color with map-get.. doesn't work either.
colors.scss文件
colors.scss file
$yellow_100: #FFC819;
带有colors.scss导入的style.scss文件
style.scss file with a colors.scss import
h1 {
color: $yellow_100;
}
我也尝试过:
colors.scss文件
colors.scss file
$colors: (
color: #FFBB00
);
style.scss文件
style.scss file
h1 {
color: map-get($colors, color);
}
它们都不起作用.
推荐答案
- 使用
npm -g install sass安装sass - 创建这两个源文件:
// _colors.scss
$yellow_100: #FFC819;
// style.scss
@import './colors';
h1 {
color: $yellow_100;
}
- 执行
sass ./style.scss ./output.css来编译代码 - 将
< link rel ="stylesheet" type ="text/css" href"[output.css]的路径"/>添加到HTML
- Execute
sass ./style.scss ./output.cssto compile your code - Add
<link rel="stylesheet" type="text/css" href"[path to output.css]" />to your HTML
这篇关于设置SCSS颜色变量不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！