如何制作HTML / CSS预处理器？

Question

我是一名后端开发人员，现在我正在开发一个webapp，需要了解有关sass，css，html，js的更多信息，以帮助我的前端合作伙伴。

作为一个C＃开发，我喜欢语法，所有花括号和分号，所以我发现SCSS非常好用，比我开始寻找类似的方式来编写HTML所有的嵌套和C / C＃ / Java like syntax。

由于我没有找到任何可以这样写的html预处理器，我开始考虑自己构建一个，但就目前而言，我对预处理器的工作原理并不了解。

我开始阅读有关编译器如何工作的一些内容，但是现在我还不知道如何开始构建它。

预编译语言看起来像这样，与sass非常类似：

html{
  head{
     meta{}
     title{
       Title of the page
     }
  }
  body{
     //Comments like this
     @var variable = 10;
     h1{}
     ul{
        @for(i = 0; i<=variable; i++){
           li{
              @(i * variable);
           }
        }
     }
     @import "footer.html";
  }
}

或者，如果有一种方法可以自定义Sass语言/预处理器以使用其语法生成html。