Web前端之Css网格布居中的动画、VSC中Scss自动编译成Css、通过子元素改变父元素的样式值、安装和配置Sass插件、样式特殊单位、hover、child、grid、nth、fr

前言

鼠标经过元素时，改变元素的宽高为原来的两倍。

效果图

Html

<divclass="container"><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div></div>

Scss

body{background-color:#23262d;}.container{width:400px;height:400px;margin:0 auto;margin-top:50px;display:grid;--c1:1fr;--c2:1fr;--c3:1fr;--r1:1fr;--r2:1fr;--r3:1fr;grid-template-columns:var(--c1)var(--c2)var(--c3);grid-template-rows:var(--r1)var(--r2)var(--r3);grid-gap:10px;}@for$i from 0 to 9{.item:nth-child(#{$i + 1}){background-color:hsl($i*40%,100%,64%);}// 通过hover改变父元素中的内容 // 鼠标经过子元素改变父元素内容 .container:has(.item:nth-child(#{$i+1}):hover){$r:floor($i / 3)+1;$c:$i % 3+1;--r#{$r}:2fr;--c#{$c}:2fr;}}

通过Scss编译出来的Css

body{background-color:#23262d;}.container{width:400px;height:400px;margin:0 auto;margin-top:50px;display:grid;--c1:1fr;--c2:1fr;--c3:1fr;--r1:1fr;--r2:1fr;--r3:1fr;grid-template-columns:var(--c1)var(--c2)var(--c3);grid-template-rows:var(--r1)var(--r2)var(--r3);grid-gap:10px;}.item:nth-child(1){background-color:#ff4747;}.container:has(.item:nth-child(1):hover){--r1:2fr;--c1:2fr;}.item:nth-child(2){background-color:#ffc247;}.container:has(.item:nth-child(2):hover){--r1:2fr;--c2:2fr;}.item:nth-child(3){background-color:#c2ff47;}.container:has(.item:nth-child(3):hover){--r1:2fr;--c3:2fr;}.item:nth-child(4){background-color:#47ff47;}.container:has(.item:nth-child(4):hover){--r2:2fr;--c1:2fr;}.item:nth-child(5){background-color:#47ffc2;}.container:has(.item:nth-child(5):hover){--r2:2fr;--c2:2fr;}.item:nth-child(6){background-color:#47c2ff;}.container:has(.item:nth-child(6):hover){--r2:2fr;--c3:2fr;}.item:nth-child(7){background-color:#4747ff;}.container:has(.item:nth-child(7):hover){--r3:2fr;--c1:2fr;}.item:nth-child(8){background-color:#c247ff;}.container:has(.item:nth-child(8):hover){--r3:2fr;--c2:2fr;}.item:nth-child(9){background-color:#ff47c2;}.container:has(.item:nth-child(9):hover){--r3:2fr;--c3:2fr;}

Scss自动编译成Css

安装插件

在vscode的扩展中分别搜索并安装Sass和Easy Sass。

配置setting.json

首选项 => 设置
在设置页面找到setting.json将下面的代码复制粘贴到setting.json文件中保存即可。
.min.css生成压缩的.css文件

{"files.associations":{"*.css":"scss"},"easysass.compileAfterSave":true,"easysass.excludeRegex":"_","easysass.formats":[{"format":"compact","extension":".css"},{"format":"compressed","extension":".min.css"}]}