1_初识less引用变量作用域变量差值

之前直接上手了一些项目,接触到了less,用起来简单又方便(比CSS香多了),

之后就想学习一下less,最近学了下,顺便也积累了写,就写个less的小结(此小结偏向于实践)

less中文网
less简介:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量,Mixin,函数等特性,使 CSS 更易维护和扩展.Less 可以运行在 Node 或浏览器端
常见的css预处理器:Less,Sass,Stylus

less编译为css:

考拉客户端

在线编译这种网站就很多了

(有时候运行less,想看看其编译的css样式的时候用得到)

less在html中使用:

直接引入,莫忘了在rel里面写 stylesheet/less

link 直接 tab 不全的话,rel里是不会有后面的 /less ,此时是引入less会报错的(我用的webstrom是这样的)

    <!--这两个是必须引入的--><link rel="stylesheet/less" href="css/test.less"><script src="js/less.js"></script>

补充:

h5的type属性中默认值就是type=“text/css” ,所以在link标签中可以不写type(当然排除个别浏览器不支持,主流浏览器都支持)

less的注释:

// 单行注释
/*多行注释*/

less中定义变量:

和js中的基本概念一样

    // 为w(宽)设置为300px@w: 300px;// 将w的值赋给h(高)@h: @w;// 为c(color的值)设置为red@c: red;.box1 {@c: blue;width: @w;height: @h;background: @c;margin-bottom: 20px;@c: pink;}.box2 {width: @w;height: @h;background: @c;}

HTML文件:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>03_less-variable</title><style>* {margin: 0;padding: 0;}</style><link rel="stylesheet/less" href="css/03_less-vairable.less"><script src="js/less.js"></script>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div></body>
</html>

运行:

less也有全局变量和局部变量之分:

定义在{}外面就是全局变量,什么地方都可以使用

定义在{}里面的就是局部变量,只能在{}中使用

注意点:less中的变量是延迟加载的,写到后面变量也能在前面使用

less中访问变量的原则与js一样:

和js一样不同作用域的变量不会互相影响,只有相同作用域的变量才会互相影响

和js一样在访问变量时会采用就近原则
在less中可以自定义变量名

    @size: 200px;@w: width;@s: div;@{s} {/*在less中变量名如果想要用自定义的变量,那么必须使用变量差值的方法@{变量名}*/@{w}: @size;height: @size;background: red;}

html代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>04_less-Variable-interpolation</title><style>* {margin: 0;padding: 0;}</style><link rel="stylesheet/less" href="css/04_less-Variable-interpolation.less"><script src="js/less.js"></script>
</head>
<body>
<div></div></body>
</html>

运行:

1_初识less引用变量作用域变量差值相关推荐

mysql变量作用域,变量作用域 | 类型、变量和值 | JavaScript 权威指南
变量作用域由学院君创建于1年前, 最后更新于 1年前版本号 #2 724 views 0 likes 0 collects 变量的作用域指的是程序源码中定义这个变量的区域,全局变量具有全局作用 ...
为什么连续申请的两个 int 型变量的地址差值为 12 而不是 4 ？
@time 2019-07-20 @author Ruo_Xiao 举栗说明,不同的编译方式结果不一样. #include <iostream>int main() {int i;int ...
【JavaScript 笔记】— 函数高级（变量作用域、解构赋值、方法、高阶函数、闭包、箭头函数、generator）
JavaScript个人笔记变量作用域变量提升全局对象 windows 命名空间局部作用域常量解构赋值使用场景方法 apply 装饰器高阶函数(Array) map reduce m ...
JavaScriptjQuery.变量作用域
变量作用域变量的位置或影响它的作用范围,这个作用范围也叫作用域. 如果变量是在函数内声明的,那么的作用域仅在函数内,函数之外不能调用.函数调用执行完后,函数内的变量立即销毁. function g ...
Python函数中的变量作用域
目录一.变量作用域二.全局变量和局部变量一.变量作用域变量作用域,其实就是变量可以在哪些范围内可以使用,哪些范围内不可以使用.这里只讲函数中变量的作用域,局部变量和全局变量面向过程编程就涉及 ...
Python 变量作用域和列表
变量作用域变量由作用范围限制分类:按照作用域分类全局(global):在函数外部定义局部(local):在函数内部定义变量的作用范围: 全局变量:在整个全局范围有效全局碧昂量在局部可以使用 ...
Java之路：变量作用域
变量作用域变量是有作用范围(Scope)的,也即作用域.一旦超出变量的作用域,就无法再使用这个变量.在程序中,变量一定会被定义在某一对大括号中,该大括号所包含的代码区便是这个变量的作用域. 按作用域 ...
Golang基础(变量[普通变量、数组、切片、map、list、ring]声明及赋值)
Go语言和其他语言一样都有基本存储容器.可以存储一个或多个值在程序中,方便程序中多次使用容器中内容,这个容器称为:变量 Go语言虽然是静态类型语言,但是支持动态类型语言语法,因为Go语言希望程序员少声 ...
PHP引用全局作用域中可用的全部变量是,php全局变量之学习笔记
今天我们参考php官方对php全局变量介绍来理解一下php全局变量一些用法与自己对它的一些思考吧,现在分享出来希望对各位同学有帮助. 一.核心要点思考: 1. 哪些全局变量是过期的及如何处理? 如:u ...

1_初识less引用变量作用域变量差值

less在html中使用:

less的注释:

less中定义变量:

1_初识less引用变量作用域变量差值相关推荐

最新文章

热门文章