变量(variables)

Less中采用“ @ ”定义变量,使用时直接使用“@命名符”。

  1. 作为普通变量
  1. // 命名:
  2. @color:red;
  3. // 调用:
  4. div{
  5. color:@color;
  6. }

普通用法即为变量作为属性值时。

  1. 作为选择器和属性名的变量
  1. @kuandu:width;
  2. .{@kuandu}{ @kuandu:150px;}

作为选择器需要用花括号{}来包含。作为属性名时,和属性值的调用方法一样。

  1. 作为URL
  1. @myURL:" http://www.baidu.com/static/images";
  2. bg:url("@myURL/logo.png");

这样在相同路径下的图片或文件就可以声明一个URL变量,后接具体图片/文件名,路径不要忘记加双引号哦~。

  1. 延迟加载

    变量不论是在调用的前面定义还是在后面定义都是一样的,具有延迟加载的特性。

    它会在当前作用域样式未加载之前先加载变量,而且是由内而外,先寻找作用域内的变量,如果没有在寻找作用域外的变量。

    我们可以简单理解为变量的提升,即解析器解析到此项为变量时,会将其全部提升到前面,以供调用。

    注意:不是提最前面哦~,而是按提升顺序依次排列。即解析到的第一个变量在第一个,第二个在第二个,只是提升到调用的前面去~。
  1. @font-size:12px; // 第一个变量
  2. @color:pink; // 第二个变量
  3. div{
  4. font-size:@font-size;
  5. }
  6. // 下面的解析器解析后和上面的一样,即下面的变量会解析到当前作用域的前面。
  7. div{
  8. font-size:@font-size;
  9. }
  10. @font-size:12px; // 第一个变量
  11. @color:red; // 第二个变量
  1. 定义多个相同名称的变量时

    在定义一个变量两次时,只会使用最后定义的变量,Less会从当前作用域向上搜索,这个行为类似于CSS定义中始终使用最后定义的属性值(CSS层叠性)。
  1. @font-size:12px; // 第一次定义
  2. div{
  3. @font-size:15px; // 第二次定义(在div内部)
  4. font-size:@font-size; // 最终结果为20px
  5. @font-size:20px; // 第三次定义(在div内部)
  6. // 解析:
  7. // 由我们的简单理解可知,第三次的会提升到第二次的后面,调用的前面,所以第三次会把第二次的层叠掉,在当前作用域中,离调用最近的是第三次,所以会找到第三次定义的20px
  8. }
  9. html{
  10. font-size:@font-size; // 最终结果为12px
  11. // 解析:
  12. // 在div内部定义的只会在div内部起作用,所以html会找到离它最近的第一次定义的12px
  13. }

混合(mixins)

1. 普通混合

混合就是一种将一系列属性从一个规则集引入(混合)到另一个规则集的方式。规则集可以理解为CSS样式,当我们的样式重复出现时,我们可以采用混合的方式来减少代码冗余。接下来先让我们看看普通的混合吧!

  1. .bgc{
  2. background-color: pink;
  3. }
  4. body{
  5. .bgc;
  6. }
  7. // 输出的CSS样式为:
  8. .bgc{
  9. background-color: pink;
  10. }
  11. body{
  12. background-color: pink;
  13. }

如果我们不想让这个.bgc输出到css文件中,该怎么办呢,接下来为你介绍~

2. 不带输出的混合

如果你想要创建一个混合集,但是却不想让它输出到你的样式中

在不像输出的混合集的名字后面加上一个括号就可以实现。

我们在单纯定义只是用于调用时,可以使用,我们就可以把上述代码优化。

  1. .bgc(){
  2. background-color: @color;
  3. }
  4. body{
  5. .bgc();
  6. }
  7. // 输出CSS样式为
  8. body{
  9. background-color: pink;
  10. }

3. 带选择器的混合

混合选择器内的规则

  1. .my_hover(){
  2. // 伪类前使用 & 详情见 Less的嵌套规则
  3. &:hover{
  4. color: @color;
  5. }
  6. }
  7. button{
  8. .my_hover();
  9. }
  10. /* 只是将里面的CSS代码拿过来,相当于:
  11. button{
  12. &:hover{
  13. color: @color;
  14. }
  15. }
  16. */
  17. // 输出为:
  18. button:hover {
  19. color: pink;
  20. }

4. 带参数的混合

当属性一致但是属性值不一致时,我们可以通过传参的方式改变属性值,就可以给许许多多的选择器重复调用啦~

  1. .border(@border_color){
  2. border: 1px solid @border_color;
  3. }
  4. div{
  5. .border(pink); // div想要粉色滴
  6. }
  7. p{
  8. .border(red); // p也想要红色滴
  9. }

5. 带参数且有默认值

在许多都是用一个属性值时,我们可以设置默认值,这样就可以不用传参啦~

  1. .border(@border_color:pink){
  2. border:1px solid @border_color;
  3. }
  4. div{
  5. .border();
  6. }

6. 带多个参数的混合

首先我们看看什么是多参数吧!

(1)多参数:一个组合可以带多个参数,参数之间可以用分号或者逗号分割

  • 推荐采用分号分割,因为逗号有两个意思,它可以解释为mixins参数分隔符或者css列表分隔符

  • 如果传参的括号里面都是以逗号分割,那么会依次传给各个参数值

  • 如果既有括号又有分号,会将分号前面的看作一个整体作为参数

(2)定义多个具有相同名称和参数数量的mixins是合法的,Less会使用它可以应用的属性,如果使用mixin的时候只带一个参数,这个属性会导致所有的mixin都会强制使用这个明确的参数。

  1. div{
  2. .div(#ccc); // 所有的 .div里的第一个参数都赋值为 #ccc
  3. }
  4. // 第一个混合
  5. .div(@border_color){
  6. border:1px solid @border_color;
  7. }
  8. // 第二个混合
  9. .div(@border_color;@margin:2){
  10. .border(@border_color);
  11. margin: @margin;
  12. }
  13. // 第三个混合
  14. .div(@border_color;@margin;@padding:2){
  15. .border(@border_color);
  16. margin: @margin;
  17. padding: @padding;
  18. }
  19. // 由于我们只传递了一个参数,而第三个混合的margin值没有默认值,也没有得到赋值,所以无法被调用。
  20. // 输出为
  21. div {
  22. border: 1px solid #ccc; // 来自第一个 和第二个混合(合并输出)
  23. margin: 2; // 来自第二个混合
  24. }

7. 命名参数

首先我们来了解什么是命名参数:

引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值,任何参数都可以通过它的名称来引用,这样就不必按照任意特定的顺序来使用参数

这样就不会担心数据被乱传喽~

  1. .div(@border_color;@margin:2){
  2. .border(1px solid @border_color);
  3. margin: @margin;
  4. }
  5. div{
  6. .div(@margin:3;#ccc); // 这样来指定第一个参数赋值给@margin变量,就不用按照原先定义的指定顺序输入啦~
  7. }

8. @arguments变量

@arguments代表所有的可变参数,参数的先后顺序就是你( )里的参数顺序,值的位置和个数也是一一对应的,在你想给第一个和第三个赋值时不能直接写(值1,,值3),必须把原来的默认值写上去。

  1. .p_border(@c;@x:solid;@size:1px;){
  2. border: @arguments;
  3. }
  4. // 只给第一个没有默认值的参数,后面会使用默认值
  5. p{
  6. .p_border(red);
  7. }
  8. // 输出的css文件为:
  9. p{
  10. border:red solid 1px;
  11. }
  12. // 但如果我们将参数位置改变
  13. .p_border(@x:solid;@size:1px;@c){
  14. border: @arguments;
  15. }
  16. // 这时像刚刚那样调用就会报错 因为是一一对应的 此时的red赋值给了@x,而@c没有值
  17. // 所以必须这样 将默认值写上
  18. p{
  19. .p_border(solid,1px,red);
  20. }
  21. // 如果全部都有默认值 则可以直接调用 如:
  22. .p_border(@c:red;@x:solid;@size:1px;){
  23. border: @arguments;
  24. }
  25. p{
  26. .p_border();
  27. }

9. 匹配模式

传值的时候定义一个字符,在使用的时候使用哪个字符,就调用哪条规则

根据不同功能定义字符,类似一个标识符,适用于相同属性值在类似属性中的应用,例如下例都是设置边框圆角。

  1. .border(all;@w:5px){
  2. border-radius: @w;
  3. }
  4. .border(t_l;@w:5px){
  5. border-top-left-radius: @w;
  6. }
  7. // 想要四个圆角就调用 all
  8. header{
  9. .border(all;50%);
  10. }
  11. // 想要左上一个圆角就调用 t_l
  12. header{
  13. .border(t_l;50%);
  14. }
  15. // 类似的我们还可以定义右上、左下、右下等,这样就可以在适时调用合适的方法了

10. 得到混合变量中变量的返回值

  1. .average(@x;@y){
  2. @average: ((@x + @y) / 2);
  3. }
  4. div{
  5. .average(10;20); // 调用进行计算
  6. padding:@average; // 得到混合变量中变量的返回值
  7. }
  8. // 之所以可以得到 @average 是因为,混合是将规则集(这里为CSS样式表)拿过来 也就会变成如下代码
  9. div{
  10. // 调用时 进行变量赋值
  11. @x:10;
  12. @y:20;
  13. // 将规则集混合
  14. @average: ((@x + @y) / 2);
  15. // 这样就是一个作用域啦~ 当然可以使用啦~
  16. padding:@average;
  17. }

以上均为自己理解,若有不当,还请指出~ ^_^

Less从入门到精通——变量与混合的更多相关文章

  1. 《Visual C# 从入门到精通》第一章使用变量、操作符和表达式——读书笔记

    前言: 这个笔记是我个人总结,主要是熟练自己查看<Visual C# 从入门到精通>(第8版)这本书时,懵然起总结的想法,只是总结一些知识点,在工作项目会用得上,但是对毫无C#语言基础的, ...

  2. 8、ASP.NET MVC入门到精通——View(视图)

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 View视图职责是向用户提供界面.负责根据提供的模型数据,生成准备提供给用户的格式界面. 支持多种视图引擎(Razor和ASPX视图引擎是官 ...

  3. 【PHP】PHP从入门到精通(一)——想学习PHP的小伙伴的福利来了!

     PHP从精通到入门 (一)PHP简介和基本知识 PHP(外文名:PHP: Hypertext Preprocessor,中文名:"超文本预处理器")是一种通用开源脚本语言.语法吸 ...

  4. 【PHP】最详细PHP从入门到精通(三)——PHP中的数组

     PHP从入门到精通 之PHP中的数组 各位开发者朋友大家好,链接上次更新,我们PHP的学习也更深了一层,本次博主给大家带来PHP数组的数组实例详解的相关资料.数组分为数组数值数值,关联数组,多维数组 ...

  5. 【PHP】最详细PHP从入门到精通(一)——想学习PHP的朋友们福利来了!

     PHP从入门到精通 (一)PHP简介和基本知识 PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java ...

  6. LESS从入门到精通

    LESS从入门到精通 一.LESS是什么 LESS 是 CSS预处理语言,是 CSS 的扩展. 然后说说比较流行的几款预编译器:SASS/SCSS.LESS.Stylus. SASS 学习网站: ht ...

  7. JavaScript从入门到精通(转)

    JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...

  8. 1、ASP.NET MVC入门到精通——新语法

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在学习ASP.NET MVC之前,有必要先了解一下C#3.0所带来的新的语法特性,这一点尤为重要,因为在MVC项目中我们利用C#3.0的新特 ...

  9. 15、ASP.NET MVC入门到精通——MVC-路由

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Routing(路由) – URL url 作为广泛使用的Web用户接口,需要被重视 好的Url应该满足如下条件: URL应为获取某种资源提 ...

随机推荐

  1. Java学习的第三天

    1.今天学了main函数具体的解读如 main函数关键字的意义 变量命名 2.在2.1当中的cmd命令实施失败,文件路径没有找到. 3.明天学习变量范围和注释阅读大道至简.

  2. Java才是世界上最好的语言,Java在高频交易中替代C++

    高频交易 高频交易是指从那些人们无法利用的极为短暂的市场变化中寻求获利的计算机化交易,比如,某种证券买入价和卖出价差价的微小变化,或者某只股票在不同交易所之间的微小价差.在高频交易中,自动化应用程序每 ...

  3. Java Spring Cloud服务间调用

    A服务是用户服务,B服务某个需求需要用户信息,而B服务无法连接用户的数据库(分库),需要让A服务查询用户信息. 在B服务写一个接口去调用A服务的某个请求 /** * 访问A服务 */ @FeignCl ...

  4. leetcode37:path-sum-ii

    题目描述 给定一个二叉树和一个值sum,请找出所有的根节点到叶子节点的节点值之和等于sum的路径, 例如: 给出如下的二叉树,sum=22,     5     / \   4  8   /    / ...

  5. 将unicode 转为字符串

    public string chn(string source)// convert contents to GB2312 { return new Regex(@"\\u([0-9A-F] ...

  6. Sublime Text 3 安装插件与快捷键总结

    ublime Text 3 是一个了不起的软件.首先,它是一个干净,实用,可以快速的编写代码编辑器.它不仅具有令人难以置信的内置功能(多行编辑和VIM模式),而且还支持插件,代码片段和其他许多东西.很 ...

  7. JAVA中常见的阻塞队列详解

    在之前的线程池的介绍中我们看到了很多阻塞队列,这篇文章我们主要来说说阻塞队列的事. 阻塞队列也就是 BlockingQueue ,这个类是一个接 口,同时继承了 Queue 接口,这两个接口都是在JD ...

  8. 【webSocket】实现原理

    服务端文件: import base64 import hashlib import socket # 将请求头格式化成字典 def get_headers(data): ""&q ...

  9. WSL2:我在原生的Win10玩转Linux系统

    原文地址:梁桂钊的博客 博客地址:http://blog.720ui.com 欢迎关注公众号:「服务端思维」.一群同频者,一起成长,一起精进,打破认知的局限性. WSL2:我在原生的Win10玩转Li ...

  10. Go语言配置管理神器——Viper中文教程

    Viper是适用于Go应用程序的完整配置解决方案.它被设计用于在应用程序中工作,并且可以处理所有类型的配置需求和格式. Viper Viper是适用于Go应用程序的完整配置解决方案.它被设计用于在应用 ...