https://github.com/scrum/postcss-map-get

PostCSS plugin for sass-like map function map-get
https://github.com/scrum/postcss-map-get

Last synced: about 1 year ago
JSON representation

PostCSS plugin for sass-like map function map-get

• Host: GitHub
• URL: https://github.com/scrum/postcss-map-get
• Owner: Scrum
• License: mit
• Created: 2018-02-26T12:44:34.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T02:35:40.000Z (over 3 years ago)
• Last Synced: 2025-02-21T09:57:37.090Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method
• Size: 691 KB
• Stars: 6
• Watchers: 3
• Forks: 2
• Open Issues: 9
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license

Awesome Lists containing this project

README

          
# postcss-map-get 

> [PostCSS](https://github.com/postcss/postcss) plugin to transform SASS Function [map-get](http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method).  

[![Travis Build Status](https://img.shields.io/travis/Scrum/postcss-map-get/master.svg?style=flat-square&label=unix)](https://travis-ci.org/Scrum/postcss-map-get)[![node](https://img.shields.io/node/v/postcss-map-get.svg?maxAge=2592000&style=flat-square)]()[![npm version](https://img.shields.io/npm/v/postcss-map-get.svg?style=flat-square)](https://www.npmjs.com/package/postcss-map-get)[![Dependency Status](https://david-dm.org/scrum/postcss-map-get.svg?style=flat-square)](https://david-dm.org/scrum/postcss-map-get)[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/sindresorhus/xo)[![Coveralls status](https://img.shields.io/coveralls/Scrum/postcss-map-get.svg?style=flat-square)](https://coveralls.io/r/Scrum/postcss-map-get)

[![npm downloads](https://img.shields.io/npm/dm/postcss-map-get.svg?style=flat-square)](https://www.npmjs.com/package/postcss-map-get)[![npm](https://img.shields.io/npm/dt/postcss-map-get.svg?style=flat-square)](https://www.npmjs.com/package/postcss-map-get)

## Why?

Adds the ability to use sass like Map Function [map-get](http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method).  

## Install

```bash

$ npm install postcss postcss-map-get

```

> **Note:** This project is compatible with node v8+

## Usage

```js

// Dependencies

import fs from 'fs';

import postcss from 'postcss';

import mapGet from 'postcss-map-get';

// CSS to be processed

var css = fs.readFileSync('css/input.css', 'utf8');

// Process CSS

var output = postcss()

  .use(mapGet())

  .process(css, {

    from: 'css/input.css'

  })

  .css;

console.log(output);

```

> Returns the value in a map associated with the given key. If the map doesn't have such a key, returns null.

## Example

*input.css*

```css

body {

  background: map-get((

    body: #fff,

    main-red: #c53831,

    link-blue: #0592fb

  ) !default, body);

  min-width: map-get((

    xxs: 0,

    xs: 576px,

    sm: 768px,

    md: 992px,

    lg: 1280px,

    xl: 1360px,

    xxl: 1600px

  ) !default, lg);

  max-width: 100%;

}

```

*output.css*

```css

body {

  background: #fff;

  min-width: 1280px;

  max-width: 100%;

}

```