Mixins
border-radius
Sets the values of the necessary rules of border-radius properties family.
Some values can be automatically set to 0 (zero) using
null (preferable) or its alias n.Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| $value * | list|string | — | Property value. |
| $direction | ?string | null | The keyword describing the list of properties to use. |
List of direction keywords:
| Keyword | Affected properties |
|---|---|
top | border-top-left-radius, border-top-right-radius |
right | border-top-right-radius, border-bottom-right-radius |
bottom | border-bottom-right-radius, border-bottom-left-radius |
left | border-top-left-radius, border-bottom-left-radius |
top-right | border-top-right-radius |
top-left | border-top-left-radius |
bottom-right | border-bottom-right-radius |
bottom-left | border-bottom-left-radius |
cross-left | border-top-left-radius, border-bottom-right-radius |
cross-right | border-top-right-radius, border-bottom-left-radius |
all | border-radius |
Example
@use 'more-sass' as more;
.element-one {
@include more.border-radius(1px 2px null 4px);
}
.element-two {
@include more.border-radius(10px, 'cross-left');
}
.element-one {
border-radius: 1px 2px 0 4px;
}
.element-two {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}