[{"data":1,"prerenderedAt":207},["ShallowReactive",2],{"content:\u002Fposts\u002F2022\u002Fsass":3,"surround:\u002Fposts\u002F2022\u002Fsass":196},{"id":4,"title":5,"body":6,"canonical":174,"categories":175,"date":177,"description":178,"draft":179,"extension":180,"image":181,"meta":182,"navigation":183,"path":184,"permalink":174,"readingTime":185,"recommend":174,"references":174,"seo":190,"sitemap":191,"stem":192,"tags":193,"type":174,"updated":177,"__hash__":195},"content\u002Fposts\u002F2022\u002Fsass.md","sass 常用语法",{"type":7,"value":8,"toc":162},"minimark",[9,13,39,43,46,56,59,65,68,74,77,88,96,99,105,111,114,120,123,127,133,136,144,147,153,156],[10,11,12],"p",{},"在我们日常开发中，使用 less\u002Fsass 提供的层级样式方便于代码的编写，甚至我们可以使用 sass 中的一些函数来完成一个简单的 css 库来供我们复用 css 代码，这里我会仿照 tailwindcss 来写一些公共代码。我相信，有了这个基础，我们可以对 sass 有更加深入的了解。",[14,15,16,23,32],"alert",{},[17,18,20],"template",{"v-slot:title":19},"",[10,21,22],{},"官方网址",[10,24,25],{},[26,27,31],"a",{"href":28,"rel":29},"https:\u002F\u002Fsass-lang.com\u002F",[30],"nofollow","sass 官方",[10,33,34],{},[26,35,38],{"href":36,"rel":37},"https:\u002F\u002Fwww.sass.hk\u002F",[30],"sass 中文",[40,41,42],"h2",{"id":42},"安装",[10,44,45],{},"使用 yarn 安装",[47,48,53],"pre",{"className":49,"code":51,"language":52,"meta":19},[50],"language-sh","yarn add sass -D\n","sh",[54,55,51],"code",{"__ignoreMap":19},[10,57,58],{},"使用 npm 安装",[47,60,63],{"className":61,"code":62,"language":52,"meta":19},[50],"npm i sass -D\n",[54,64,62],{"__ignoreMap":19},[10,66,67],{},"使用 pnpm 安装",[47,69,72],{"className":70,"code":71,"language":52,"meta":19},[50],"pnpm i sass -D\n",[54,73,71],{"__ignoreMap":19},[40,75,76],{"id":76},"变量",[10,78,79,80,83,84,87],{},"sass 的变量都是使用 ",[54,81,82],{"code":82},"$"," 开始，以 ",[54,85,86],{"code":86},";"," 结束",[47,89,94],{"className":90,"code":92,"language":93,"meta":19},[91],"language-scss","\u002F\u002F 申明单个值\n$primary: #22c55e;\n\n\u002F\u002F 申明一组值\n$colors: (\n    'white': #ffffff,\n    'primary': #367ee8,\n    'primary-light': #e9f0ff,\n);\n","scss",[54,95,92],{"__ignoreMap":19},[10,97,98],{},"或者我们可以在一个变量中用另一个变量",[100,101,102],"blockquote",{},[10,103,104],{},"下面两种的写法是等效的",[47,106,109],{"className":107,"code":108,"language":93,"meta":19},[91],"$border-color: map-get($colors, 'primary');\n\u002F\u002F or\n$border-color: map-get(\n    $map: $colors,\n    $key: 'primary',\n);\n",[54,110,108],{"__ignoreMap":19},[40,112,113],{"id":113},"注释",[10,115,116,117],{},"scss 支持单行注释，使用单行注释后，在编译好的文件中不会包含备注内容。想要在编译后的 css 中显示注释的话需要使用 css 原本支持的注释方法",[54,118,119],{"code":119},"\u002F**\u002F",[40,121,122],{"id":122},"循环",[124,125,126],"h3",{"id":126},"使用一组已有的数据",[47,128,131],{"className":129,"code":130,"language":93,"meta":19},[91],"@each $colorKey, $color in $colors {\n    .text-#{$colorKey} {\n        color: $color;\n    }\n}\n",[54,132,130],{"__ignoreMap":19},[10,134,135],{},"生成的 css 代码",[47,137,142],{"className":138,"code":140,"language":141,"meta":19},[139],"language-css",".text-white {\n    color: #ffffff;\n}\n.text-primary {\n    color: #367ee8;\n}\n.text-primary-light {\n    color: #e9f0ff;\n}\n","css",[54,143,140],{"__ignoreMap":19},[124,145,146],{"id":146},"使用一组未定义的数据",[47,148,151],{"className":149,"code":150,"language":93,"meta":19},[91],"@each $var in (left, center, right) {\n    .text-#{$var} {\n        text-align: $var;\n    }\n}\n",[54,152,150],{"__ignoreMap":19},[10,154,155],{},"生成的代码",[47,157,160],{"className":158,"code":159,"language":141,"meta":19},[139],".text-left {\n    text-align: left;\n}\n.text-center {\n    text-align: center;\n}\n.text-right {\n    text-align: right;\n}\n",[54,161,159],{"__ignoreMap":19},{"title":19,"searchDepth":163,"depth":163,"links":164},4,[165,167,168,169],{"id":42,"depth":166,"text":42},2,{"id":76,"depth":166,"text":76},{"id":113,"depth":166,"text":113},{"id":122,"depth":166,"text":122,"children":170},[171,173],{"id":126,"depth":172,"text":126},3,{"id":146,"depth":172,"text":146},null,[176],"代码","2022-12-04 15:59:32","sass 常用语法一览",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F67a227ce21b4b-78.webp",{},true,"\u002Fposts\u002F2022\u002Fsass",{"text":186,"minutes":187,"time":188,"words":189},"2 min read",1.815,108900,363,{"title":5,"description":178},{"loc":184},"posts\u002F2022\u002Fsass",[141,194],"sass","Ur8Fw9KFxD7xi8UCuYmQiPXhyu6a4OGMO2IelfvR8Uc",[197,202],{"title":198,"path":199,"stem":200,"date":201,"type":174,"children":-1},"vite开发时问题及解决方案","\u002Fposts\u002F2022\u002Fvite-development-problems-and-solutions","posts\u002F2022\u002Fvite-development-problems-and-solutions","2022-12-04 15:58:34",{"title":203,"path":204,"stem":205,"date":206,"type":174,"children":-1},"sass实现一个简易的原子样式库","\u002Fposts\u002F2022\u002Fsass-mini-atomic-pattern-library","posts\u002F2022\u002Fsass-mini-atomic-pattern-library","2022-12-04 16:00:20",1789642596310]