我想创建自定义图标栏，我读到我需要创建＆＃34; _icon-bar.scss＆＃34;文件并将此代码包含在内：
@import "foundation/components/icon-bar";
$include-html-icon-bar-classes: $include-html-classes
// We use these to style the icon-bar and items
$include-html-icon-bar-classes: $include-html-classes
// We use these to style the icon-bar and items
$icon-bar-bg: $oil;
$icon-bar-font-color: $white;
$icon-bar-font-color-hover: $icon-bar-font-color;
$icon-bar-font-size: 1rem;
$icon-bar-hover-color: $primary-color;
$icon-bar-icon-color: $white;
$icon-bar-icon-color-hover: $icon-bar-icon-color;
$icon-bar-icon-size: 1.875rem;
$icon-bar-image-width: 1.875rem;
$icon-bar-image-height: 1.875rem;
$icon-bar-active-color: $primary-color;
$icon-bar-item-padding: 1.25rem;
$icon-bar-disabled-opacity: 0.7
.my-custom-class {
@include icon-bar(
// Set the background color of the icon bar. Default: $icon-bar-bg.
$bar-bg: $icon-bar-bg,
// Set the font color of the icon bar. Default: $icon-bar-font-color.
$bar-font-color: $icon-bar-font-color,
// Set the hover background color for the icon bar. Default: $icon-bar-hover-color.
$bar-hover-color,
// Set the color of the icons for the icon bar. Default: $icon-bar-icon-color
$bar-icon-color: $icon-bar-icon-color,
// Set the background of the color when the icon bar is clicked or tapped on (or items within the icon bar). Default: $icon-bar-active-color.
$bar-active-color,
// Set the padding for icon bar. Default: $icon-bar-item-padding.
$padding,
// Set the font-size of the icon bar. Default: $icon-bar-font-size.
$font-size,
// Set the size of the icons within the icon bar. Default: $icon-bar-icon-size.
$icon-size,
// Set the width of images within the icon bar. Default: $icon-bar-image-width
$image-width,
// Set the height of images within the icon bar. Default: $icon-bar-image-height
$image-height,
// Assign whether or not base styles usually associated with the icon bar to appear the way it usually does should be included. Default: true.
$base-style: true,
// Allow disabled icons. Default: false.
// If enabled add class disabled.
$disabled: false
);
}
此代码是覆盖基础图标栏的简单代码。
这是app.scss文件：
@import "settings";
//@import "foundation";
@import "_icon-bar";
// Or selectively include components
// @import
// "foundation/components/accordion",
// "foundation/components/alert-boxes",
// "foundation/components/block-grid",
// "foundation/components/breadcrumbs",
// "foundation/components/button-groups",
// "foundation/components/buttons",
// "foundation/components/clearing",
// "foundation/components/dropdown",
// "foundation/components/dropdown-buttons",
// "foundation/components/flex-video",
// "foundation/components/forms",
// "foundation/components/grid",
// "foundation/components/inline-lists",
// "foundation/components/joyride",
// "foundation/components/keystrokes",
// "foundation/components/labels",
// "foundation/components/magellan",
// "foundation/components/orbit",
// "foundation/components/pagination",
// "foundation/components/panels",
// "foundation/components/pricing-tables",
// "foundation/components/progress-bars",
// "foundation/components/reveal",
// "foundation/components/side-nav",
// "foundation/components/split-buttons",
// "foundation/components/sub-nav",
// "foundation/components/switches",
// "foundation/components/tables",
//@import "foundation/components/tabs",
// "foundation/components/thumbs",
// "foundation/components/tooltips",
// @import "foundation/components/top-bar",
// "foundation/components/type",
// "foundation/components/offcanvas",
// "foundation/components/visibility";
我还看到我需要在运行程序之前编译指南针。 我试着在cmd中运行这段代码： 1.进入我的项目文件夹 - ＆gt;基础-SRC 罗盘编译
编译后我收到此错误：
error scss/app.scss (Line 7 of scss/_icon-bar.scss: Invalid CSS after "$icon
-bar-bg": expected selector or at-rule, was ": $oil;")
Compilation failed in 1 files.
我试图在我的＆＃34; _icon-bar.scss＆＃34;中删除此行。文件，我在这个文件的第二行得到了同样的错误，
我的最重要的是什么？
答案 0 :(得分：0)
你的代码中是否有$include-html-icon-bar-classes: $include-html-classes重复？好像它在文件中两次......
$include-html-icon-bar-classes: $include-html-classes
// We use these to style the icon-bar and items
$include-html-icon-bar-classes: $include-html-classes