Menu icon Foundation
Compass Error (Custom Button)

Hey,
i want to customize a button. When i try do save the app.scss file my terminal always says:

error scss/app.scss (Line 43: Undefined variable: "$padding".)

This is my custom button:

.custom-button-class {
@include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

// $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
$padding: 12px;
// Primary color set in settings file. Default: $primary-color.
$bg: orange;
// If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
$radius: true;
// We can set $full-width:true to remove side padding extend width. Default:false
$full-width: false;
// We can set $disabled:true to create a disabled transparent button. Default:false
$disabled: false;
// $is-input - 's and 's take on strange padding. We added this to help fix that. Default:false
$is-input: false;

I hope you can help me!

custombuttonexportfailserrorundefinedvariable

Hey,
i want to customize a button. When i try do save the app.scss file my terminal always says:

error scss/app.scss (Line 43: Undefined variable: "$padding".)

This is my custom button:

.custom-button-class {
@include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

// $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
$padding: 12px;
// Primary color set in settings file. Default: $primary-color.
$bg: orange;
// If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
$radius: true;
// We can set $full-width:true to remove side padding extend width. Default:false
$full-width: false;
// We can set $disabled:true to create a disabled transparent button. Default:false
$disabled: false;
// $is-input - 's and 's take on strange padding. We added this to help fix that. Default:false
$is-input: false;

I hope you can help me!

This post has been closed. No new replies can be added.

Roland about 5 years ago

I think the error message is clear, undefined variable. Make sure you define the variable before using it. Sass needs to be able to read the variable before it parses your class.

It would help to see your file and file structure...

Jonas Marlo Loerken about 5 years ago

Sorry I'm a newbie. How can u define the variable?

This is my app.scss:

@import "settings";
@import "foundation";

// 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/switch",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";

.custom-button-class {
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

// $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
$padding: 12px;
// Primary color set in settings file. Default: $primary-color.
$bg: orange;
// If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
$radius: true;
// We can set $full-width:true to remove side padding extend width. Default:false
$full-width: false;
// We can set $disabled:true to create a disabled transparent button. Default:false
$disabled: false;
// $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false
$is-input: false;


Tony Stark about 5 years ago

Hi
Actually define variable after @include command, so you getting error.
your custom function should be like this:

// $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
$padding: rem-calc(12);
// Primary color set in settings file. Default: $primary-color.
$bg: orange;
// If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
$radius: true;
// We can set $full-width:true to remove side padding extend width. Default:false
$full-width: false;
// We can set $disabled:true to create a disabled transparent button. Default:false
$disabled: false;
// $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false
$is-input: false;


.custom-button-class {
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

No any output error:

>>> Change detected at 12:40:45 to: app.scss
identical stylesheets/app.css