Call bootstrap mixin from javascript to use with styled-components. All mixins are based on bootstrap-sass.
This project is currently under development. Only these mixins are available:
- buttons
- clearfix
- grid
- image
- labels
npm install styled-bootstrap-mixins styled-components --save
Because bootstrap sass mixins are written in snake-case, it is not a valid syntax in javascript.
You have replace dash -
with underscore _
to call the mixin.
import { make_lg_column } from 'styled-bootstrap-mixins'
import styled from 'styled-components'
import React from 'react'
const Container = styled.div`
background-color: papayawhip;
${ make_lg_column('8') }
`
const Component = () => <Container>Content</Container>
export default Component
Constants are bootstrap's predefined values located in _variables.scss. They are compiled using scss-to-json to convert from scss to json.
To get a minimum medium screen breakpoint
import { CONSTANTS } from 'styled-bootstrap-mixins'
CONSTANTS['$screen-md-min'] // 992px
Please note that all returned constants are string.
Using jest test runner
npm test