Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blackmiaool/rn-less
Style react-native with less.
https://github.com/blackmiaool/rn-less
Last synced: about 2 months ago
JSON representation
Style react-native with less.
- Host: GitHub
- URL: https://github.com/blackmiaool/rn-less
- Owner: blackmiaool
- Created: 2017-08-17T12:34:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-14T02:49:34.000Z (about 7 years ago)
- Last Synced: 2024-10-03T15:36:16.075Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 142 KB
- Stars: 19
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-react-native - rn-less ★15 - Style react-native with less (with VS Code extension support) (Components / Styling)
- awesome-react-native - rn-less ★15 - Style react-native with less (with VS Code extension support) (Components / Styling)
- awesome-react-native - rn-less ★15 - Style react-native with less (with VS Code extension support) (Components / Styling)
- awesome-react-native - rn-less ★15 - Style react-native with less (with VS Code extension support) (Components / Styling)
README
# rn-less
Style react-native with less.
Powered by [react-native-css](https://github.com/sabeurthabti/react-native-css) and [less.js](http://lesscss.org/).
### Example
``` less
rn-config{//style's config
arguments: containerMargin,bgColor;//arguments used in less
}
CardExampleStyle {
.render-title{
flex: 1;
align-items: center;
margin-top: 20;
.title-text{
font-size: 20
}
}
.container {
flex: 1;
margin-top: containerMargin;// use the variable declared above
margin-bottom: "containerMargin";// use the variable with string
.title {
font-size: "containerMargin/2";// and any expression starts with variable name
background-color: bgColor;
}
}
}
``````jsx
import { rnLess } from 'rn-less/src/runtime';// import the decorator
import style from './a.less.js'; // import the styleconst rootStyle = style({containerMargin,bgColor});// pass your arguments and get the style object
//decorate the component with the style
//write the decorator in this a.b way to let the vscode extention track the style
@rnLess(rootStyle.CardExampleStyle)
class CardExample extends Component {
//the strings in the style attribute are the class names in the less file
_renderTitle(title) {
// function invoking is processed, but stateless is not
return (
{title}
)
}render() {
return (
{this._renderTitle('Basic')}
Card Title
)
}
}
```## How to use it
#### Install things
```bash
# enter the root directory of the project
npm i -S rn-less
cp -i node_modules/rn-less/example/gulpfile.js .
npm i -g gulp```
#### Modify the gulpfile.js
```javascript
// change it to your source folder
const sourceDir='./app';
```
#### NoticeAll the styles in a component with the same className would be combined into a single one. It ignores the hierarchy of the less file. The hierarchy in the less file is just for you, not for rn-less.
#### Run the gulp
```bash
gulp
```
#### Create your less file and import it in a js/jsx file```javascript
import { rnLess } from 'rn-less/src/runtime';// import the decorator
import style from './a.less.js'; // import the styleconst rootStyle = style({containerMargin,bgColor});// pass your arguments and get the style object
//decorate the component with the style
@rnLess(rootStyle.CardExampleStyle)
class CardExample extends Component {}
```## What's more
#### Process the less output
```javascript
code = processStyleobject({
code,
hierarchy: false,
custom: function ({
root,
traverseProperty,
traverseStyle,
traverseChunk
}) {
// font-size:10 -> fontSize:Theme.font10
traverseProperty(root, function ({ value, property, selector }) {
if (property === 'fontSize') {
return `Theme.font${value}`;
}
});// sort the keys
traverseStyle(root, function ({ style, selector, chunk, component }) {
const ret = {};
Object.keys(style).sort().forEach((key) => {
ret[key] = style[key];
});
return ret;
});//print the chunks
traverseChunk(root, function ({ chunk, styleName, component }) {
console.log(chunk);
});
}
});
```#### Enjoy the vscode extension
[https://github.com/blackmiaool/rn-less-helper](https://github.com/blackmiaool/rn-less-helper)