Tell us what’s happening:
I am working on this PJ : https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer
and I don’t understand how SCSS applies to HAML.
Here is the code : https://codepen.io/hai-dozo/pen/VwYKJpg
There is only #app on HAML. I don’t see any classes such as " .toolbar ",
" .editorWrap ", " .previewWrap " are defined in the HAML neither in the JS.
If anybody else know how it works, please help me to understand.
Thank you!
SCSS isn’t really applying to HAML. HAML is being used to generate the HTML. SCSS is being used to generate the CSS which styles the rendered HTML.
The HAML in this project is only used to translate #app into <div id="app"></div>. If you modify the CodePen configuration to not use HAML you’ll see that nothing is rendered but #app. Only #app is shown because that is not valid HTML—but since HTML is forgiving it renders that fragment as text.
After removing HAML, if you replace #app with <div id="app"></div>, you’ll see that the CodePen works as expected again.
The other components you see rendered are being generated by React. You can see at the very bottom of the JavaScript panel there is:
ReactDOM.render(<App />, document.getElementById('app'));
I’d suggest revisiting the freeCodeCamp React lessons if you are not sure how the toolbar, editor, and previewer are being generated based on that and the rest of the JavaScript.