https://github.com/javidrashkhansoi/responsive-value
SCSS function responsive-value. It is intended to handle responsive CSS property values without using media queries.
https://github.com/javidrashkhansoi/responsive-value
adaptive css function generator license media-queries media-query media-query-breakpoints mit mit-license responsive sass sass-function scss scss-function snippets vscode vscode-snippets
Last synced: about 1 year ago
JSON representation
SCSS function responsive-value. It is intended to handle responsive CSS property values without using media queries.
- Host: GitHub
- URL: https://github.com/javidrashkhansoi/responsive-value
- Owner: javidrashkhansoi
- License: mit
- Created: 2024-02-27T01:20:08.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-29T02:18:29.000Z (over 2 years ago)
- Last Synced: 2024-03-01T00:44:46.376Z (over 2 years ago)
- Topics: adaptive, css, function, generator, license, media-queries, media-query, media-query-breakpoints, mit, mit-license, responsive, sass, sass-function, scss, scss-function, snippets, vscode, vscode-snippets
- Language: SCSS
- Homepage: https://javidrashkhansoi.github.io/responsive-value/
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SCSS `responsive-value` Function
The SCSS function `responsive-value` is created to facilitate working with responsive CSS property values without using media queries.
- [Function](responsive-value.scss)
- [Generator](https://javidrashkhansoi.github.io/responsive-value/)
- [Snippets](responsive-value.code-snippets)
```scss
@function responsive-value(
$start-value,
$end-value,
$start-breakpoint,
$end-breakpoint,
$behavior: "fixed-start-value",
$unit: "px"
) {
// ...
}
```
## Usage
```scss
.element {
font-size: responsive-value(2, 1, 48, 23.4375, "fixed-both", "rem");
padding: responsive-value(20, 10, 768, 375, "fixed-end-value", "px");
margin-bottom: responsive-value(30, 15, 1440, 280);
}
```
## Parameters
- `$start-value` (number): The initial value of the property. Only accepts numeric values without units. Must not be equal to `$end-value`.
- `$end-value` (number): The final value of the property. Only accepts numeric values without units. Must not be equal to `$start-value`.
- `$start-breakpoint` (number): The initial breakpoint. At this breakpoint, the property value will be equal to `$start-value`. Only accepts positive numeric values without units. Must not be less than or equal to `$end-breakpoint`.
- `$end-breakpoint` (number): The final breakpoint. At this breakpoint, the property value will be equal to `$end-value`. Only accepts positive numeric values or `0` (zero) without units. Must not be greater than or equal to `$start-breakpoint`.
- `$behavior` (string, optional): Accepts 4 values:
- `"not-fixed"`: The `$start-value` and `$end-value` properties are not fixed before and after breakpoints.
- `"fixed-both"`: The `$start-value` and `$end-value` properties are strictly fixed before and after breakpoints.
- `"fixed-start-value"`: At this value, `$start-value` is strictly fixed before `$start-breakpoint`. Default value.
- `"fixed-end-value"`: At this value, `$end-value` is strictly fixed after `$end-breakpoint`.
- `$unit` (string, optional): CSS unit for numeric values. Default is `"px"`. When changing the unit, `$start-value`, `$end-value`, `$start-breakpoint`, and `$end-breakpoint` should be written in the format of the specified unit.
## Return
- One of the CSS mathematical functions: `min()`, `max()`, `clamp()`.
## Throws
- If `$start-value`, `$end-value`, `$start-breakpoint`, or `$end-breakpoint` are not numeric or have units.
- If `$start-value` and `$end-value` are equal.
- If `$start-breakpoint` is less than or equal to zero.
- If `$end-breakpoint` is a negative number.
- If `$start-breakpoint` is less than `$end-breakpoint`.
- If `$start-breakpoint` is equal to `$end-breakpoint`.
- If the value of `$behavior` is incorrect.