# env

> Resolves a CSS environment variable reference: `env({name})`, or `env({name}, {fallback})` when a fallback is given.

```ts
import { env } from "@sdxc/u/general";
```

Resolves a CSS environment variable reference: `env({name})`, or
`env({name}, {fallback})` when a fallback is given. Returns a plain string,
usable anywhere a utility accepts a raw CSS value.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.env("safe-area-inset-bottom")` | `"env(safe-area-inset-bottom)"` |
| `u.env("safe-area-inset-bottom", "0px")` | `"env(safe-area-inset-bottom, 0px)"` |

## Examples

### Basic example

Use `env(name)` to read a value the browser provides, like the safe area at the bottom of a phone screen, in any utility that takes a CSS value:

```tsx
<nav
	mix={[
		hstack({ justify: "around" }),
		is("full"),
		pbs(3),
		pbe(calc(`0.75rem + ${env("safe-area-inset-bottom")}`)),
		bg(),
		fg("neutral.muted"),
		text("sm"),
		border({ color: "neutral.border", width: 1, style: "solid" }),
	]}
>
	<a href="/home">Home</a>
	<a href="/search">Search</a>
	<a href="/library">Library</a>
	<a href="/profile">Profile</a>
</nav>
```

### Providing a fallback

Pass a second argument for browsers that do not define the variable, like `env("keyboard-inset-height", "0px")`:

```tsx
<div mix={[...]}>
	<input
		placeholder="Write a message…"
		mix={[
			is("full"),
			p(2, 3),
			mbe(env("keyboard-inset-height", "0px")),
			rounded("md"),
			border({ color: "neutral.border", width: 1, style: "solid" }),
		]}
	/>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.env("safe-area-inset-bottom"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.env("safe-area-inset-bottom"))
```

## Signature

```ts
u.env(name: string, fallback?: string)
```