首页 > 代码库 > Less入门二 变量

Less入门二 变量

2024-08-09 15:24:25   220人阅读

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入门二 变量


联系
我们