w3toolhub

Cool CSS to LESS Online Tool

The CSS to LESS Online Tool is a great resource to help you convert your CSS codes to LESS.

CSS

LESS

Submit Copy

Sample Input

.themonic-nav .current-menu-item > a, .themonic-nav .current-menu-ancestor > a, .themonic-nav .current_page_item > a, .themonic-nav .current_page_ancestor > a {
		background: #4d90fe;
		color: #FFFFFF;
		font-weight: bold;
}
.themonic-nav ul.nav-menu, .themonic-nav div.nav-menu > ul {
  border-bottom: 5px solid #4d90fe;
}
.themonic-nav li a:hover {
  background: #4d90fe;
}
.themonic-nav li:hover {
  background: #4d90fe;
}
.categories a {
  background: #4d90fe;
}
.read-more a {
  color: #4d90fe;
}

Sample Output

@color_1: #FFFFFF;
@color_2: #4d90fe;

.themonic-nav {
	.current-menu-item {
		>a {
			background: #4d90fe;
			color: @color_1;
			font-weight: bold;
		}
	}
	.current-menu-ancestor {
		>a {
			background: #4d90fe;
			color: @color_1;
			font-weight: bold;
		}
	}
	.current_page_item {
		>a {
			background: #4d90fe;
			color: @color_1;
			font-weight: bold;
		}
	}
	.current_page_ancestor {
		>a {
			background: #4d90fe;
			color: @color_1;
			font-weight: bold;
		}
	}
	ul.nav-menu {
		border-bottom: 5px solid #4d90fe;
	}
	div.nav-menu {
		>ul {
			border-bottom: 5px solid #4d90fe;
		}
	}
	li {
		a {
			&:hover {
				background: #4d90fe;
			}
		}
		&:hover {
			background: #4d90fe;
		}
	}
}
.categories {
	a {
		background: #4d90fe;
	}
}
.read-more {
	a {
		color: @color_2;
	}
}

How to convert CSS to SCSS Online?

This is a great tool for web developers that want to convert their CSS to LESS. The tool makes it easy to convert your CSS to LESS.

Why use Cool CSS to LESS Online Tool?

It’s free, easy-to-use, and does the work for you. It saves you time and effort.

What is LESS?

LESS is a CSS extension language that is compiled into a .css file.

Tags:

,