102 lines
3 KiB
Markdown
102 lines
3 KiB
Markdown
|
# shortcss
|
|||
|
|
|
|||
|
|
CSS Shorthand expander/combiner.
|
|||
|
|
|
|||
|
|
A simple way to check [shorthand](http://www.w3.org/TR/CSS2/about.html#shorthand) CSS properties, which properties they expand to, combine several properties into shorthand, etc.
|
|||
|
|
|
|||
|
|
Atm this one uses very handy module with CSS shorthand list [css-shorthand-properties](https://github.com/gilmoreorless/css-shorthand-properties).
|
|||
|
|
|
|||
|
|
## Installation
|
|||
|
|
|
|||
|
|
Available on npm as `shortcss`.
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
npm install shortcss
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Usage
|
|||
|
|
|
|||
|
|
### API
|
|||
|
|
|
|||
|
|
#### _boolean_ isShorthand (_string_ property)
|
|||
|
|
|
|||
|
|
* Checks a string to be an expandable shorthand for several CSS properties
|
|||
|
|
* **Parameters**:
|
|||
|
|
* `property` _(string)_ CSS property to check.
|
|||
|
|
* **Returns**: _boolean_ whether or not the passed property is a shorthand.
|
|||
|
|
|
|||
|
|
#### _Array|Object_ expand (_string_ property, [_string_ value], [_boolean_ recurse])
|
|||
|
|
|
|||
|
|
* Takes a CSS shorthand property and returns a list of longhand properties
|
|||
|
|
* **Parameters**:
|
|||
|
|
* `property` _(string)_ Shorthand property to expand.
|
|||
|
|
* `value` _(string)_ Split also a value to expanded properties. In that way the function will return an object.
|
|||
|
|
* `recurse` _(boolean – optional, default `false`)_ If true, each longhand property will also be run through `expand()`. This is only useful for the `border` property.
|
|||
|
|
* **Returns**: _Array|Object_ with a list of longhand properties that the given property expands to. If the property is not a shorthand, the array contains only the original property.
|
|||
|
|
|
|||
|
|
### Examples
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
var SC = require('shortcss');
|
|||
|
|
|
|||
|
|
// Standard usage
|
|||
|
|
SC.expand('list-style');
|
|||
|
|
// ['list-style-type', 'list-style-position', 'list-style-image']
|
|||
|
|
|
|||
|
|
// Non-shorthand properties return themselves in an array
|
|||
|
|
SC.expand('color');
|
|||
|
|
// ['color']
|
|||
|
|
|
|||
|
|
// Using 'border' in normal mode...
|
|||
|
|
SC.expand('border');
|
|||
|
|
/*
|
|||
|
|
[
|
|||
|
|
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
|
|||
|
|
'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style',
|
|||
|
|
'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
|
|||
|
|
]
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// ...the border properties are also shorthands
|
|||
|
|
SC.expand('border-width');
|
|||
|
|
// ['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width']
|
|||
|
|
|
|||
|
|
// Using 'border' without recursion returns
|
|||
|
|
SC.expand('border', false);
|
|||
|
|
// ['border-width', 'border-style', 'border-color']
|
|||
|
|
|
|||
|
|
// Expanding border with a value
|
|||
|
|
SC.expand('border', '1px solid red');
|
|||
|
|
/*
|
|||
|
|
{
|
|||
|
|
'border-top-width': '1px',
|
|||
|
|
'border-right-width': '1px',
|
|||
|
|
'border-bottom-width': '1px',
|
|||
|
|
'border-left-width': '1px',
|
|||
|
|
'border-top-style': 'solid',
|
|||
|
|
'border-right-style': 'solid',
|
|||
|
|
'border-bottom-style': 'solid',
|
|||
|
|
'border-left-style': 'solid',
|
|||
|
|
'border-top-color': 'red',
|
|||
|
|
'border-right-color': 'red',
|
|||
|
|
'border-bottom-color': 'red',
|
|||
|
|
'border-left-color': 'red'
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// ... and the same with recurse flag set to false
|
|||
|
|
SC.expand('border', '1px solid red', false);
|
|||
|
|
/*
|
|||
|
|
{
|
|||
|
|
'border-width': '1px',
|
|||
|
|
'border-style': 'solid',
|
|||
|
|
'border-color': 'red'
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Licence
|
|||
|
|
|
|||
|
|
MIT: [License](https://github.com/theprotein/shortcss/blob/master/LICENSE)
|