How to Convert Old CSS to LESS

By . in Coding. Updated on .

We have covered much of the basics for LESS in our previous posts. If you have been following our LESS series, we believe that at this point you already have a good idea about how to use the Variables, Mixins and Operation in LESS.

We have also mentioned how to convert LESS into regular CSS, with an app or with a compiler. But, how do we do the opposite; to convert CSS into LESS? Well, this tip is for you.

Using a Tool

With increasing popularity of CSS preprocessor, some new tools and apps that essentially aim to makea web designer’s or developer’s life easier, such as this tool: CSS2Less.

This tool allows us to convert regular CSS into LESS. So, let’s give it a try. I have the following CSS rules from my old file to be converted.

nav {
  height: 40px;
  width: 100%;
  background: #000;
  border-bottom: 2px solid #fff;
}

nav ul {
  padding: 0;
  margin: 0 auto;
}

nav li {
  display: inline;
  float: left;
}

nav a {
  color: #fff;
  display: inline-block;
  width: 100px;
  text-shadow: 1px 1px 0px #000;
}

nav li a {
  border-right: 1px solid #fff;
  box-sizing: border-box;
}

nav li:last-child a {
  border-right: 0;
}

nav a:hover,
nav a:active {
  background-color: #fff;
}

Here is the result.

nav a:hover,
nav a:active {
  background-color: #fff;
}

nav {
  height: 40px;
  width: 100%;
  background: #000;
  border-bottom: 2px solid #fff;
}

nav a {
  color: #fff;
  display: inline-block;
  width: 100px;
  text-shadow: 1px 1px 0px #000;
}

ul {
  padding: 0;
  margin: 0 auto;
}

li:last-child a {
  border-right: 0;
}

li {
  display: inline;
  float: left;
}

li a {
  border-right: 1px solid #fff;
  box-sizing: border-box;
}

As we can see above, our old CSS is now nested like in LESS.

Limitation

However, we can also see some limitations in the results of the conversion. In the old CSS, we have several same colors, such as in these two declarations border-bottom: 2px solid #fff; and border-right: 1px solid #fff; we have both borders in white. In LESS we can actually store this constant value in a Variable.

It also does not nest and separate the pseudo-* with an ampersand (&) symbol, such as in the following rules li:last-child and nav a:hover, nav a:active. They just remain as they are, where we can actually simplify the rulesets this way;

li {
  &:first-child {
    
  }
  a {
    &:hover {
      
    }
    &:active {
      
    }
  }
}

Conclusion

Despite the limitations it currently still has, this tool can quite helpful in saving our time for nesting CSS rulesets. We only need to do the rest manually; possibly until the the limitations above are resolved.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail