0
I benutzerdefinierte Symbol-Leiste will außer Kraft setzen erstellen, habe ich gelesen, dass ich innerhalb dieses Code „_icon-bar.scss“ Datei und schließen zu erstellen:wie Einstellungsdatei Grundlage
@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
);
}
dieser Code ist einfach Code, um die Foundation-Symbolleiste zu überschreiben.
Dies ist die app.scss Datei:
@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";
Auch sah ich, dass ich den Kompass kompilieren müssen, bevor das Programm runing. tryed ich diesen Code in cmd auszuführen: 1. get in meinem Projektordner -> Grund src 2. Kompass
kompilierennach der Kompilierung bekomme ich diesen Fehler:
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.
Ich habe versucht haben um diese Zeile in meiner Datei "_icon-bar.scss" zu löschen, und ich bekomme den gleichen Fehler in der zweiten Zeile in dieser Datei,
Was ist falsch in meinem überschreiben?
Anstelle von @ importieren "_icon-bar"; du willst @import "icon-bar"; (kein Unterstrich) –
Ich habe es aber der Fehler ist noch vorhanden. – foo
Hast du noch eine Idee? – foo