Less 是一门很神奇的语言,在第一个篇已经见到了, 那么Less到底有哪些神奇了, 让我们一个个来探索吧。
做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情,果断学习之!
做为变量 就是和其他语言一样可以多处使用, 好了就简单的写一个吧, 说得再多不动手可是不行的哦
less代码如下
@sky-blue:#63B8FF;
@deep-blue:@sky-blue + #111;
.content {
background-color: @deep-blue;
}
分析: 定义两个变量sky-blue, deep-blue 变量赋值也可以用运算符,很神奇吧
由于sky-blue的值为16进制,当然是可以相加哦, 至于能不能进行减法 乘法 除法,我想按捺不住而又聪明的你已经开始行动了
上面less代码通过less的编译生成的css代码为
.content {
background-color: #74c9ff;
}
让我来操作一些字符串吧
less代码
@boy: "I am boy.";
@var: 'boy';
a:after
{
content: @@var;
}
分析 此段代码可以通过使用变量的值作为变量名,是不是不知不觉竖起大拇指呢
html代码如下
<!-- 此处省略一万字 -->
<body>
<a></a>
</body>
<!-- 此处省略一万字 -->
代码解析为css代码如下
a:after {
content: "I am boy.";
}
主要 less里面的变量是常量 只能进行初始赋值,不能多次赋值~! 啊怎么能这样
既然不能改变,那就尽情的去享受less带来的魅力吧
转载于:https://blog.51cto.com/ernestw/1593983