Less重点功能-混合Mixins

最新推荐文章于 2021-03-19 19:47:21 发布

AsaZyf

最新推荐文章于 2021-03-19 19:47:21 发布

阅读量436

点赞数

CC 4.0 BY-SA版权

文章标签： Less Mixins Less混合 Less重点功能

本文链接：https://blog.youkuaiyun.com/AsaZyf/article/details/86532762

Less 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Less预处理器实现浮动布局，通过定义.fl()和.fr()混入简化CSS代码，实现在HTML中创建左浮动的logo和导航菜单，以及右浮动的个人资料。该方法有助于提高代码复用性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Less：

//加上括号，编译时当做被调用处理，不会直接在css中输出
.fl(){
    float:left;
}
.fr(){
    float: right;
}

.logo{
    .fl();
}
.nav{
    .fl()
}
.profile{
    .fr()
}

CSS：

.logo {
  float: left;
}
.nav {
  float: left;
}
.profile {
  float: right;
}

HTML：

.logo+nav.nav>a.-item{课程}+a.-item{职业路径}+a.-item{实战}+a.-item{猿问}+a.-item{手记}|bem

<div class="logo"></div>
	<nav class="nav">
		<a href="" class="nav__item">课程</a>
		<a href="" class="nav__item">职业路径</a>
		<a href="" class="nav__item">实战</a>
		<a href="" class="nav__item">猿问</a>
		<a href="" class="nav__item">手记</a>
    </nav>