less的学习(@变量名)
引自:https://www.cnblogs.com/starof/p/5226739.html
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
一、浏览器端环境搭建
1、引入
less需要在body前引入<script type="text/javascript" src="less.js"></script>
2、less的css 样式处理
less允许內联和外联
內联:
<style type="text/less">
// less 代码
</style>
外联:
<link rel="stylesheet/less" type="text/css" href="文件.less"/>
二、语法
1、注释
//单行注释,编译后不显示
/*
多行注释,编译后是以原生的css注释样式输出
*/
2、变量
变量的规则:
- 以@作为变量的起始标识,变量名由字母、数字、_和-组成
- 没有先定义后使用的规定;
- 一个变量有多次赋值,以最后定义的值为最终值;
- 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接;
- 定义时 "@变量名: 变量值;" 的形式;引用时采用 "@变量名" 或 "@{变量名}" 的形式;
- 存在作用域,局部作用域优先级高于全局作用域。
@color: color;
@dialog: .dialog;
@suffix: fix;
// 空格将被忽略,若要保留空格则需要使用单引号或双引号
@hi: 'hello ';
@dear: there ; .dialog{
// 用于 rule属性部件,必须使用"@{变量名}" 的形式
background-@{color}: #888;
// 用于 rule属性,必须使用"@{变量名}" 的形式
@{color}: blue;
}
// 用于 选择器,必须使用"@{变量名}" 的形式
@{dialog}{
width: 200px;
}
@{dialog}::after{
content: ': @{hi}@{dear}!'; // 用于 字符串拼接,必须使用"@{变量名}" 的形式
}
@h: 1000px;
// 用于 选择器部件,必须使用"@{变量名}" 的形式
.ie-@{suffix}{
@h: 30px; // 存在作用域,局部作用域优先级高于全局作用域。
height: @h; // 用于 属性值,两种形式均可使用
line-height: 30px;
} // 1. 以@作为变量的起始标识,变量名由字母、数字、_和-组成
// 2. 没有先定义后使用的规定;
@dialog-border-color: #666;
@dialog-border-width: 10px;
@dialog-border-width: 1px; // 3. 以最后定义的值为最终值;
less的学习(@变量名)的更多相关文章
- python学习之 %s %d 以及%变量名的含义
%age是对前面age变量的引用,%d是将这个变量名为age的值加到其中,但是如果变量值为字符串类型,则这里应该写成%s 也就是说当变量值为数值类型,而且必须是整型类型 应该使用%d 当变量值为字符串 ...
- JS怎么动态命名变量名
[摘要]本文是对JS怎么动态命名变量名的讲解,对学习JavaScript编程技术有所帮助,与大家分享. 1.用eval,例子: 1 2 3 4 5 6 7 <script> var Thr ...
- 3-python学习——变量
变量是我所接触过的编程语言中都具有的一个概念,只是这个概念有的强有的弱罢了. 1.什么是python的变量 变量这个东西怎么解释呢?不怎么好说. 这么说吧,变量就相当于一个代名词,或者说是名字. 计算 ...
- 阿里 Java 手册系列教程:为啥强制子类、父类变量名不同?
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 目录 父子类变量名相同会咋样? 为啥强制子类.父类变量名不同? ...
- shell脚本学习-变量
跟着RUNOOB网站的教程学习的笔记 shell变量 shell变量的命名 定义变量时,变量名不加美元符号($,PHP语言中需要),如: name="runoob" 注意,变量名与 ...
- 7. 由一道ctf学习变量覆盖漏洞
0×00 背景 近期在研究学习变量覆盖漏洞的问题,于是就把之前学习的和近期看到的CTF题目中有关变量覆盖的题目结合下进一步研究. 通常将可以用自定义的参数值替换原有变量值的情况称为变量覆盖漏洞.经常导 ...
- (编程语言+python+变量名+垃圾回收机制)*知识点
编程语言 从低级到高级的发展的过程 1.机器语言 计算机是基于电工作的.(基于高.低电平 1010010101011) 如果用机器语言表现一个字符的意思需要多段代码的行.但是计算机读取的快. 所以机器 ...
- shell script test指令的测试功能 &和&&,|和|| 区别 变量名赋值=号前后的空格问题(天坑)
小程序告一段落,达到阶段性目标.下一步继续Linux的学习....脑子不够用啊...真费... 书中介绍..检测系统某些文件或者相关属性时,用test指令.. 例如.测试某个文档目录是否存在可以 t ...
- 二、Python基础(input、变量名、条件语句、循环语句、注释)
一.input用法 input在Python中的含义为永远等待,直到用户输入了值,从而将所输入的值赋值另外的一个东西. n=input('请输入......') 接下来用一个例子学习input的用法 ...
随机推荐
- InternalError (see above for traceback): Blas GEMM launch failed
训练BiLSTM模型的时候报错: InternalError (see above for traceback): Blas GEMM launch failed : a.shape=(32, 200 ...
- Tomcat出现The origin server did not find a current representation for the target resourc...
访问页面出现404 解决方法: https://blog.csdn.net/dbc_121/article/details/79204340 我的问题主要还是在tomcat调整上, 对了,关于loca ...
- C# Tuple<T1,T2....T>元组的使用
1) 先说组元:一个数据结构,由通过逗号分割的,用于传递给一个程序或者操作系统的一系列值的组合. NET Framework 直接支持一至七元素的元组 Tuple<T1> Tuple< ...
- 解决.NET iis初次加载超级慢
禁止证书的验证过程:1.在下面aspnet.config文件中加入下面内容: 32位系统:C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspne ...
- airflow中的两个参数
'trigger_rule':'all_done','retry_delay':timedelta(),
- netframework webapi exceptionless
1.webapi项目 添加nuget exceptionless webapi 2.在exceptionless server端添加项目,注意key 3.修改api项目的webconfig &l ...
- [Android] macOS的Android Studio快捷键
- 快速输入serialVersionUID - - 设置,左上角,Android Studio -> Preferences -> 搜索“Serializable class witho ...
- UI框架搭建DAY1
分析:UI框架主要是为了用户(使用框架的程序猿)更快捷.方便地开发UI,UI框架的好处还在于解耦,使得程序更具有灵活性. UI框架的核心是窗口的管理,窗口管理的主要任务就是显示窗口和关闭窗口. 因为窗 ...
- html5,dom操作1
<body> <script>function hwd(){ var bb=document.getElementById('bt');// alert(bb.innerHTM ...
- Python 语言来编码和解码 JSON 对象
Json函数: json.dumps: Python标准库中的json模块,集成了将数据序列化处理的功能. 将 Python 对象编码成 JSON 字符串 语法: json.dumps(obj, sk ...