CEP.scss
CEP: Component, Element and Property, a methodology that help you styling single file component.
Installation
yarn add -D cep.scss # or use npm npm i -D cep.scss
And import it into the index scss file in your project.
;
Usage / Core
The CEP provides a series of mixins and functions to help you writing stylesheet for components, these tools can auto generate specified selector blocks and convert different units.
- core mixin:
comp()
,elem()
,prop()
,when()
- core function:
rem()
<ns>-*
Namespace The css class name prefix for components, controlled by global variable $namespace
.
; // there is a ui library 'huiji-ui', its namespace is `hj` ;;;;; // for the common service components, you can use `c` as their namespace. ;;;;; // for the views components, you can use `v` as their namespace. ;;;;;
<ns>-<component>
Component A component has its own css class name.
<!---->
The mixin comp($name)
will auto generate a selector at root:
.hj-button
.
<ns>-<component>_<element>
Element The CEP will combine the component name and the element name with single underline as css class name for elements.
{{content}}
The mixin elem($name-list...)
will auto generate selectors:
.hj-button .hj-button_icon, .hj-button .hj-button_content
.hj-button .hj-button_icon
.hj-button .hj-button_content
.
Note: don't nest elements block in scss if not necessary.
<ns>p-<name>_<value>
Property For a component, control style by properties of the component, use namespace with a letter 'p' as prefix, combine the property name and the value with single underline.
<!----><!---->
;;
The mixin prop($name-value-map-list...)
will auto generate selectors:
.hj-button.hjp-theme_light
.hj-button.hjp-theme_dark
.hj-button.hjp-theme_light.hjp-size_large
.hj-button.hjp-theme_dark.hjp-size_large
Note: the
prop
is only for components, not for elements, usually used with@each
andmap
.
is-<status>
status For components or elements, control style by boolean value.
<!----><!---->
The mixin when($status-list...)
will auto generate selectors:
.hj-button.is-raise
.hj-button.is-raise.is-active
Them mixin when-or($status-list...)
will auto generate selectors:
.hj-button.is-raise, .hj-button.is-active
when
andwhen-or
can be used under both of components and elements.
rem($pixel)
The function rem($pixel)
will convert a pixel number to rem number according to the global variable $root-font-size
, append the unit rem
to the number .
; :root
Mobile devices
; :root
Note: you need write the
font-size
in the:root
selector yourself
Others
More mixins and functions, like atom
, please checkout the source code.
Snippets for VSCode: scss.json