Animation in the grid layout of css, changing the style value of the parent element through child elements, automatically compiling scss into css in VisualStudioCode, installing and configuring sass plug-ins, vsc, VSC, nth, hover, child, grid

---

foreword

When the mouse passes over the element, change the width and height of the element to twice its original size.

---

renderings

---

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;
    }
}

---

css compiled by 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;
}

.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 is automatically compiled into css

install plugin

Search vscodefor and install the Sassand Easy Sass.

---

configuration setting.json

Preferences => Settings
Find the settings page setting.jsonand copy and paste the following code into setting.jsona file to save it.
.min.cssGenerate compressed .cssfiles

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