
Reflexjs includes a shorthand syntax for writing mobile-first responsive styles.

Every style props accept responsive styles that can be applied conditionally at different breakpoints.

To write responsive styles, use a `|` pipe.

```jsx
<div p="4|6|8" />
```

This shortcut is an alternative to writing media queries out by hand.

Given the following:

```jsx
<div bg="red|blue|green" />

// or

// Array values are also supported.
<div bg={["red", "blue", "green"]} />
```

Reflexjs will generate the following CSS:

```css
.css-HASH {
  background-color: "red";
}

@media screen and (min-width: 640px) {
  .css-HASH {
    background-color: "blue";
  }
}

@media screen and (min-width: 768px) {
  .css-HASH {
    background-color: "green";
  }
}
```

## Skipping Breakpoints

If you want to skip a breakpoint, you can use the value `null` or leave it blank.

```jsx
<div bg="red|null|green" />

// or

<div bg="red||green" />
```


Responsive Styles

Skipping Breakpoints