1 line
18 KiB
JavaScript
1 line
18 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[6686],{3905:function(t,e,n){n.d(e,{Zo:function(){return u},kt:function(){return k}});var l=n(7294);function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);e&&(l=l.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,l)}return n}function a(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?s(Object(n),!0).forEach((function(e){r(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function i(t,e){if(null==t)return{};var n,l,r=function(t,e){if(null==t)return{};var n,l,r={},s=Object.keys(t);for(l=0;l<s.length;l++)n=s[l],e.indexOf(n)>=0||(r[n]=t[n]);return r}(t,e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);for(l=0;l<s.length;l++)n=s[l],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}var o=l.createContext({}),p=function(t){var e=l.useContext(o),n=e;return t&&(n="function"==typeof t?t(e):a(a({},e),t)),n},u=function(t){var e=p(t.components);return l.createElement(o.Provider,{value:e},t.children)},c={inlineCode:"code",wrapper:function(t){var e=t.children;return l.createElement(l.Fragment,{},e)}},S=l.forwardRef((function(t,e){var n=t.components,r=t.mdxType,s=t.originalType,o=t.parentName,u=i(t,["components","mdxType","originalType","parentName"]),S=p(n),k=r,m=S["".concat(o,".").concat(k)]||S[k]||c[k]||s;return n?l.createElement(m,a(a({ref:e},u),{},{components:n})):l.createElement(m,a({ref:e},u))}));function k(t,e){var n=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var s=n.length,a=new Array(s);a[0]=S;var i={};for(var o in e)hasOwnProperty.call(e,o)&&(i[o]=e[o]);i.originalType=t,i.mdxType="string"==typeof t?t:r,a[1]=i;for(var p=2;p<s;p++)a[p]=n[p];return l.createElement.apply(null,a)}return l.createElement.apply(null,n)}S.displayName="MDXCreateElement"},1047:function(t,e,n){n.r(e),n.d(e,{frontMatter:function(){return i},contentTitle:function(){return o},metadata:function(){return p},toc:function(){return u},default:function(){return S}});var l=n(7462),r=n(3366),s=(n(7294),n(3905)),a=["components"],i={sidebar_label:"\u6837\u5f0f\uff1a\u8c08\u8c08 CSS \u9884\u5904\u7406\u5668",sidebar_position:8},o="\u8c08\u8c08 CSS \u9884\u5904\u7406\u5668",p={unversionedId:"book2/css-preprocessor",id:"book2/css-preprocessor",isDocsHomePage:!1,title:"\u8c08\u8c08 CSS \u9884\u5904\u7406\u5668",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book2/css-preprocessor.md",sourceDirName:"book2",slug:"/book2/css-preprocessor",permalink:"/awesome-interview/book2/css-preprocessor",tags:[],version:"current",sidebarPosition:8,frontMatter:{sidebar_label:"\u6837\u5f0f\uff1a\u8c08\u8c08 CSS \u9884\u5904\u7406\u5668",sidebar_position:8},sidebar:"tutorialSidebar",previous:{title:"\u57fa\u7840\uff1aNew \u64cd\u4f5c\u7b26\u7684\u539f\u7406",permalink:"/awesome-interview/book2/js-new"},next:{title:"\u7f51\u7edc\uff1aHTTP \u7f13\u5b58\u673a\u5236",permalink:"/awesome-interview/book2/network-http-cache"}},u=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[]},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. PostCSS<sup>1</sup>",id:"1-postcss1",children:[]},{value:"2. Sass<sup>2</sup>",id:"2-sass2",children:[]},{value:"3. Less<sup>3</sup>",id:"3-less3",children:[]},{value:"4. Stylus<sup>4</sup>",id:"4-stylus4",children:[]}]},{value:"\u6269\u5c55\u9605\u8bfb",id:"\u6269\u5c55\u9605\u8bfb",children:[{value:"1. CSS Modules<sup>5</sup>",id:"1-css-modules5",children:[]},{value:"2. CSS-in-JS",id:"2-css-in-js",children:[]},{value:"3. Tailwind \u548c Utility-first CSS",id:"3-tailwind-\u548c-utility-first-css",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],c={toc:u};function S(t){var e=t.components,n=(0,r.Z)(t,a);return(0,s.kt)("wrapper",(0,l.Z)({},c,n,{components:e,mdxType:"MDXLayout"}),(0,s.kt)("h1",{id:"\u8c08\u8c08-css-\u9884\u5904\u7406\u5668"},"\u8c08\u8c08 CSS \u9884\u5904\u7406\u5668"),(0,s.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"CSS \u4e3b\u8981\u6709\u54ea\u4e9b\u9884\u5904\u7406\u5668"),(0,s.kt)("li",{parentName:"ul"},"\u4e3a\u4ec0\u4e48\u9700\u8981\u7528\u9884\u5904\u7406\u5668"),(0,s.kt)("li",{parentName:"ul"},"\u5404\u9884\u5904\u7406\u5668\u4f18\u7f3a\u70b9")),(0,s.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,s.kt)("p",null,(0,s.kt)("inlineCode",{parentName:"p"},"Sass")," ",(0,s.kt)("inlineCode",{parentName:"p"},"Less")," ",(0,s.kt)("inlineCode",{parentName:"p"},"Stylus")," ",(0,s.kt)("inlineCode",{parentName:"p"},"PostCSS")," ",(0,s.kt)("inlineCode",{parentName:"p"},"\u5de5\u7a0b\u5316")," ",(0,s.kt)("inlineCode",{parentName:"p"},"\u63d0\u5347\u6548\u7387")),(0,s.kt)("p",null,"CSS \u672c\u8eab\u4e0d\u5c5e\u4e8e\u53ef\u7f16\u7a0b\u8bed\u8a00\uff0c\u5f53\u524d\u7aef\u9879\u76ee\u9010\u6e10\u5e9e\u5927\u4e4b\u540e CSS \u7684\u7ef4\u62a4\u4e5f\u6108\u52a0\u56f0\u96be\u3002CSS \u9884\u5904\u7406\u5668\u6240\u505a\u7684\u672c\u8d28\u4e0a\u662f\u4e3a CSS \u589e\u52a0\u4e00\u4e9b\u53ef\u7f16\u7a0b\u7684\u7279\u6027\uff0c\u901a\u8fc7",(0,s.kt)("strong",{parentName:"p"},"\u53d8\u91cf"),"\u3001",(0,s.kt)("strong",{parentName:"p"},"\u5d4c\u5957"),"\u3001",(0,s.kt)("strong",{parentName:"p"},"\u7b80\u5355\u7684\u7a0b\u5e8f\u903b\u8f91"),"\u3001",(0,s.kt)("strong",{parentName:"p"},"\u8ba1\u7b97"),"\u3001",(0,s.kt)("strong",{parentName:"p"},"\u51fd\u6570"),"\u7b49\u7279\u6027\uff0c\u901a\u8fc7",(0,s.kt)("strong",{parentName:"p"},"\u5de5\u7a0b\u5316"),"\u7684\u624b\u6bb5\u8ba9 CSS \u66f4\u6613\u7ef4\u62a4\uff0c\u63d0\u5347\u5f00\u53d1\u6548\u7387\u3002"),(0,s.kt)("p",null,"\u76ee\u524d\u4e3b\u6d41\u7684 CSS \u9884\u5904\u7406\u5668\u4e3b\u8981\u6709 Sass\u3001Less\u3001Stylus\u3001PostCSS\u3002"),(0,s.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,s.kt)("h3",{id:"1-postcss1"},"1. PostCSS",(0,s.kt)("sup",null,"[1]")),(0,s.kt)("p",null,"PostCSS \u662f\u76ee\u524d\u6700\u4e3a\u6d41\u884c\u7684 CSS \u9884/\u540e\u5904\u7406\u5668\u3002PostCSS \u672c\u4f53\u529f\u80fd\u6bd4\u8f83\u5355\u4e00\uff0c\u5b83\u63d0\u4f9b\u4e00\u79cd\u7528 JavaScript \u6765\u5904\u7406 CSS \u7684\u65b9\u5f0f\u3002PostCSS \u4f1a\u628a CSS \u89e3\u6790\u6210 AST\uff08Abstract Syntax Tree \u62bd\u8c61\u8bed\u6cd5\u6811\uff09\uff0c\u4e4b\u540e\u7531\u5176\u4ed6\u63d2\u4ef6\u8fdb\u884c\u4e0d\u540c\u7684\u5904\u7406\u3002"),(0,s.kt)("h4",{id:"\u529f\u80fd"},"\u529f\u80fd"),(0,s.kt)("p",null,"PostCSS \u672c\u4f53\u529f\u80fd\u6bd4\u8f83\u5355\u4e00\uff0c\u5927\u591a\u6570\u7684 CSS \u5904\u7406\u529f\u80fd\u90fd\u7531\u63d2\u4ef6\u63d0\u4f9b\uff0c\u4e0b\u9762\u662f\u4e00\u4e9b\u5e38\u7528\u7684\u63d2\u4ef6\uff1a"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://github.com/postcss/autoprefixer"},"Autoprefixer")," \u4e3a CSS \u4e2d\u7684\u5c5e\u6027\u6dfb\u52a0\u6d4f\u89c8\u5668\u7279\u5b9a\u7684\u524d\u7f00\u3002"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://github.com/csstools/postcss-preset-env"},"postcss-preset-env")," \u6839\u636e ",(0,s.kt)("inlineCode",{parentName:"li"},"browserslist")," \u6307\u5b9a\u7684\u76ee\u6807\u6d4f\u89c8\u5668\u5c06\u4e00\u4e9b CSS \u7684\u65b0\u7279\u6027\u8f6c\u6362\u4e3a\u76ee\u6807\u6d4f\u89c8\u5668\u6240\u652f\u6301\u7684\u8bed\u6cd5\u3002"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://github.com/cssnano/cssnano"},"cssnano")," \u63d0\u4f9b CSS \u538b\u7f29\u529f\u80fd\u3002"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://github.com/postcss/postcss-nested"},"postcss-nested")," \u63d0\u4f9b CSS \u5d4c\u5957\u529f\u80fd\u3002"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://github.com/evrone/postcss-px-to-viewport"},"postcss-px-to-viewport")," \u63d0\u4f9b px \u8f6c vw \u529f\u80fd\u3002"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://github.com/postcss/postcss-custom-properties"},"postcss-custom-properties")," \u652f\u6301 CSS \u7684\u81ea\u5b9a\u4e49\u5c5e\u6027\u3002")),(0,s.kt)("h4",{id:"\u4f18\u70b9"},"\u4f18\u70b9"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"\u63d2\u4ef6\u7cfb\u7edf\u5b8c\u5584\uff0c\u6269\u5c55\u6027\u5f3a\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u914d\u5408\u63d2\u4ef6\u529f\u80fd\u9f50\u5168\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u751f\u6001\u4f18\u79c0\u3002")),(0,s.kt)("h4",{id:"\u7f3a\u70b9"},"\u7f3a\u70b9"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"\u914d\u7f6e\u76f8\u5bf9\u590d\u6742\u3002")),(0,s.kt)("h3",{id:"2-sass2"},"2. Sass",(0,s.kt)("sup",null,"[2]")),(0,s.kt)("p",null,"Sass \u5728\u5b8c\u5168\u517c\u5bb9 CSS \u8bed\u6cd5\u7684\u524d\u63d0\u4e0b\uff0c\u7ed9 CSS \u63d0\u4f9b\u4e86\u53d8\u91cf\u3001\u5d4c\u5957\u3001\u6df7\u5408\u3001\u64cd\u4f5c\u7b26\u3001\u81ea\u5b9a\u4e49\u51fd\u6570\u7b49\u53ef\u7f16\u7a0b\u80fd\u529b\u3002"),(0,s.kt)("h4",{id:"\u529f\u80fd-1"},"\u529f\u80fd"),(0,s.kt)("p",null,"Sass \u5e38\u7528\u7684\u6709\u51e0\u79cd\u529f\u80fd\uff1a"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"\u53d8\u91cf\uff1a\u53d8\u91cf\u4e2d\u53ef\u4ee5\u5b58\u50a8\u989c\u8272\u3001\u5b57\u4f53\u6216\u4efb\u4f55 CSS \u503c\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u5d4c\u5957\uff1a\u53ef\u5d4c\u5957 CSS \u9009\u62e9\u5668\uff0c\u63d0\u4f9b\u6e05\u6670\u7684\u5c42\u6b21\u7ed3\u6784\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u6df7\u5408\uff1a\u53ef\u4ee5\u5b9a\u4e49&\u91cd\u7528\u4ee3\u7801\u5757\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u6269\u5c55/\u96c6\u6210\uff1a\u53ef\u4ee5\u5728\u4e00\u4e2a\u9009\u62e9\u5668\u5185\u7ee7\u627f\u53e6\u4e00\u4e2a\u9009\u62e9\u5668\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u64cd\u4f5c\u7b26\uff1a\u53ef\u4ee5\u5728 CSS \u4e2d\u4f7f\u7528\u64cd\u4f5c\u7b26\u8fdb\u884c\u8ba1\u7b97\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u6761\u4ef6/\u5faa\u73af\u8bed\u53e5\uff1a\u53ef\u4ee5\u5faa\u73af/\u6761\u4ef6\u751f\u6210 CSS\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u81ea\u5b9a\u4e49\u51fd\u6570\uff1a\u53ef\u4ee5\u81ea\u5b9a\u4e49\u590d\u6742\u64cd\u4f5c\u7684\u51fd\u6570\u3002")),(0,s.kt)("h4",{id:"\u4f18\u70b9-1"},"\u4f18\u70b9"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"\u4f7f\u7528\u5e7f\u6cdb\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u529f\u80fd\u652f\u6301\u5b8c\u5584\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u53ef\u7f16\u7a0b\u80fd\u529b\u5f3a\u3002")),(0,s.kt)("h4",{id:"\u7f3a\u70b9-1"},"\u7f3a\u70b9"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"CSS \u7684\u590d\u6742\u5ea6\u4e0d\u53ef\u63a7\u3002"),(0,s.kt)("li",{parentName:"ul"},"node-sass \u56fd\u5185\u5b89\u88c5\u4e0d\u6613\uff08\u975e Sass \u672c\u8eab\u7684\u7f3a\u70b9\uff0cdart-sass \u53ef\u4ee3\u66ff\uff09\u3002")),(0,s.kt)("h3",{id:"3-less3"},"3. Less",(0,s.kt)("sup",null,"[3]")),(0,s.kt)("p",null,"Less \u548c Sass \u7c7b\u4f3c\uff0c\u5b8c\u5168\u517c\u5bb9 CSS \u8bed\u6cd5\uff0c\u5e76\u7ed9 CSS \u63d0\u4f9b\u4e86\u53d8\u91cf\u3001\u5d4c\u5957\u3001\u6df7\u5408\u3001\u8fd0\u7b97\u7b49\u53ef\u7f16\u7a0b\u80fd\u529b\u3002Less \u901a\u8fc7 JavaScript \u5b9e\u73b0\uff0c\u53ef\u5728\u6d4f\u89c8\u5668\u7aef\u76f4\u63a5\u4f7f\u7528\u3002"),(0,s.kt)("h4",{id:"\u529f\u80fd-2"},"\u529f\u80fd"),(0,s.kt)("p",null,"Less \u5e38\u7528\u7684\u6709\u51e0\u79cd\u529f\u80fd\uff1a"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"\u53d8\u91cf\uff1a\u53d8\u91cf\u4e2d\u53ef\u4ee5\u5b58\u50a8\u989c\u8272\u3001\u5b57\u4f53\u6216\u4efb\u4f55 CSS \u503c\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u5d4c\u5957\uff1a\u53ef\u5d4c\u5957 CSS \u9009\u62e9\u5668\uff0c\u63d0\u4f9b\u6e05\u6670\u7684\u5c42\u6b21\u7ed3\u6784\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u6df7\u5408\uff1a\u53ef\u4ee5\u5b9a\u4e49&\u91cd\u7528\u7684\u4ee3\u7801\u5757\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u6269\u5c55/\u96c6\u6210\uff1a\u53ef\u4ee5\u5728\u4e00\u4e2a\u9009\u62e9\u5668\u5185\u7ee7\u627f\u53e6\u4e00\u4e2a\u9009\u62e9\u5668\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u8fd0\u7b97\uff1a\u53ef\u4ee5\u5728 CSS \u4e2d\u8fdb\u884c\u8ba1\u7b97\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u6761\u4ef6/\u5faa\u73af\u8bed\u53e5\uff1a\u53ef\u4ee5\u5faa\u73af/\u6761\u4ef6\u751f\u6210 CSS\u3002")),(0,s.kt)("h4",{id:"\u4f18\u70b9-2"},"\u4f18\u70b9"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"\u4f7f\u7528\u5e7f\u6cdb\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\uff0c\u5bb9\u6613\u5b9e\u73b0\u4e3b\u9898\u5b9a\u5236\u529f\u80fd\u3002")),(0,s.kt)("h4",{id:"\u7f3a\u70b9-2"},"\u7f3a\u70b9"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"\u4e0d\u652f\u6301\u81ea\u5b9a\u4e49\u51fd\u6570\uff08\u53ef\u901a\u8fc7 mixins \u5b9e\u73b0\u7b80\u5355\u903b\u8f91\uff09\u3002"),(0,s.kt)("li",{parentName:"ul"},"\u7f16\u7a0b\u80fd\u529b\u76f8\u5bf9\u8f83\u5f31\u3002")),(0,s.kt)("h3",{id:"4-stylus4"},"4. Stylus",(0,s.kt)("sup",null,"[4]")),(0,s.kt)("p",null,"Stylus \u57fa\u7840\u529f\u80fd\u548c Sass / Less \u5341\u5206\u7c7b\u4f3c\u3002Stylus \u7684\u7279\u70b9\u662f\u5192\u53f7\u3001\u5206\u53f7\u3001\u9017\u53f7\u548c\u62ec\u53f7\u90fd\u662f\u53ef\u9009\u9879\uff0c\u6240\u4ee5\u53ef\u4ee5\u5199\u51fa\u975e\u5e38\u7b80\u6d01\u7684 CSS\uff0c\u793a\u4f8b\u5982\u4e0b\uff1a"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-stylus"},"body\n background-color: #000\n\nbody::after\n content: 'HZFEStudio'\n color: #fff\n font-size: 20px\n")),(0,s.kt)("h2",{id:"\u6269\u5c55\u9605\u8bfb"},"\u6269\u5c55\u9605\u8bfb"),(0,s.kt)("h3",{id:"1-css-modules5"},"1. CSS Modules",(0,s.kt)("sup",null,"[5]")),(0,s.kt)("p",null,"CSS Modules \u548c\u524d\u6587\u4ecb\u7ecd\u7684\u9884\u5904\u7406\u5668\u4e0d\u540c\uff0c\u4e0d\u662f\u53ef\u7f16\u7a0b\u5316\u7684 CSS\uff0c\u800c\u4ec5\u662f\u7ed9 CSS \u6587\u4ef6\u52a0\u5165\u4e86\u4f5c\u7528\u57df\u548c\u6a21\u5757\u4f9d\u8d56\uff0c\u4e3b\u8981\u662f\u4e3a\u4e86\u89e3\u51b3 CSS \u5168\u5c40\u6c61\u67d3\u7684\u75db\u70b9\u4ee5\u53ca\u4e3a\u4e86\u89e3\u51b3\u5168\u5c40\u6c61\u67d3\u800c\u5d4c\u5957\u8fc7\u6df1\u7684\u95ee\u9898\u3002\u4f7f\u7528\u793a\u4f8b\u5982\u4e0b\uff1a"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-css"},"/* style.css */\n.hzfeTitle {\n color: #666;\n font-size: 20px;\n}\n")),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-javascript"},'import style from "./style.css";\n\ndocument.body.innerHTML = `<h1 class="${style.hzfeTitle}">HZFEStudio</h1>`;\n')),(0,s.kt)("h3",{id:"2-css-in-js"},"2. CSS-in-JS"),(0,s.kt)("p",null,"\u5982\u540d\u5b57\u6240\u89c1\uff0cCSS-in-JS \u662f\u4e00\u79cd\u5728 JavaScript \u91cc\u5199 CSS \u7684\u65b9\u5f0f\u3002\u5229\u7528 JS \u7684\u4f18\u52bf\u53ef\u5b9e\u73b0\u975e\u5e38\u7075\u6d3b\u7684\u53ef\u6269\u5c55\u7684\u6837\u5f0f\u3002CSS-in-JS \u6709\u5f88\u591a\u5b9e\u73b0\uff0c\u76ee\u524d\u6bd4\u8f83\u6d41\u884c\u7684\u662f ",(0,s.kt)("a",{parentName:"p",href:"https://www.styled-components.com/"},"Styled-components"),"\u3002"),(0,s.kt)("p",null,"\u901a\u8fc7 Styled-components \u5199 CSS \u7684\u793a\u4f8b\u5982\u4e0b\uff1a"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-javascript"},'import React from "react";\nimport styled from "styled-components";\n\nfunction hzfe() {\n const Title = styled.h1`\n font-size: 1.5em;\n text-align: center;\n color: #666;\n `;\n return <Title>HZFEStudio</Title>;\n}\n')),(0,s.kt)("h3",{id:"3-tailwind-\u548c-utility-first-css"},"3. Tailwind \u548c Utility-first CSS"),(0,s.kt)("p",null,"\u8fd1\u51e0\u5e74\u968f\u7740 Tailwind \u7684\u6d41\u884c\uff0c\u529f\u80fd\u7c7b\u4f18\u5148\uff08Utility-first CSS\uff09\u7684\u7406\u5ff5\u4e5f\u518d\u6b21\u6d41\u884c\u8d77\u6765\u3002\u8fd9\u91cc\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b Tailwind CSS\u3002"),(0,s.kt)("h4",{id:"31-tailwind6"},"3.1 Tailwind",(0,s.kt)("sup",null,"[6]")),(0,s.kt)("p",null,"Tailwind CSS \u662f\u4e00\u4e2a\u529f\u80fd\u7c7b\u4f18\u5148\u7684 CSS \u6846\u67b6\uff0c\u901a\u8fc7\u7ec4\u5408\u4e0d\u540c\u7684\u7c7b\u540d\u5b9e\u73b0\u9875\u9762\u8bbe\u8ba1\u3002Tailwind \u4e3b\u8981\u4f18\u52bf\u5982\u4e0b\uff1a"),(0,s.kt)("ol",null,(0,s.kt)("li",{parentName:"ol"},"\u4e0d\u7528\u8003\u8651 class \u7684\u547d\u540d\u3002"),(0,s.kt)("li",{parentName:"ol"},"CSS \u6587\u4ef6\u5927\u5c0f\u589e\u957f\u53ef\u63a7\uff0c\u901a\u8fc7 ",(0,s.kt)("inlineCode",{parentName:"li"},"purge")," \u53ef\u751f\u6210\u975e\u5e38\u5c0f\u7684 CSS \u6587\u4ef6\u3002"),(0,s.kt)("li",{parentName:"ol"},"\u7edf\u4e00\u8bbe\u8ba1\u7cfb\u7edf\u4e0b\u7684\u6837\u5f0f\u4e0e\u5e03\u5c40\u3002"),(0,s.kt)("li",{parentName:"ol"},"IDE \u96c6\u6210\u4f18\u79c0\u3002")),(0,s.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,s.kt)("ol",null,(0,s.kt)("li",{parentName:"ol"},(0,s.kt)("a",{parentName:"li",href:"https://postcss.org/"},"PostCSS - A tool for transforming CSS with JavaScript")),(0,s.kt)("li",{parentName:"ol"},(0,s.kt)("a",{parentName:"li",href:"https://sass-lang.com/"},"Sass - CSS with superpowers")),(0,s.kt)("li",{parentName:"ol"},(0,s.kt)("a",{parentName:"li",href:"https://lesscss.org/"},"Less - It's CSS, with just a little more")),(0,s.kt)("li",{parentName:"ol"},(0,s.kt)("a",{parentName:"li",href:"https://www.stylus.com/"},"Stylus - Foresight has never been so crucial")),(0,s.kt)("li",{parentName:"ol"},(0,s.kt)("a",{parentName:"li",href:"https://github.com/css-modules/css-modules"},"CSS Modules")),(0,s.kt)("li",{parentName:"ol"},(0,s.kt)("a",{parentName:"li",href:"https://tailwindcss.com/"},"Tailwind CSS"))))}S.isMDXComponent=!0}}]); |