# scale

> Sets the standalone `scale` CSS property directly — distinct from `u.scale()`, which sets the `scale(...)` transform function through the composable `transform` mechanism; overwrites outright, matching its use.

```ts
import { scaleProperty } from "@sdxc/u/transform";
```

Sets the standalone `scale` CSS property directly — distinct from
`u.scale()`, which sets the `scale(...)` transform function through the
composable `transform` mechanism; overwrites outright, matching its use.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.scaleProperty(0.95)` | `css({ scale: "0.95" })` |
| `u.scaleProperty("none")` | `css({ scale: "none" })` |

## Examples

### Basic example

Use `scaleProperty(n)` to set the standalone CSS `scale` property, which resizes an element apart from its `transform`:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scaleProperty(0.75), ...]}>0.75</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleProperty(1), ...]}>1</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleProperty(1.25), ...]}>1.25</div>
	</div>
</div>
```

### Scaling each axis

Pass a string with two factors, like `scaleProperty("1.25 0.75")`, to scale the horizontal and vertical axes apart:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scaleProperty("1.25 0.75"), ...]}>1.25 0.75</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleProperty("0.75 1.25"), ...]}>0.75 1.25</div>
	</div>
</div>
```

### Combining with transforms

The `scale` property applies on top of `transform`, so `scaleProperty()` combines with `rotate()` and the other transform utilities:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scaleProperty(0.75), rotate(20), ...]}>both</div>
	</div>
</div>
```

### Pressing a button

Wrap it in `active()` to shrink a button while it is pressed, with a `transition("scale")` to ease it. Press the button to try it:

```tsx
<button type="button" mix={[active(scaleProperty(0.95)), transition("scale"), ...]}>
	Press me
</button>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.scaleProperty("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.scaleProperty(0.95))
```

## Responsive design

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

```ts
u.at("md", u.scaleProperty(0.95))
```

## Signature

```ts
u.scaleProperty(value: number | (string & {}))
```