postcss spiffing

postcss-spiffing

มือของฉันมีสีของคุณ แต่ฉันละอายใจ
ที่จะสวมหัวใจให้ขาว
- วิลเลียม เชคสเปียร์, แมคเบธ

เชคสเปียร์คงไม่ตัดสินที่จะใช้ "สี" มากกว่า "สี" ใน CSS และคุณก็ไม่ควรเช่นกัน! เขาจะรับรู้ว่าในการทำเช่นนั้น เขาจะประกอบด้วยความสมบูรณ์ของงานเขียนของเขาทั้งหมด

เขียน CSS โดยใช้ภาษาอังกฤษแบบอังกฤษที่เหมาะสมทุกที่ด้วย postcss-spiffing

ความแตกต่างที่สำคัญระหว่างสิ่งนี้กับ spiffing โดย muan คือสิ่งนี้จะรวมเข้ากับ 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 และอื่น ๆ )