码迷,mamicode.com
首页 > 其他好文 > 详细

Less定义变量

时间:2019-08-10 14:01:36      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:copy   命名法   family   sof   直接   属性   语句   tom   bottom   

1. 定义:

使用 @ 符号来定义变量 ,在Less中开头是 @ 则是变量,关于变量的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写,从第二个开始,单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……,当然也是可是使用香肠命名法用下划线“_”来命名。如,box_main,border_bottom,……

2. 使用:

在样式属性值中使用时,直接用 @variable 即可调用变量;

在其他地方,包括选择器名称、属性名称、URL和@import语句使用时,变量必须以插值的形式使用,例如:

技术图片
@variable: 200px; //定义变量作为样式属性值使用
@classname: .nav_a; //变量值不可用中划线,此变量作为插值用于选择器名称


@{classname}{ //作为插值 必须加 {}
    width: @variable; //作为属性值直接调用
}
技术图片

输出:

.nav_a {
  width: 200px;
}

Less定义变量

标签:copy   命名法   family   sof   直接   属性   语句   tom   bottom   

原文地址:https://www.cnblogs.com/xiaozhang666/p/11331115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!