SCSS
{{#markdown}}
```scss
.custom-prefix-class {
@include prefix-postfix-base();
@include grid-column(
$columns:3,
$float:left
);
}
input[type="text"].custom-input-class {
@include grid-column($columns:9);
}
```
{{/markdown}}
{{#markdown}}
```html
```
{{/markdown}}
##### Prefix & Postfix Style Mixins
We use this mixin to create prefix label styles
SCSS
{{#markdown}}
```scss
.custom-prefix-class {
@include prefix-postfix-base();
@include prefix(
// Control the background color, which also effect the border and font color. Default:$input-prefix-bg (scale-color(#fff, $lightness: -5%))
$bg: $input-prefix-bg,
// Toggle position settings if prefix is a button. Default:false
$is-button: false
);
@include grid-column($columns:3,$float:left);
}
input[type="text"].custom-input-class {
@include grid-column($columns:9);
}
```
{{/markdown}}
HTML
{{#markdown}}
```html
```
{{/markdown}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file: