In vue, I tried to use the @extend of scss to inherit the placeholder I defined, but when I compiled it, I found that how many components I used this placeholder in the vue will be compiled as many times.
This is the sass placeholder I defined.
$textSizes:xs, sm, md, lg, xl;
@for $i from 1 through length($textSizes) {
$name: nth($textSizes, $i);
%text-#{$name} {
font-size: $i * 0.125rem + 0.625rem;
line-height: $i * 0.125rem + 0.875rem;
};
.text-#{$name} {
@extend %text-#{$name};
}
};
This is how I use it in the vue component
<style lang="scss">
.TopBarContent {
@include flexLayout($justify: space-between, $align: center);
@include size(100%,40px);
.logo {
@include size(auto,100%);
img {
@include size(auto,100%);
}
}
.Sign {
@include flexLayout($align: center, $gap:1);
@extend %mr-2;
@extend %text-xs;
@extend %text-light;
.avtor {
@include size(24px,24px);
@extend %overflow-hidden;
@extend %rounded-full;
img {
@include size(auto,100%);
}
}
}
}
</style>
Pay attention to my placeholder. I used it in seven global components, and the compiled css has seven duplicates.
Click to view screenshots of compiled css
Click to view a screenshot of the placeholder used in the vue component
It's very uncomfortable, doesn't the placeholder compilation logic merge all the classes that have used @ extend? Why I have used so many components, it has been rendered so many times that my obsessive-compulsive disorder is killing me. Please save me.
The following is the css code I compiled, with a lot of class and css value duplicated
.TopBarContent .Sign,.btn-danger,.btn-danger:hover,.btn-default,.btn-default:hover,.btn-primary,.btn-primary:hover,.selectedList,.text-xs,.userInput input,body{font-size:.75rem;line-height:1rem}.TopBarContent .Sign,.selectedList li:hover,.text-light,.userInput input:focus{color:#fff}.TopBarContent .Sign .avtor{border-radius:9999px}.TopBarContent .Sign{margin-right:8px}.TopBarContent .Sign .avtor,body{overflow:hidden}.TopBarContent{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;height:40px}.TopBarContent .logo,.TopBarContent .logo img{width:auto;height:100%}.TopBarContent .Sign{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:4px}.TopBarContent .Sign .avtor{width:24px;height:24px}.TopBarContent .Sign .avtor img{width:auto;height:100%}.btn-danger,.btn-danger:hover,.btn-default,.btn-default:hover,.btn-primary,.btn-primary:hover,.selectedList,.tabItem .tabItemTitle,.text-xs,.userInput input,body{font-size:.75rem;line-height:1rem}.icon-xl,.tabItem .tabItemIcon{font-size:1.375rem;line-height:1.375rem}.tabItem .tabItemIcon,.text-default,.userInput input{color:#979797}.selectedList li:hover,.tabItem .tabItemTitle,.tabItem:hover .tabItemIcon,.text-light,.userInput input:focus{color:#fff}.tabItem .Active,.text-primary{color:#601ed1}.selectedList,.tabItem .Active,.userInput input{background-color:#161616}.tabItem{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;width:40px;height:40px}.tabItem:hover .tabItemIcon{background-color:#000}.tabItem:hover .tabItemTitle{visibility:visible}.tabItem .tabItemIcon{width:40px}.tabItem .tabItemIcon,.tabItem .tabItemTitle{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;height:40px}.tabItem .tabItemTitle{visibility:hidden;position:absolute;left:40px;width:80px;z-index:50;background-color:#000;border-radius:0 8px 8px 0}.selectedList li:hover,header{background-color:#601ed1}.container .sidebar{background-color:#232323}.container .main,.selectedList,.userInput input{background-color:#161616}.container .main,.selectedList{overflow-y:auto}header{width:auto;height:40px}.container{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;height:calc(100vh - 40px)}.container .sidebar{width:40px}.container .main{width:auto;height:100%}.Tips-Main,.btn-danger,.btn-danger:hover,.btn-default,.btn-default:hover,.btn-primary,.btn-primary:hover,.selectedList,.text-xs,.userInput input,body{font-size:.75rem;line-height:1rem}.Tips-Main{background-color:#232323}.Pop-Main,.Tips-Main{border-radius:8px}.Tips-Main{box-shadow:0 12px 28px rgba(0,0,0,.68);padding:12px}.Tips-Main,body{overflow:hidden}.Tips{z-index:10;position:fixed;bottom:48px;z-index:100;justify-content:center;width:100%}.Tips,.Tips-Main{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto}.Tips-Main{justify-content:flex-start;align-items:center;gap:8px;width:80%;border:.68px solid #333}.IconAndName,.text-md{font-size:1rem;line-height:1.25rem}.icon-md,.iconList div{font-size:1.125rem;line-height:1.125rem}.IconAndName .nameInput,.text-default,.userInput input{color:#979797}.IconAndName .nameInput:focus,.selectedList li:hover,.text-light,.userInput input:focus{color:#fff}.IconAndName .iconSelected,.IconAndName .nameInput,.iconList div:hover,.selectedList,.userInput input{background-color:#161616}.IconAndName .iconSelected,.IconAndName .nameInput,.btn-danger,.btn-default,.btn-primary,.iconList div,.selectedList,.userInput input{border-radius:4px}.IconAndName .iconSelected,.IconAndName .nameInput,.iconList div,.userInput input{padding:8px}.IconAndName{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:8px}.IconAndName>*{flex-grow:1;flex-shrink:1}.IconAndName .iconSelected{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;border:1px solid #333}.IconAndName .nameInput{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;height:auto;border:1px solid #232323}.IconAndName .nameInput>*{flex-grow:1}.IconAndName .nameInput:focus{border:1px solid #333}.iconList{flex-wrap:wrap;justify-content:space-between}.iconList,.iconList div{display:flex;flex-direction:row}.iconList div{flex-wrap:nowrap;justify-content:center;align-items:center}.RightMenu-Item,.btn-danger,.btn-danger:hover,.btn-default,.btn-default:hover,.btn-primary,.btn-primary:hover,.selectedList,.text-xs,.userInput input,body{font-size:.75rem;line-height:1rem}.RightMenu-Item:hover,.selectedList li:hover,.text-light,.userInput input:focus{color:#fff}.RightMenu-Main,.btn-danger,.btn-default,.btn-primary,.selectedList,.userInput input{border-radius:4px}.RightMenu-Main{box-shadow:0 12px 28px rgba(0,0,0,.68)}.RightMenu-Item,.btn-danger,.btn-default,.btn-primary,.selectedList li{padding-top:8px;padding-bottom:8px}.RightMenu-Item,.selectedList li{padding-left:12px;padding-right:12px}.RightMenu-Main,body{overflow:hidden}.RightMenu{position:fixed;z-index:50}.RightMenu-Main{flex-direction:column;width:120px;height:auto;background-color:#232323}.RightMenu-Item,.RightMenu-Main{display:flex;flex-wrap:nowrap;justify-content:flex-start}.RightMenu-Item{flex-direction:row;align-items:center;gap:8px}.RightMenu-Item:hover{background-color:#601ed1}.TopBar .categoryMain,.TopBar .search input,.addScript .addContent,.btn-danger,.btn-danger:hover,.btn-default,.btn-default:hover,.btn-primary,.btn-primary:hover,.cardList .viewList .cardOpen,.selectedList,.text-xs,.userInput input,body{font-size:.75rem;line-height:1rem}.cardList .viewCard,.cardList .viewList,.text-sm{font-size:.875rem;line-height:1.125rem}.TopBar .categoryMain .categoryList .catagoryActive,.TopBar .search input,.selectedList li:hover,.text-light,.userInput input:focus{color:#fff}.cardList .viewList .cardOpen,.text-primary{color:#601ed1}.TopBar .categoryMain .categoryList .catagoryItem,.TopBar .categoryMain .categoryTitle .categoryOption div,.cardList .viewCard,.cardList .viewList{color:#979797}.TopBar .categoryMain .categoryList .catagoryItem:hover,.TopBar .categoryMain .categoryTitle .categoryOption div:hover,.cardList .viewCard:hover,.cardList .viewList:hover{color:#fff}.TopBar .categoryMain .categoryList .catagoryActive,.addScript .addContent,.selectedList li:hover{background-color:#601ed1}.TopBar .categoryMain .categoryList .catagoryItem,.TopBar .search input,.cardList .viewCard,.cardList .viewList{background-color:#232323}.TopBar,.selectedList,.userInput input{background-color:#161616}.cardList .viewList .cardOpen{background-color:#fff}.cardList .viewCard,.cardList .viewList{background-color:#232323}.cardList .viewCard:hover,.cardList .viewList:hover{background-color:#601ed1}.cardList .viewCard{border-radius:12px}.TopBar .categoryMain .categoryList .catagoryActive,.TopBar .categoryMain .categoryList .catagoryItem,.TopBar .search input,.addScript .addContent,.cardList .viewList .cardOpen{border-radius:9999px}.addScript .addContent,.addScript .addContent .addIcon,.addScript .addContent .addText{transition:all .3s ease-in-out}.TopBar .categoryMain .categoryList .catagoryActive,.TopBar .categoryMain .categoryList .catagoryItem{padding-top:4px;padding-bottom:4px}.TopBar{padding-top:4px}.cardList .viewCard,.userInput input{padding:8px}.TopBar,.cardList,.cardList .viewList .cardIcon{padding-left:8px;padding-right:8px}.TopBar .search input,.btn-danger,.btn-default,.btn-primary,.cardList .viewList,.selectedList li{padding-top:8px;padding-bottom:8px}.TopBar{padding-bottom:8px}.TopBar .categoryMain .categoryList .catagoryActive,.TopBar .categoryMain .categoryList .catagoryItem,.TopBar .search input,.selectedList li{padding-left:12px;padding-right:12px}.TopBar .categoryMain .categoryList,.addScript .addContent,.cardList .viewCard .cardName,.cardList .viewList,.cardList .viewList .cardName,body{overflow:hidden}.addScript{position:fixed;right:24px;bottom:48px;z-index:50}.addScript .addContent{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;width:40px;height:40px;white-space:nowrap;box-shadow:0 6px 8px rgba(66,15,141,.58)}.addScript .addContent .addIcon{transform:translateX(-25.7px) translateY(1.3px)}.addScript .addContent .addText{opacity:0;transform:translateX(10px)}.addScript .addContent:hover{width:100px;height:40px;box-shadow:0 8px 10px rgba(66,15,141,.68)}.addScript .addContent:hover .addIcon{transform:translateX(0) translateY(1.3px)}.addScript .addContent:hover .addText{opacity:1;transform:translateX(0);color:#fff}.TopBar{position:sticky;top:0;z-index:30;flex-direction:column;gap:6px}.TopBar,.TopBar .search{display:flex;flex-wrap:nowrap;justify-content:flex-start}.TopBar .search{flex-direction:row}.TopBar .search>*{flex-shrink:1}.TopBar .search input{width:100%;height:auto;border:1px solid #161616}.TopBar .search input:focus{border:1px solid #333}.TopBar .categoryMain{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:6px}.TopBar .categoryMain .categoryTitle{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center}.TopBar .categoryMain .categoryTitle .categoryOption{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:6px}.TopBar .categoryMain .categoryTitle .categoryOption div{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px}.TopBar .categoryMain .categoryList{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:3.2px}.TopBar .categoryMain .categoryList .catagoryItem{flex:none;border:1px solid #161616}.TopBar .categoryMain .categoryList .catagoryItem:hover{border:1px solid #333}.TopBar .categoryMain .categoryList .catagoryActive{flex:none;border:1px solid #161616}.TopBar .categoryMain .Wrap{flex-wrap:wrap}.TopBar .categoryMain .noWrap{flex-wrap:nowrap}.cardList{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-bottom:30px}.cardList>*{flex-grow:1}.cardList .viewList{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;width:100%;height:auto}.cardList .viewList:hover .cardOpen{display:flex}.cardList .viewList .cardIcon{font-size:24px}.cardList .viewList .cardIcon,.cardList .viewList .cardName{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}.cardList .viewList .cardName{text-overflow:ellipsis;white-space:nowrap}.cardList .viewList .cardOpen{position:absolute;display:none;right:10px;padding:4px 12px}.cardList .viewCard{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;width:80px;max-width:128px;height:auto;aspect-ratio:1/1;flex-direction:column-reverse;word-break:break-all}.cardList .viewCard .cardIcon{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;font-size:32px}.UnderBar{position:fixed;bottom:0;z-index:10;width:calc(100% - 40px);background-color:#232323}.UnderBar .underBarMain{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;width:100%}.UnderBar .underBarMain .underBarOption{display:flex}.UnderBar .viewIcon{display:flex;justify-content:center;align-items:center;font-size:18px;padding:4px}.UnderBar .viewIcon:hover{background-color:#161616}.UnderBar .help{display:flex;justify-content:center;align-items:center;font-size:18px;padding:4px;margin-right:4px}.UnderBar .help:hover{color:#fff}.UnderBar .viewActive{color:#fff;background-color:#161616}.btn-danger,.btn-danger:hover,.btn-default,.btn-default:hover,.btn-primary,.btn-primary:hover,.menuTab .menuTabItem,.selectedList,.text-xs,.userInput input,body{font-size:.75rem;line-height:1rem}.menuTab .menuTabItem,.text-default,.userInput input{color:#979797}.menuTab .Active,.menuTab .menuTabItem:hover,.selectedList li:hover,.text-light,.userInput input:focus{color:#fff}.menuTab .Active,.selectedList li:hover{background-color:#601ed1}.Pop-Main,.menuTab,.menuTab .Active{border-radius:8px}.menuTab{margin:4px;padding:4px}.scriptMain{overflow:auto}.menuTab{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;width:auto;height:30px;background-color:#000}.menuTab>*{flex-shrink:1}.menuTab .menuTabItem{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;justify-content:center;align-items:center;width:100%;height:auto}.scriptMain{width:100%;height:auto;height:calc(100% - 54px)}.btn-danger,.btn-danger:hover,.btn-default,.btn-default:hover,.btn-primary,.btn-primary:hover,.selectedList,.text-xs,.userInput input,body{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.125rem}.text-md{font-size:1rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.375rem}.text-xl{font-size:1.25rem;line-height:1.5rem}.icon-xs{font-size:.875rem;line-height:.875rem}.icon-sm{font-size:1rem;line-height:1rem}.icon-md{font-size:1.125rem;line-height:1.125rem}.icon-lg{font-size:1.25rem;line-height:1.25rem}.icon-xl{font-size:1.375rem;line-height:1.375rem}.text-default,.userInput input{color:#979797}.selectedList li:hover,.text-light,.userInput input:focus{color:#fff}.text-primary{color:#601ed1}.text-success{color:#1dff92}.text-error{color:#e84749}.font-thin{font-weight:200}.font-bold{font-weight:700}.selectedList li:hover{background-color:#601ed1}.selectedList,.userInput input{background-color:#161616}.btn-danger,.btn-default,.btn-primary,.selectedList,.userInput input{border-radius:4px}.Pop-Main{border-radius:8px}.selectedList hr{margin-top:0;margin-bottom:0;margin-left:8px;margin-right:8px}.userInput input{padding:8px}.btn-danger,.btn-default,.btn-primary,.selectedList li{padding-top:8px;padding-bottom:8px}.selectedList li{padding-left:12px;padding-right:12px}.Pop-Main{padding:16px}body{overflow:hidden}.selectedList{overflow-x:hidden;overflow-y:auto}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,60%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,60%,0)}to{opacity:1;transform:translateZ(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate-fadeIn{-webkit-animation:fadeIn .3s ease-in-out;animation:fadeIn .3s ease-in-out}.animate-fadeOut{-webkit-animation:fadeOut .3s ease-in-out;animation:fadeOut .3s ease-in-out}.animate-fadeInUp{-webkit-animation:fadeInUp .3s ease-in-out;animation:fadeInUp .3s ease-in-out}body{width:100vw;height:100vh;color:#979797;background-color:#161616;-webkit-user-select:none;-moz-user-select:none;user-select:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background-color:rgba(35,35,35,.3);border-radius:4px}::-webkit-scrollbar-thumb{background-color:rgba(35,35,35,.6);border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:#333}.iconpark-icon{width:1em;height:1em}.Pop{position:fixed;top:0;right:0;z-index:90;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:rgba(0,0,0,.72)}.Pop-Main{flex-direction:column;gap:12px;width:70%;max-width:240px;height:auto;background-color:rgba(35,35,35,.8);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border:.68px solid #333}.Pop-Main,.Pop-Option{display:flex;flex-wrap:nowrap;justify-content:flex-start}.Pop-Option{flex-direction:row;gap:8px}.btn-default{flex:1 1 auto;color:#979797;text-align:center;background-color:#333;border:.68px solid #333}.btn-default:hover{color:#fff;background-color:#424242;border-color:#424242}.btn-primary{flex:1 1 auto;color:#fff;text-align:center;background-color:#601ed1;border:.68px solid #601ed1}.btn-primary:hover{color:#fff;background-color:#6f2de1;border-color:#6f2de1}.btn-danger{flex:1 1 auto;color:#fff;text-align:center;background-color:#e84749;border:.68px solid #e84749}.btn-danger:hover{color:#fff;background-color:#eb6264;border-color:#eb6264}.userInput{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;height:auto}.userInput>*{flex-grow:1}.userInput input{border:1px solid #232323}.userInput input:focus{border:1px solid #333}.selectedList{width:100%;height:auto;max-height:200px}.selectedList li{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center}.selectedList hr{border:1px solid #333;border-top:0}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input{outline:none}