Add variables in SCSS and use math operators for variables

lulunac27a · lulunac27a · commit 074fd93f3da9 · 2024-05-19T21:33:12.000-05:00
diff --git a/src/components/TodoList.scss b/src/components/TodoList.scss
@@ -1,5 +1,7 @@
+@use "sass:math";
+$margin: 10px;
 h3 {
-  margin: 10px 0 0;
+  margin: $margin 0 0;
 }
 
 ul {
@@ -9,7 +11,7 @@ ul {
 }
 
 li {
-  margin: 5px 10px; //add line spacing between tasks
+  margin: #{math.div($margin, 2)} $margin; //add line spacing between tasks
 }
 
 a {

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
	`1`	`+@use "sass:math";`
	`2`	`+$margin: 10px;`
`1`	`3`	`h3 {`
`2`		`- margin: 10px 0 0;`
	`4`	`+ margin: $margin 0 0;`
`3`	`5`	`}`
`4`	`6`
`5`	`7`	`ul {`
`@@ -9,7 +11,7 @@ ul {`
`9`	`11`	`}`
`10`	`12`
`11`	`13`	`li {`
`12`		`- margin: 5px 10px; //add line spacing between tasks`
	`14`	`+ margin: #{math.div($margin, 2)} $margin; //add line spacing between tasks`
`13`	`15`	`}`
`14`	`16`
`15`	`17`	`a {`