fast-type-css v0.0.5

fast-type-css

Made with create-react-library

Install

npm install --save fast-type-css

Usage

import { css } from 'fast-type-css';
import { classNames } from 'fast-type-css'; // classNames is used to combine CSS class names, see the usage in the ExmapleComponent

// Using "css" to define the CSS class name and the CSS code.
// "css" function returns a reference CSS class name, see the usage in the ExampleComponent.
const autoScroll = css('autoScroll', {
    overflow: 'auto'
});

const appStyles = css('app-styles', {
    'background-color': 'rgb(30, 30, 30)',
    'color': 'white',
    'font-size': '12px',
    'font-family': 'sans-serif',
    '& a': { // Use "&" to refer to the current selector and use it to combine with sub selectors.
        'color': 'rgb(55, 148, 255)',
        'text-decoration': 'none',
    },
    '&>.header': {
        'background-color': 'rgb(60, 60, 60)',
        'height': '29px',
        'line-height': '29px',
    },
    '& .footer': {
        'height': '22px',
        'line-height': '22px',
        'background-color': 'rgb(0, 122, 204)',
        '& .left': {
            'width': '34px',
            'height': '22px',
        },
        '& .middle': { // "&" can be embeded in any deep levels to describe the current selector.
            '& .content': {
                'padding-left': '8px',
                '&>*': {
                    'display': 'block',
                    'margin-right': '3px',
                }
            }
        },
        '& .right': {
            'padding-right': '10px',
            '&>*': {
                'margin-left': '16px'
            }

        }
    }    
});

export function ExampleComponent(): JSX.Element {
    return <div className={classNames(appStyles, autoScroll)}></div>;
}

License

MIT ©