how to write set of styles as a function in compass sass

Question

I've set of styles which I want to use in multiple places in my CSS.

Here is my function:

@function form-element-dimension{
        height: 34px;
        padding: 3px 10px;
        line-height: 18px;
        border: solid 1px #e2e7eb;
}

I will use this function anywhere in my .scss page like below:

.dataTables_length{
    select{
        form-element-dimension();
    }
}
---
---
.contact-form-style{
    input{
       form-element-dimension();
    }
}

How to do this in COMPASS SASS framework?

Answer 1

Although it's really not the best way to do what you're doing, this is how you'd achieve it with sass;

@mixin form-element-dimension {
  height: 34px;
  padding: 3px 10px;
  line-height: 18px;
  border: solid 1px #e2e7eb;
}

.dataTables_length {
    select {
        @include form-element-dimension();
    }
}

.contact-form-style {
    input {
       @include form-element-dimension();
    }
}