why do I get css error when markig lines as a comment-CodePudding

I have copied a css template and appended it to my personal css file. The copied css is the following (and some more underneath):

@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Open Sans Condensed:300,700');

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin position($top: auto, $left: auto, $bottom: auto, $right: auto) {
  position: absolute;
  top: $top;
  left: $left;
  bottom: $bottom;
  right: $right;
}

@mixin centered() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


*, 
*::before, 
*::after {
  box-sizing: border-box;
}

*::before, 
*::after {
  content: '';
  display: block;
  position: absolute;
}
/*
body {
  background-color: #F3F4F5;
  background-image: radial-gradient(#F3F4F5 0, darken(#F3F4F5, 10%) 100%);
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: 'Pacifico', cursive;
}*/

.title {  
  padding: 10px 20px;
  
  span {
    font-size: 20px;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
  }
}

PROBLEM: As soon as put some of the upper lines into a comment, I receive an error in

title {  
  padding: 10px 20px;
  
  span {                    <-- error colon expected
    font-size: 20px;        <-- error semi-colon expected
    font-weight: bold;      <-- error { expedted
    color: rgba(0,0,0,0.5); <-- error { expected
  }
}

You see body marked as a comment above. The same happens if I start the comment in the beginning or if I only mark the section above body as a comment. If nothing is marked as a comment, no error is highlighted. (using Eclipse as IDE).

Why is this so?!

CodePudding user response：

As @j08691 has already pointed out you are trying to use SCSS within a CSS file.

Since SASS is a transpiler for CSS. You may write your CSS rules inside a *.scss file so you can use both together. You will get a *.css file at the end. So you don't have to rewrite anything. All you need is a SASS compiler and rename your file to *.scss.

You can learn more about SASS (more commonly used) / or LESS here:
https://sass-lang.com
https://lesscss.org

Depending on what setup you are using there are SASS and LESS compilers out there for most common environments. You can look up dart sass for example it is a good choice for most projects.

If you just want to compile SASS to CSS you can install it with npm and then use the sass watch command.