Published: July 22 2022

Do I need Sass?

Sass

Introduction.
I wrote Sass.
Environment for using Sass
Conclusion.

Introduction.

I've avoided Sass until now, but I've been thinking about whether I should introduce it now.

I wrote Sass.

Nesting, use of variables, etc. seem to be advantages.
(Are there any other advantages that would make me switch from CSS?)

scss
#main {
  border: 1px solid #ff0000;
    .entry {
      margin: 10px;
      border: 1px solid #00a0e9;
      p {
        background-color: #e97300;
      }
    }
}

After compiling
↓↓↓

css
#main {
  border: 1px solid #ff0000;
}
#main .entry {
    margin: 10px;
    border: 1px solid #00a0e9;
}
#main .entry p {
    background-color: #e97300;
}

Is this convenient?

Environment for using Sass

It looks like I need an editor and a compiler.
The editor is the usual Visual Studio Code.
I wonder if the compiler is terminal for mac?

ターミナル
sass style.scss:style.css

It does not work.
It looks like I need to install Sass.
This is where it falters.
(Well, I could if I wanted to...)

Conclusion.

I don't need Sass. (In my case)
I didn't see much benefit in nesting. (Maybe not if it gets more complicated)
Variables come standard in CSS with a handy thing called :root.
Also, if you write CSS in Javascript, you can make it a variable, and if you embed PHP or something, it would be even easier.
(I don't think we need to go that far at this point.)
By the way, calc can also be used to do calculations.

CSS
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

Just call it like ↓.
background-color: var(--main-color);

Sass, well, it might be useful once you get used to it.
I was curious about it because it also had a kind of cool image.

I'll reconsider it the next time a large-scale project comes in.

PROFILE

C:blanc: I am a freelance programmer.

COMMENT
Submitted. Comments will appear after approval.
あと150more characters