CODEWITHSUNDEEP
csssass
John Cañero
John Cañero

Reputation: 75

Sass CSS to CSS (How to Minify and Compressed)

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

Upvotes: 2

Views: 1851

Answers (1)

Matthias
Matthias

Reputation: 223

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"
},

Upvotes: 2

Related Questions