Type HTML & CSS the effective way
I wouldn’t like to carry out the same long and boring known task after somebody told me that there is a better and shorter way of doing the same.
I’ve done some projects until today’s sun, so I know something about working with old HTML & CSS.
Writing HTML & CSS is a task that I categorize as long and boring, and most web developers will categorize this task the same.
There is a remedy for this problem, preprocessors, these are tools that make you avoid repetition and achieve more.
How does a preprocessor manages to do this task? You need to work on different files, these files are read by the preprocessor and converted into the files that you want at the end.
In this article, I’ll show examples of how to use .scss files to generate .css files with the Sass preprocessor for CSS.
Also, I’m going to display the same process with .haml files, these are for generating .html files and are read by the Haml preprocessor for HTML.
Here is an example file called example.scss showing the syntax used when working with a .scss file, this file is specific to the Sass CSS preprocessor.
Accepting such an exchange means you’ll be more productive and will adhere to the DRY principle. When you are done, go to your terminal and translate the files. Below is the way you’ll do this with Sass.
sass example.scss example.cssWhat do you get after doing the later activities? The .html or .css file that you are used to! Usually with more lines and characters that the files read by the preprocessor.
Here is the output provided by the Sass preprocessor of the file example.scss.
The result that you wanted is the same that if you worked directly in the .html or .css file, but done in less time, and avoiding repetition.
I’ve been showing only CSS preprocessor examples. Essentially, there is no difference if you do this instead with an HTML preprocessor.
I’ll repeat the same steps using the Haml preprocessor.
First, the input file example.haml.
Second, how to convert the input file to the example.html file that you want.
haml example.haml example.htmlLastly, how the result looks.
What do you think? You are more productive now! I’m sure you’ll never go back to plain old HTML & CSS (but of course you should be already familiar with both).
The main ideas are summarized as the following ones.
1. There are better ways to write .html and .css files.
2. Preprocessors do the job, go and find your favorite.
3. You can be more productive if you learn how to use effective tools!
I’ll leave here links of my online profile for sites like Github and LinkedIn. If you want to talk about something related to the field of web development there you reach me. Happy coding!
