README_en.md

Moo-css

Base Layer, global styles.Document>>, 中文>>

• keys: modularization + object-oriented
• advantage:
  • reusability
  • maintainability
  • expansibility
• weakness:
  • learning cost~

Moo-CSS
├─moo-css-base
│   ├─css	// css base
│   ├─less	// less base
│   ├─sass	// sass base
│   └─stylus	// stylus base
├─docs		// documents
└─demo      // demos

guide

• npm moo-css-base
• moo-css-base search data
• moo-css-base vscode plugin
• moo-css fe-tools
• demo url: Mobile web,PC web。

install

npm i --save moo-css-base

use

style init

@import '~moo-css-base/mobile.less';	// init less mobile style
@import '~moo-css-base/pc.less';	// init less pc style

@import '~moo-css-base/mobile.scss';	// init sass mobile style
@import '~moo-css-base/pc.scss';	// init sass pc style

@import '~moo-css-base/mobile.styl';	// init stylus mobile style
@import '~moo-css-base/pc.styl';	// init stylus pc style

use mixins functions

@import '~moo-css-base/mobileMixins.less';	// import less mobile functions

.m-test {
	.wh(1vw, 1vh);
}

@import '~moo-css-base/pcMixins.less';	// import less pc functions

.m-test {
	.opacity(0.5);
}

@import '~moo-css-base/mobileMixins.scss';	// import sass mobile functions

.m-test {
	@include wh(1vw, 1vh);
}

@import '~moo-css-base/pcMixins.scss';	// import sass pc functions

.m-test {
	@include opacity(0.5);
}

@import '~moo-css-base/mobileMixins.styl';	// import sass mobile functions

.m-test
	wh(1vw, 1vh);

@import '~moo-css-base/pcMixins.styl';	// import sass pc functions

.m-test 
	opacity(0.5);

use colors

@import '~moo-css-base/mobileColors.less';	// import less mobile colors

.u-error {
    color: @red;
}

@import '~moo-css-base/mobileColors.less';	// import less pc colors

.u-error {
    color: @blue;
}

@import '~moo-css-base/mobileColors.less';	// import sass mobile colors

.u-error {
    color: $red;
}

@import '~moo-css-base/mobileColors.less';	// import sass pc colors

.u-error {
    color: $blue;
}

@import '~moo-css-base/mobileColors.less';	// import stylus mobile colors

.u-error
    color $red

@import '~moo-css-base/pcColors.less';	// import stylus pc colors

.u-error
    color $blue