Sass CSS to CSS (How to Minify and Compressed)

user_18350006 0
Viewed 161

may I ask a question regarding how to order them like normal CSS. It came from what I am doing in Sass CSS because of Live Sass Compiler.

It compiled like this and whenever I pressed the alt+Z button, it does not seperate per piece of line of code function but it is just compressed. How to solve this? I am new to Sass. Thank you to those who will give help.

html{box-sizing:border-box;font-size:100%}*,*::before,*::after{box-sizing:inherit}body{margin:0;padding:0;background-color:var(--background-color);color:var(--text-color);font-family:"Open Sans",sans-serif}h1,h2,h3{font-weight:700;line-height:1.1;margin-top:0}p{margin-top:0}a,a:visited,a:active{text-decoration:none}:root{--background-color: rgb(28, 28, 28);--text-color: #fff}.grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:40px;width:min(100% - 40px,1000px);margin-inline:auto}@media(min-width: 56.25em){.grid{grid-template-columns:2fr 1fr;grid-template-rows:auto}}.grid__main,.grid__sidebar{padding:40px}.grid__main{background-color:#00008a}@media(min-width: 43.75em){.grid__main{background-color:#006b00}}@media(min-width: 56.25em){.grid__main{background-color:#d18800}}.grid__sidebar{background-color:#909;text-align:center}@media(min-width: 56.25em){.grid__sidebar{text-align:left}}@media(max-width: 56.24875em){.grid__sidebar{text-align:center}}@media(max-width: 43.7485em){.grid__sidebar{text-align:right}}

enter image description here

sass css
1 Answers

This should help:

Simple Sass Compile Setup

Essentially you set up two scripts in your package.json file. One for compiling code in development and one for production. For Production it will be compressed while it won't be in the dev script.

"scripts": {
    "sass-dev": "sass --watch --update --style=expanded assets/scss:assets/css",
    "sass-prod": "sass --no-source-map --style=compressed assets/scss:assets/css"
},
user_35300840
Related