0
Я хочу, чтобы создать пользовательский значок-бар, я прочитал, что мне нужно создать файл «_icon-bar.scss» и включить этот код внутри:как переопределить настройки файла основы
@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";
Кроме того, я понял, что мне нужно собрать компас, прежде чем подножка программу. I судимый запустить этот код в ЦМДЕ: 1. Садитесь в мою папку проекта -> фундаментного ЦСИ 2. компаса компилировать
после компиляции я получаю эту ошибку:
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.
Я судимая для удаления этой строки в моем файле «_icon-bar.scss», и я получаю ту же ошибку во второй строке в этом файле,
что не так в моем переопределении?
Вместо @ import "_icon-bar"; вы хотите @import "icon-bar"; (нет подчеркивания) –
Я сделал это, но ошибка все еще существует .. – foo
У вас есть еще одна идея? – foo