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 until today’s sun, so something about working with old HTML & CSS. some projects I know , and most web developers will categorize this task the same. Writing HTML & CSS is a task that I categorize as long and boring There is a remedy for this problem, , these are tools that make you avoid repetition and achieve more. preprocessors 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 files to generate files with the . .scss .css Sass preprocessor for CSS Also, I’m going to display the same process with files, these are for generating files and are read by the . .haml .html Haml preprocessor for HTML Here is an example file called showing the syntax used when working with a file, this file is specific to the Sass CSS preprocessor. example.scss .scss : ; : ; : ; : solid ; : ; : (sta: flex-start, end: flex-end, cen: center, str: stretch, bas: baseline); @ , in { #{ } { - : ;
  }
} { { : ;
  }
} %heading-geek { : ;
} {
  @ %heading-geek; : ;
} { : ; : none;
  &:hover { : ; : ;
  }
  @ (min-width: 768px) { : ;
  }
} // Defining variables $normal_text_medium 1.2rem $dark_text #2F2D2C $geek_green #8EDE61 $green_border 3px $geek_green $background_grey #676C65 $flex-align-items // Iterating over mappings each $key $value $flex-align-items .f-a-i- $key flex align-items $value // Nesting selectors .header nav background-color $background_grey // Using placeholder classes border-left $green_border // Extending other classes .header__h1 extend color $dark_text // Pseudoclasses and media queries inside one rule .header__links color $dark_text text-decoration color $geek_green background-color $background_grey media font-size $normal_text_medium Accepting such an exchange means you’ll be more productive and will adhere to the . When you are done, go to your terminal and translate the files. Below is the way you’ll do this with Sass. DRY principle $ sass example.scss example.css What do you get after doing the later activities? The or file that you are used to! Usually with more lines and characters that the files read by the preprocessor. .html .css Here is the output provided by the Sass preprocessor of the file . example.scss { - : flex-start; } { - : flex-end; } { - : center; } { - : stretch; } { - : baseline; } { : ; } { : solid ; } { : ; } { : ; : none; } :hover { : ; : ; }
  @ (min-width: 768px) { { : ; } } .f-a-i-sta flex align-items .f-a-i-end flex align-items .f-a-i-cen flex align-items .f-a-i-str flex align-items .f-a-i-bas flex align-items .header nav background-color #676C65 .header__h1 border-left 3px #8EDE61 .header__h1 color #2F2D2C .header__links color #2F2D2C text-decoration .header__links color #8EDE61 background-color #676C65 media .header__links font-size 1.2rem The result that you wanted is the same that if you worked directly in the or file, but done in less time, and avoiding repetition. .html .css 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 Haml example top heading link link link !!! 5 -# Use of attributes % { => } html :lang "en" % head % { => } meta :charset "utf-8" % { => , => } meta :name "viewport" :content "width=device-width,initial-scale=1" % {"http-equiv" => "X-UA-Compatible", => } meta :content "ie=edge" % { => , => } meta :name "author" :content "santiago-rodrig" -# Specifying content % title % { => , => } link :rel "stylesheet" :href "css/main.css" % body -# Nesting elements and adding classes % header .header % h1 .header__h1 % nav % ul .header__ul % li % a .header__links % li % a .header__links % li % a .header__links Second, how to convert the input file to the file that you want. example.html $ haml example.haml example.html Lastly, how the result looks. Haml example top heading link link link <!DOCTYPE html> < = > html lang 'en' < > head < = > meta charset 'utf-8' < = = > meta content 'width=device-width,initial-scale=1' name 'viewport' < = = > meta content 'ie=edge' http-equiv 'X-UA-Compatible' < = = > meta content 'santiago-rodrig' name 'author' < > title </ > title < = = > link href 'css/main.css' rel 'stylesheet' </ > head < > body < = > header class 'header' < = > h1 class 'header__h1' </ > h1 < > nav < = > ul class 'header__ul' < > li < = > a class 'header__links' </ > a </ > li < > li < = > a class 'header__links' </ > a </ > li < > li < = > a class 'header__links' </ > a </ > li </ > ul </ > nav </ > header </ > body </ > html 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 to write .html and .css files. 2. Preprocessors do the job, your favorite. 3. You can be if you learn how to use effective tools! better ways go and find more productive I’ll leave here links of my online profile for sites like and . If you want to talk about something related to the field of web development there you reach me. Happy coding! Github LinkedIn

How To Type HTML & CSS Effectively

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Live Updates in Ruby on Rails with ActionCable Feature

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Live Updates in Ruby on Rails with ActionCable Feature

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps