postcss spiffing

postcss-spiffing

내 손은 당신 색깔이지만 부끄럽습니다
너무 하얀 마음을 입는 것.
- 윌리엄 셰익스피어, 맥베스

셰익스피어는 CSS에서 "색상" 대신 "색상"을 사용하는 데 만족하지 않았을 것이며 여러분도 마찬가지입니다! 그는 그렇게 함으로써 자신의 글의 온전한 완전성을 구성하게 되었음을 인식했을 것입니다.

postcss-spiffing 사용하여 어디서나 적절한 영국 영어를 사용하여 CSS를 작성하세요.

이것과 muan에 의한 spiffing 의 주요 차이점은 이것이 postcss 와 통합되고 정규 표현식을 사용하지 않는다는 것입니다.

설치하다

npm install postcss-spiffing --save-dev

예

 /* Your well-spelt CSS */

body {
  background-colour : grey;
  transparency : 0.3 ;
  text-align : centre;
  text-transform : capitalise;
  border : 1 px solid grey;
}

span {
  font-weight : plump;
}

. frame {
  background-photograph : url ( "/queen.png" ) !please;
}

. hello {
	content : "subjects" ;
	colour : grey;
}

다음으로 이동합니다:

 body {
  background-color : gray;
  opacity : 0.7 ;
  text-align : center;
  text-transform : capitalize;
  border : 1 px solid gray;
}

span {
  font-weight : bold;
}

. frame {
  background-image : url ( "/queen.png" ) !important ;
}

. hello {
	content : "subjects" ;
	color : gray;
}

사용

 var postcss = require ( "postcss" ) ;
var spiffing = require ( "postcss-spiffing" ) ;
var fs = require ( "fs" ) ;

var css = fs . readFileSync ( "random.css" ) ;

console . log ( postcss ( spiffing ( ) ) . process ( css ) . css ) ;

이것을 gulp 와 함께 사용하려면 gulp-postcss를 사용하세요.

변경 사항이 적용되었습니다

1. colour color 으로 간다
2. plump 하게 bold 변하다
3. capitalise 하다 capitalize 하다
4. !please 가세요 !important
5. centre center 로 간다
6. grey gray 으로 변해요
7. background-photograph background-image 로 이동합니다( list-style-photograph 도 지원됨)
8. transparency opacity 가 됩니다(투명도는 불투명도의 반대이므로 (1-n)이 됩니다)
9. storey z-index 로 이동합니다( ground 1과 같음).