css转换less_如何将旧CSS转换为LESS

在之前的文章中 ，我们介绍了LESS的许多基本知识。 如果你一直关注我们的LESS系列中，我们认为，在这一点上，你已经有关于如何使用是个好主意变量 ， 混入和操作的LESS 。

我们还提到了如何使用应用程序或编译器将LESS转换为常规CSS 。 但是，我们该如何做相反的事情； 将CSS转换为LESS？ 好吧，这个技巧是给你的。

使用工具

随着CSS预处理器的日益普及，一些旨在使Web设计人员或开发人员的生活更轻松的新工具和应用程序，例如CSS2Less 。

该工具使我们可以将常规CSS转换为LESS。 因此，让我们尝试一下。 我的旧文件中有以下CSS规则要转换。

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;
}

这是结果。

nav a:hover, nav a:active {
    background-color: #fff;
}
nav {
    height: 40px;
    width: 100%;
    background: #000;
    border-bottom: 2px solid #fff;
    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;
        a {
            border-right: 1px solid #fff;
            box-sizing:border-box;
        }
    }
}

如上所示，我们的旧CSS现在像在LESS中一样嵌套。

局限性

但是，我们还可以看到转换结果中的一些限制。 在旧CSS中，我们有几种相同的颜色，例如在这两个声明border-bottom: 2px solid #fff; 和border-right: 1px solid #fff; 我们两个边界都是白色的。 在LESS中，我们实际上可以将此常量存储在Variable中 。

它也不会窝和分离伪*与符号（＆）符号，如下面的规则li:last-child和nav a:hover, nav a:active 。 它们只是保持原样，我们实际上可以通过这种方式简化规则集。

li {
	&:first-child {

	}
	a {
		&:hover {

		}
		&:active {

		}
	}
}

结论

尽管目前仍存在局限性，但此工具在节省嵌套CSS规则集的时间方面非常有帮助。 我们只需要手动完成其余的工作即可； 直到上述限制得到解决为止。

翻译自: https://www.hongkiat.com/blog/css-to-less/