# in-context

> Context for SASS

Latest version **0.0.1** (published 2018-09-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install in-context
pnpm add in-context
yarn add in-context
bun add in-context
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2018-09-07 |
| First published | 2018-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Srđan Prodanović |
| Maintainers | some1else |

## Links

- npm: https://www.npmjs.com/package/in-context
- Repository: https://github.com/some1else/in-context
- Homepage: https://github.com/some1else/in-context#readme
- Issues: https://github.com/some1else/in-context/issues
- npm.io page: https://npm.io/package/in-context

## Recent versions

- 0.0.1 (latest) — 2018-09-07

## README

# In context

`in-context` is a SASS utility. Currently it's a fork of the Foundation for Sites [`breakpoint`](https://foundation.zurb.com/sites/docs/media-queries.html#the-breakpoint-mixin). The `+breakpoint(x)` mixin has been aliased to `+in-context(x)`.

## Usage

Install npm package:

`yarn add in-context` / `npm install --save in-context`

Use in `.sass` files:

```sass
@import "~in-context"

.album
  img
    +in-context(small only)
      width: 100%
    +in-context(medium)
      width: calc(100% / 3)
```

Customize breakpoints:

```sass
$breakpoints: (small: 0, medium: 640px, large: 1024px)

@import "~in-context"
```

## Fork idea

The idea is to take the best responsive design utility from [ZURB Foundation for Sites](https://github.com/zurb/foundation-sites), and make it stand-alone & more flexible. Instead of reflecting on screen space, the mixin can reflect on dynamic contexts defined by parent nodes. Here is an API draft:

_Projects.jsx:_

```jsx
import './Projects.sass'
export default ({ images }) => (
  <div className='Projects'>
    <div className='Project Project-1'>
      {images.map((src, index) => (
        <Thumbnail
          key={`thumbnail-${index}`}
          src={`/images/{src}`}
          description={`Image ${index + 1}/${images.length}`}
        />
      ))}
    </div>
  </div>
)
```

_Thumbnail.jsx:_

```jsx
import './Thumbnail.sass'
export default ({ src, description }) => (
  <div className='Thumbnail'>
    <img src={ src } />
    <p className='description'>{ description }</p>
  </div>
)
```

_index.sass:_

```sass
body
  @media (screen and max-width: 34rem)
    +set-child-context(small)
  @media (screen and (min-width: 34rem and max-width: 54rem))
    +set-child-context(medium)
  @media (screen and min-width: 54rem)
    +set-child-context(large)
```

_Projects.sass:_

```sass
.Projects
  
  +in-context(medium down)
          
    .Project
      width: 100%
  
    .Thumbnail.description
      +set-context(small)

  +in-context(large up)
  
    +set-child-context(medium)
  
    .Project
      width: 33.33%
```

_Thubmnail.sass:_

```sass
.Thumbnail
  
  .description
    
    +in-context(small)
      font-size: small
    
    +in-context(medium up)
      font-size: normal
```

--

Licensed under MIT License

---
_Source: https://npm.io/package/in-context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._