---
## Importing
-
+
All of Foundation's Sass utilities are in the folder `scss/util`, and broken up into multiple files by category. You can import every utility file at once using this line of code:
```scss
backface-visibility: hidden;
z-index: 1;
- @if hasvalue($maincontent-shadow) {
+ @if has-value($maincontent-shadow) {
box-shadow: $maincontent-shadow;
}
}
color: $input-prefix-color;
border: $input-prefix-border;
- @if hasvalue($input-prefix-border) {
+ @if has-value($input-prefix-border) {
&:first-child {
border-#{$global-right}: 0;
}
box-shadow: $input-shadow;
border-radius: $input-radius;
- @if hasvalue($input-transition) {
+ @if has-value($input-transition) {
transition: $input-transition;
}
outline: none;
box-shadow: $input-shadow-focus;
- @if hasvalue($input-transition) {
+ @if has-value($input-transition) {
transition: $input-transition;
}
}
url
color;
- @if not hasvalue($types) {
+ @if not has-value($types) {
$types: $all-types;
}
/// @group functions
////
-/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
+/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list. **This function was originally named `hasvalue()`. The old name for the function will be removed in Foundation 6.1.**
///
/// @param {Mixed} $val - Value to check.
///
/// @returns {Boolean} `true` if `$val` is not falsey.
-@function hasvalue($val) {
+@function has-value($val) {
@if $val == null or $val == none {
@return false;
}
@return true;
}
+// Remove this in 6.1.
+@function hasvalue($val) {
+ @warn 'The function hasvalue() was renamed to has-value(). The old function name will be removed in Foundation 6.1.';
+ @return has-value($val);
+}
+
/// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.
///
/// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"
@include describe('Has Value') {
@include it('returns false if the value is not falsey') {
- $boolean: hasvalue(true);
- $number: hasvalue(1px);
- $color: hasvalue(#000);
- $list: hasvalue(1px solid black);
+ $boolean: has-value(true);
+ $number: has-value(1px);
+ $color: has-value(#000);
+ $list: has-value(1px solid black);
@include should(expect($boolean), to(be(true)));
@include should(expect($number), to(be(true)));
@include should(expect($list), to(be(true)));
}
@include it('returns false if the value is falsey') {
- $zero: hasvalue(0px);
- $null: hasvalue(null);
- $none: hasvalue(none);
- $empty: hasvalue(());
+ $zero: has-value(0px);
+ $null: has-value(null);
+ $none: has-value(none);
+ $empty: has-value(());
@include should(expect($zero), to(be(false)));
@include should(expect($null), to(be(false)));