• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 动态的样式语言less语法详解之混合属性

动态的样式语言less语法详解之混合属性

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含less语法,混合属性等相关知识,佚名 希望在学习及工作中可以帮助到您

前面介绍了less的变量和extend语法,今天在研究下混合属性(Mixin)。混合可以说是less的另一个特征,你可以将通用属性定义在一块,然后使用时直接调用此混合属性。

混合:
  在 LESS 中我们可以定义一些通用的属性集为一个选择器,然后在另一个选择器中去调用这些属性. 例如:


编译后


注意:在调用混合时,可以加括号也可以不加括号。下面这个也是对的:


如果你只想定义一个混合,则可以再选择器后面加上括号,如下:


编译后,加括号的.my-other-mixin()不会被编译。


任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.通用选择器中可以嵌套选择器。

命名空间:
  如果你想混合属性在一个更复杂的选择器,可以叠放多个id或类。如下:


如果想使用这个混合属性,你可以这样,下面四个都是等价的


}</p> <p>.c{
#outer > .inner();
}</p> <p>.c{
#outer.inner;
}</p> <p>.c{
#outer.inner();
}

你可以将混合属性定义在一个id的下面,这样就避免了与其他混合冲突。

关键字!important:
  在使用混合属性后面加上!important关键字,则混合中的所有属性都会加上关键字!important。例如:


编译后


带参数的混合:
  混合属性也可以通过括号传递参数,如下:


我们只需要在使用它的时候传递一个参数即可,如下:


当然我们也可以给参数一个默认值,这样使用的时候可以传值也可以不传值。如下:


如果我们没有传值,则会使用默认值5px。

当然我们也可以传递多个参数,如下:


编译后


从编译的结果可以看出,less也有函数重载的特性。当我们定义相同混合属性名,参数不同,然后.mixin(#008000);调用,第一和第二混合都能匹配,但是第三个缺少参数@padding的值,所以不会引用第三个混合属性。

我们不仅可以传多个值,还可以指定属性名传值,如下:


关键字@arguments:
  @arguments有特殊的含义,类似于js的arguments,他包含了传递给混合属性的所有参数,如下:


编译后


代码

您可能想查找下面的文章:

  • 动态的样式语言less语法详解之混合属性

相关文章

  • 2017-08-06两个div在同一行且不换行的两种方法
  • 2017-08-06CSS控制样式的三种方式(优先级对比验证)
  • 2017-08-06详细介绍CSS中的伪选择器
  • 2017-08-06使用CSS清除按钮和超链接点击时产生的虚线
  • 2017-08-06利用CSS实现禁止双击选择页面内容的实例展示
  • 2017-08-06ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏
  • 2017-08-06用纯css3实现的图片放大镜特效效果非常不错
  • 2017-08-06css中常用的几种居中方法(推荐)
  • 2017-08-06全局CSS的设置(基础样式重置)
  • 2017-08-06一句话解决傻傻的多核浏览器切换

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS小技巧 导航中鼠标经过变换文字的实现代码
    • CSS控制漂亮的网页打印效果示例代码
    • css网页布局中文字排版的属性和用法
    • 通过CSS禁用页面内容选中和复制操作
    • 纯CSS3实现地球自转实现代码(图文教程附送源码)
    • 15个CSS常识 注意一下吧
    • CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
    • 如何解决IE6/IE7不识别display:inline-block属性
    • css控制文本实现越界省略号以及自动换行
    • 浅析CSS 属性之中经常出现的百分比

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有