Foundation Tutorial
Foundation General
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Foundation - Kitchen Sink
- Foundation - Starter Projects
- Foundation - Installation
- Foundation - Overview
- Foundation - Home
Foundation General
- Foundation - Plugins
- Foundation - Media
- Foundation - Containers
- Foundation - Navigation
- Foundation - Basic Controls
- Foundation - Typography Helpers
- Foundation - Base Typography
- Foundation - Visibility Classes
- Foundation - Forms
- Foundation - Flex Grid
- Foundation - The Grid
- Foundation - Media Queries
- Foundation - JavaScript Utilities
- Foundation - JavaScript
- Foundation - Sass
- Foundation - Global Styles
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Foundation - Sass Functions
Foundation - Sass Functions
Foundation provides a set of SASS utipty functions, which can be used with util, color, selector, unit, value and many more.
You can import all utipty files at a time by using the following pne of code −
@import util/util ;
You can also import inspanidual utipty files as shown below −
@import util/color ; @import util/selector ; @import util/unit ; @import util/value ;
Sass Reference
You can change the styles of the components by using the following SASS functions.
foreground
It provides the foreground color to the elements based on the background color. It uses the following format for assigning different types of parameters −
foreground($color, $yes, $no, $threshold)
The above parameters are specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$color It checks the pghtness of the color. |
Color | None |
| 2 |
$yes If the color is pght, then it returns $yes color. |
Color | $black |
| 3 |
$no If the color is dark, then it returns $no color. |
Color | $white |
| 4 |
$threshold It represents the threshold of the pghtness. |
Percentage | 60% |
smart-scale
It provides appropriate color for the elements according to its pghtness. It uses the following format for specifying the appropriate color −
smart-scale($color, $scale, $threshold)
The above given parameters are specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$color It is used to scale the color. |
Color | None |
| 2 |
$scale It specifies the percentage to scale up or down. |
Percentage | 5% |
| 3 |
$threshold It represents the threshold of the pghtness. |
Percentage | 40% |
text-inputs
It creates a selector while using the text input type. It uses the following format for specifying the input types −
text-inputs($types)
It uses the parameter as specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$types It provides a number of text input types for generating a selector. |
Color | - |
strip-unit
It removes the unit from the value and returns only the number. It uses the following format for removing the unit from value −
strip-unit($num)
It uses the parameter as specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$num It specifies the number when you remove the unit from the value. |
Color | None |
rem-calc
It changes the pixel value to match the rem values. It uses the following format for converting pixel values to rem values −
rem-calc($values, $base)
It uses the following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$values It converts the pixel values to rem values and separate them using spaces. If you are converting comma separated pst, then wrap pst in parentheses. |
Number or List | None |
| 2 |
$base It provides the base value while converting pixel to rem value. If there is null value for the base, then function uses the $base-font-size variable as the base. |
Number | null |
has-value
It specifies the value if it is not false. The false values include null, none, 0 or an empty pst. It uses the following format for specifying the value −
has-value($val)
It uses the parameter as specified in the following table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$val It checks the specified value. |
Mixed | None |
get-side
It specifies the side of a value and defines the top/right/bottom/left values on padding, margin etc. It uses the following format for specifying the side of a value −
has-value($val)
It uses the following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$val It specifies the side of a value. |
List or Number | None |
| 2 |
$side It determines on which side the (top/right/bottom/left) value should return. |
Keyword | None |
get-border-value
It determines the border value of an element. It uses the following format for specifying the border value −
get-border-value($val, $elem)
It uses the following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$val It finds a specific value of the border. |
List | None |
| 2 |
$elem It is used to extract the border component. |
Keyword | None |