HTML to CSS/SASS/LESS Online Converter


Hello everyone, my name is Alex Posidelov
and today I’m gonna show you how to speed up and simplify HTML & CSS work using my online
converter. I usually devide any HTML & CSS work into 3 steps: First step is creating
HTML code, 2nd step is creating empty css or sass selectors that describe our HTML code.
And 3rd step is filling up our selectors with CSS properties. And in this video I’m gonna
show you how to speed up the 2nd step. And as an example I’ll pick this simple page.
It consists of title and 2 parts: the list and form. Let’s start with first step. I’ll
open my HTML file and I have HTML code for this page created but I’ll go through it quickly.
As root element we have l-contact div. It consists of two parts: div title-group and
form. div title-group consists of a link and list with 4 items inside, each item has a
class per icon. The form consists of 3 text fields inputs and one textarea and submit
button and 3 text fields are wrapped into div with form-list class. Let’s move to next
step but before showing you my method I am gonna show you how I’d implement 2nd step
without my online converter bcz I want you to estimate and compare differents between
them and you’ll see how much operations eats each one. I’ll copy class of root div, switch
between files, write a dot, paste class name, create brackets, create spaces, go back to
html file, copy title-group class, go back, dot, paste, brackets, spaces. Same with link..
title, brackets, space, h2, list, ul, dot, contact-list, brackets, spaces, here we have
4 classes, bcz most of them have separate styles, different styles 🙂 Ready, so next
this is a form, copy id of form, after this div form, name of form, copy form-list, brackets-enter,
here we have 3 ids : name-field – brackets, email-field, description and last is btn-send,
we’ll past it here. As you can see this method makes us to use a lot of copings, pastings,
swiching between files, making spaces etc. All these actions take a lot of time and energy.
Now I’ll show you my method. I’ll go back to HTML file and copy all HTML code, I go
back to browser and open my online converter by clicking on my bookmark. Here I have HTML
field with selected content so I can click CTRL+V, paste and replace all content by default.
After pasting I have all my HTML code formatted automatically and the styles were generated
automatically as well. Styles are generated in SCSS/LESS format by default. You can also
switch in CSS mode and they will be regenerated automatically in CSS format but I use SCSS
by default and it’s ok for me. Also converter has a number of settings such as Selector
Tag Name, Selector Priority, Class Order, Raw Tags and Exclusions: Excluded classes
with list of all classes that are present in HTML code, all Ids that are present in
HTML code, and all tags that are present in HTML code. In our example I’d add to excluded
tags the BR tag I don’t want to have any styles for this tag by picking
and I don’t see
anymore any br styles, selectors for br tag. Next I’ll setup Tags with Id option for SELECTOR
TAG NAME setting. Tags with Id option allows me to see all tags that have only id attribute.
In our case this is form tag bcz form tag has only Id attribute. If I select Tags with
Id – I’ll see tag name of this tag bcz I need it to recognize where’s my form. 2nd what
I’ll setup with settings is.. the goal is to see my ids for inputs: text input, email
input and textarea. Now I can see only 2 classes: form-control and form-text bcz form-control
has both inputs, form-text has textarea. To see Ids for these fields I need to put SELECTOR
PRIORITY as Id. It means that if tag has id attribute and class attribute, both of attributes,
it means that we’ll see in this case only id attribute. But if tag doesn’t have id attribute
– we’ll see in this case class attribute. So in this case automatically styles were
updated and we can see input name-field, input email-field and textarea description – everything
we need. RAW TAGS means that we can hide all tags that have no class or id attribute. In
our case we have only one tag is H2. So if we click Remove All – h2 will be disappeared
but in our case I think it’s helpful to have h2 without classes, so I’ll move back and
what else I need to fix here.. I think I’d remove l-center class bcz l-center class only
need to make div to be centered and it can be described in another file so I put l-center
class into Excluded classes and now I’ll see in 2 places title-group and form-list so title-group
now instead of l-center and form-list instead of l-center class. So I think that’s it. And
now I click on Copy btn and text is selected and copied to buffer automatically so I don’t
need to click any CTRL+C shortcuts and I’ll go back to my editor, back to SCSS file. Select
all, remove and I click CTRL+V, and see all my styles in my editor. Very very simple and
very very convinient. I made only several operations like opening converter, coping
– pasting HTML code, just some playing with interface and coping styles and pasted it
back to my editor. Thanks you for watching this video. I hope you enjoyed, leave the
comments and till the next time.

Add a Comment

Your email address will not be published. Required fields are marked *