css之网格布居中的动画、通过子元素改变父元素的样式值、VisualStudioCode中scss自动编译成css、安装和配置sass插件、vsc、VSC、nth、hover、child、grid

---

前言

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

---

效果图

---

html

<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="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"
		}
	]
}