1 变量
我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护。 理想状态,应是下面这样:
const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor); $(".arctive").css("background-color",bgColor);
- 只要我们修改 bgColor这一个变量, 整个页面的背景颜色都会随之改变。
- 而 Less 中的变量十分强大,可化万物,值得一提的是,其变量是常量 ,所以只能定义一次,不能重复使用。
1.1 值变量
/* Less */ @color: #999; @bgColor: skyblue;//不要添加引号 @width: 50%; #wrap { color: @color; width: @width; } /* 生成后的 CSS */ #wrap { color: #999; width: 50%; }
以 @ 开头 定义变量,并且使用时 直接 键入 @名称。
在平时工作中,我们就可以把 常用的变量 封装到一个文件中,这样利于代码组织维护。
@lightPrimaryColor: #c5cae9; @textPrimaryColor: #fff; @accentColor: rgb(99, 137, 185); @primaryTextColor: #646464; @secondaryTextColor: #000; @dividerColor: #b6b6b6; @borderColor: #dadada;
1.2 选择器变量
让 选择器 变成 动态
/* Less */ @mySelector: #wrap; @Wrap: wrap; @{mySelector}{ //变量名 必须使用大括号包裹 color: #999; width: 50%; } .@{Wrap}{ color:#ccc; } #@{Wrap}{ color:#666; } /* 生成的 CSS */ #wrap{ color: #999; width: 50%; } .wrap{ color:#ccc; } #wrap{ color:#666; }
1.3 属性变量
可减少代码书写量
/* Less */ @borderStyle: border-style; @Soild:solid; #wrap{ @{borderStyle}: @Soild;//变量名 必须使用大括号包裹 } /* 生成的 CSS */ #wrap{ border-style:solid; }
1.5 声明变量
有点类似于 下面的 混合方法
- 结构: @name: { 属性: 值 ;}; - 使用:@name(); /* Less */ @background: {background:red;}; #main{ @background(); } @Rules:{ width: 200px; height: 200px; border: solid 1px red; }; #con{ @Rules(); } /* 生成的 CSS */ #main{ background:red; } #con{ width: 200px; height: 200px; border: solid 1px red; }
2嵌套
& 的妙用
& :代表的上一层选择器的名字,此例便是header。
/* Less */ #header{ &:after{ content:"Less is more!"; } .title{ font-weight:bold; } &_content{//理解方式:直接把 & 替换成 #header margin:20px; } } /* 生成的 CSS */ #header::after{ content:"Less is more!"; } #header .title{ //嵌套了 font-weight:bold; } #header_content{//没有嵌套! margin:20px; }