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

Less入门二 变量

时间:2014-12-24 06:37:07      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:less 前端 web js css

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带来的魅力吧技术分享



本文出自 “ernest” 博客,转载请与作者联系!

Less入门二 变量

标签:less 前端 web js css

原文地址:http://ernestw.blog.51cto.com/7241190/1593983

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