Блог

Я скопировал шаблон css и добавил его в свой личный файл css. Скопированный css выглядит следующим образом (и еще несколько ниже):

 @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);
  }
}
 

ПРОБЛЕМА: Как только я помещаю некоторые верхние строки в комментарий, я получаю сообщение об ошибке в

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

Вы видите body , что помечено как комментарий выше. То же самое произойдет, если я начну комментарий в начале или если я только отмечу раздел выше body как комментарий. Если в качестве комментария ничего не отмечено, ошибка не выделяется. (используя Eclipse в качестве IDE).

Почему это так?!

Как уже указывал @j08691, вы пытаетесь использовать SCSS внутри CSS файла.

Так SASS как является транспилятором для CSS . Вы можете записать свои CSS правила в *.scss файл, чтобы использовать их вместе. *.css В конце вы получите файл. Так что вам не нужно ничего переписывать. Все, что вам нужно, — это SASS компилятор и переименовать свой файл в *.scss .

Вы можете узнать больше о SASS (более часто используемых) / или LESS здесь:
https://sass-lang.com
https://lesscss.org

В зависимости от используемой вами настройки существуют SASS и LESS компиляторы для большинства распространенных сред. Вы можете посмотреть dart sass, например, это хороший выбор для большинства проектов.

Если вы просто хотите скомпилировать SASS CSS , вы можете установить его с npm помощью, а затем использовать команду sass watch.