Write your own scss-compiler
If you want to be a software developer, you have to study. On the internet, you can find a lot of online courses and books. After that, you can write a pet-project, npm-package or another library and add the project to GitHub.
I think that every software developer must write CMS, compiler/interpreter or JavaScript library for building web-interfaces. It is excellent practice because the 10,000-hour rule is not a myth. I wrote CMS twice. And now is a great time for writing a compiler.
Why do developers write compiler/interpreter?
A compiler can transform code written in one computer language into another computer language. If your program can’t be executed directly, you have to use a compiler to produce an executable program.
For example, moderns browsers can run only JavaScript-code. But if you don’t like JavaScript, you can write code in other languages and compile it into JavaScript.
An interpreter doesn’t compile the code. It parses code and executes it directly. There are many compiled computer languages like Ruby, Python, Javascript and others.
Writing a compiler
Between compiler and interpreter, I decided to write a compiler. I didn’t want to write a compiler for programming languages. I had a choice to write a stylesheet language like SASS or markup language like HAML. And I chose SASS.
Then, I had to choose the functionality: Multiline comments, Variables, Mixins and Nesting selectors.
The structure of the compiler
The compiler consists of two parts (machine and CLI).
CLI is a simple command line interface.
The Machine is the main part that includes: parser, transformer and compiler.
Parser
Here is the logic of parsing text to nested AST (abstract syntax tree). It is a tree representation of the abstract syntactic structure of source code. AST is a useful structure for further manipulation.
For example:
We have a CSS-file like this.
The parser will parse the text, destroy comments and then, split the text by symbols ‘;’, ‘{‘, ‘}’. After that, we will have an array of strings.
After that, the parser will wrap each element of the array to an instance of abstract node.
We have an array of objects, but the structure is not nested. After that, the parser will transform the array to AST, and we will have AST for further manipulation.
Another example of more difficult structure.
Before, SCSS-file
After, AST
Transformer
Here is the logic of transformations nested AST to not nested. The transformer works by the algorithm:
1)Traverse AST and transform nested node to not nested
2)Traverse AST and transform each AstNode
For example, CSS-file like this:
After passing through the Parser and the Transformer, will be transformed into:
Another example:
before, SCSS-file
after, AST
Compiler
Here is the logic of compilation the AST to a file.
The compiler works by the algorithm:
1) Traverse AST and reduce each reducible node
2) Traverse AST and print each printable node
After all of this, we will have valid CSS-file.
Conclusion
Unfortunately, my version of SCSS is not supporting all original features. But it was a great experience for me and a personal challenge. You can see source-code in GitHub. All information is in README-file.
