Less变量

Less变量

定义变量

Less 中的变量和其他编程语言一样,可以实现值的复用,同样它也有作用域(scope)。简单的讲,变量作用域就是局部变量和全局变量的概念。

Less 中,变量作用域采用的是就近原则,换句话说,就是先查找自己有没有这个变量,如果有,就取自己的变量,如果没有,就查找父元素,依此类推。先看一个简单的例子,Less 文件如下:

  1. @width : 20px;
  2.  #homeDiv  {
  3.    @width : 30px;
  4.    #centerDiv  {
  5.        width : @width;  // 此处应该取最近定义的变量 width 的值 30px
  6.    }
  7.  }
  8.  #leftDiv {
  9.      width : @width;  // 此处应该取最上面定义的变量 width 的值 20px
  10. }

编译后的CSS代码为:

  1. #homeDiv #centerDiv {
  2.     width: 30px;
  3. }
  4. #leftDiv {
  5.     width: 20px;
  6. }

对于程序开发人员来说,变量应该是最熟悉不过的概念了。如果多次重复使用一个信息,将它设置为一个变量,就可以在代码中重复引用。这不仅避免重复定义,还能使代码更容易维护。

Less中,变量由变量名称和值组成。变量名以 @ 为前缀,由字母、数字、_和-组成,变量名称和值之间用冒号隔开。如:

  1. /* 定义变量 */
  2. @color: #4d926f;
  3. /* 应用到元素中 */
  4. header {
  5.   color: @color;
  6. }
  7. h2 {
  8.   color: @color;
  9. }

上面的代码定义了一个变量 @color,并给它赋值为 #4d926f。然后,就可以在选择器 header 和 h2 中反复使用它,而不必重复定义。编译后的CSS代码为:

  1. header {
  2.   color: #4d926f;
  3. }
  4. h2 {
  5.   color: #4d926f;
  6. }

从上面的代码可以看出,变量是 VALUE(值)级别的复用,可以将相同的值定义成变量,来统一管理起来。当需要调整样式时,只需要修改相应变量的值就可以了,非常方便。因此,变量适用于定义主题,可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,不同的主题只需要定义不同的变量文件就可以了。

当然,变量也同样适用于 CSS RESET(重置样式表),在 Web 开发中,往往需要屏蔽浏览器的默认样式,就可以使用 Less的变量特性。这样,就可以在不同项目间重用样式表,我们仅仅需要在不同的项目样式表中,根据需求重新给变量赋值即可。

不仅可以直接在属性值中使用变量,还可以用类似 @{name} 的结构,以“插值”的方式在选择器名、属性名、URL、import、媒体查询中使用变量。在编译时,变量将被替换为它们相应的值。

变量插值

1)选择器名插值

Less选择器名称中可以引用任何变量。如:

  1. @head: h;
  2. .@{head}2 {
  3.   font-size: 16px;
  4. }

编译后的CSS代码为:

  1. .h2 {
  2.   font-size: 16px;
  3. }

2)属性名插值

Less属性名称中可以引用任何变量。如:

  1. @my-property: color;
  2. .myclass {
  3.   background-@{my-property}: #81F7D8;
  4. }

编译后的CSS代码为:

  1. .myclass {
  2.   background-color: #81F7D8;
  3. }

3)URL插值

变量还可以用来保存URL,并在 url() 中使用它。如:

  1. @host: "http://www.waibo.wang/";
  2. h2 {
  3.   color: @color;
  4.   background: url("@{host}img/bg.png");
  5. }

编译后的CSS代码为:

  1. h2 {
  2.   color: #f00;
  3.   background: url("http://www.waibo.wang/img/bg.png");
  4. }

4)import插值

import语句中,可以使用保存路径的变量。如:

  1. @host: "http://www.waibo.wang/";
  2. @import "@{host}/reset.less";

5)媒体查询插值

如果你希望在media query中使用Less变量,你可以直接使用普通的变量方式。因为“~”后面的值是不被编译的,所以可以用作media query的参数。如:

  1. @singleQuery: ~"(max-width: 480px)";
  2. @media screen, @singleQuery { 
  3.     div { 
  4.     width:2000px; 
  5.     } 
  6. } 

编译后的CSS代码为:

  1. @media screen, (max-width: 480px) {
  2.   div {
  3.     width: 2000px;
  4.   }
  5. } 

变量的作用域

 

Less 中的变量和其他编程语言一样,可以实现值的复用,同样它也有作用域(scope)。简单的讲,变量作用域就是局部变量和全局变量的概念。

Less 中,变量作用域采用的是就近原则,换句话说,就是先查找自己有没有这个变量,如果有,就取自己的变量,如果没有,就查找父元素,依此类推。先看一个简单的例子,Less 文件如下:

  1. @width : 20px;
  2.  #homeDiv  {
  3.    @width : 30px;
  4.    #centerDiv  {
  5.        width : @width;  // 此处应该取最近定义的变量 width 的值 30px
  6.    }
  7.  }
  8.  #leftDiv {
  9.      width : @width;  // 此处应该取最上面定义的变量 width 的值 20px
  10. }

编译后的CSS代码为:

  1. #homeDiv #centerDiv {
  2.     width: 30px;
  3. }
  4. #leftDiv {
  5.     width: 20px;
  6. }

转载于:https://www.cnblogs.com/waibo/p/7899799.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/390705.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

渐进式web应用程序_如何在渐进式Web应用程序中添加到主屏幕

渐进式web应用程序添加到主屏幕 (Add To Homescreen) Here the web app install banner is focused on web app, with the feature of add to homescreen.在此,Web应用程序安装标语专注于Web应用程序,具有添加到主屏幕的功能。 浏览器对“添加到主屏幕”…

linux shell 编程

shell的作用 shell是用户和系统内核之间的接口程序shell是命令解释器 shell程序 Shell程序的特点及用途: shell程序可以认为是将shell命令按照控制结构组织到一个文本文件中,批量的交给shell去执行 不同的shell解释器使用不同的shell命令语法 shell…

Leetcode之javascript解题(No33-34)

附上我的github仓库,会不断更新leetcode解题答案,提供一个思路,大家共勉 在我的主页和github上可以看到更多的关于leetcode的解题报告!(因为不知道为什么掘金没有将其发布出来,目前已经联系掘金客服&#x…

真实感人故事_您的数据可以告诉您真实故事吗?

真实感人故事Many are passionate about Data Analytics. Many love matplotlib and Seaborn. Many enjoy designing and working on Classifiers. We are quick to grab a data set and launch Jupyter Notebook, import pandas and NumPy and get to work. But wait a minute…

转:防止跨站攻击,安全过滤

转:http://blog.csdn.net/zpf0918/article/details/43952511 Spring MVC防御CSRF、XSS和SQL注入攻击 本文说一下SpringMVC如何防御CSRF(Cross-site request forgery跨站请求伪造)和XSS(Cross site script跨站脚本攻击)。 说说CSRF 对CSRF来说,其实Spring…

Linux c编程

c语言标准 ANSI CPOSIX(提高UNIX程序可移植性)SVID(POSIX的扩展超集)XPG(X/Open可移植性指南)GNU C(唯一能编译Linux内核的编译器) gcc 简介 名称: GNU project C an…

html怎么注释掉代码_HTML注释:如何注释掉您HTML代码

html怎么注释掉代码HTML中的注释 (Comments in HTML) The comment tag is an element used to leave notes, mostly related to the project or the website. This tag is frequently used to explain something in the code or leave some recommendations about the project.…

k均值算法 二分k均值算法_使用K均值对加勒比珊瑚礁进行分类

k均值算法 二分k均值算法Have you ever seen a Caribbean reef? Well if you haven’t, prepare yourself.您见过加勒比礁吗? 好吧,如果没有,请做好准备。 Today, we will be answering a question that, at face value, appears quite sim…

您好,这是我的第一篇文章

您好我是CYL 这是一个辣鸡博客 欢迎指教 转载于:https://www.cnblogs.com/pigba/p/8823472.html

08_MySQL DQL_SQL99标准中的多表查询(内连接)

# sql99语法/*语法: select 查询列表 from 表1 别名 【连接类型】 join 表2 别名 on 连接条件 【where 筛选条件】 【group by 分组】 【having 分组后筛选】 【order by 排序列表】分类内连接(重点): inner外连接 左外&#xff0…

java中抽象类继承抽象类_Java中的抽象类用示例解释

java中抽象类继承抽象类Abstract classes are classes declared with abstract. They can be subclassed or extended, but cannot be instantiated. You can think of them as a class version of interfaces, or as an interface with actual code attached to the methods.抽…

新建VUX项目

使用Vue-cli安装Vux2 特别注意配置vux-loader。来自为知笔记(Wiz)

衡量试卷难度信度_我们可以通过数字来衡量语言难度吗?

衡量试卷难度信度Without a doubt, the world is “growing smaller” in terms of our access to people and content from other countries and cultures. Even the COVID-19 pandemic, which has curtailed international travel, has led to increasing virtual interactio…

Linux 题目总结

守护进程的工作就是打开一个端口,并且等待(Listen)进入连接。 如果客户端发起一个连接请求,守护进程就创建(Fork)一个子进程响应这个连接,而主进程继续监听其他的服务请求。 xinetd能够同时监听…

《精通Spring4.X企业应用开发实战》读后感第二章

一、配置Maven\tomcat https://www.cnblogs.com/Miracle-Maker/articles/6476687.html https://www.cnblogs.com/Knowledge-has-no-limit/p/7240585.html 二、创建数据库表 DROP DATABASE IF EXISTS sampledb; CREATE DATABASE sampledb DEFAULT CHARACTER SET utf8; USE sampl…

换了电脑如何使用hexo继续写博客

前言 我们知道,使用 Githubhexo 搭建一个个人博客确实需要花不少时间的,我们搭好博客后使用的挺好,但是如果我们有一天电脑突然坏了,或者换了系统,那么我们怎么使用 hexo 再发布文章到个人博客呢? 如果我们…

leetcode 525. 连续数组

给定一个二进制数组 nums , 找到含有相同数量的 0 和 1 的最长连续子数组,并返回该子数组的长度。 示例 1: 输入: nums [0,1] 输出: 2 说明: [0, 1] 是具有相同数量 0 和 1 的最长连续子数组。 示例 2: 输入: nums [0,1,0] 输出: 2 说明: [0, 1] (或 [1, 0]) 是…

实践作业2:黑盒测试实践(小组作业)每日任务记录1

会议时间:2017年11月24日20:00 – 20:30 会议地点:在线讨论 主 持 人:王晨懿 参会人员:王晨懿、余晨晨、郑锦波、杨潇、侯欢、汪元 记 录 人:杨潇 会议议题:软件测试课程作业-黑盒测试实践的启动计划 会议内…

视图可视化 后台_如何在单视图中可视化复杂的多层主题

视图可视化 后台Sometimes a dataset can tell many stories. Trying to show them all in a single visualization is great, but can be too much of a good thing. How do you avoid information overload without oversimplification?有时数据集可以讲述许多故事。 试图在…

iam身份验证以及访问控制_如何将受限访问IAM用户添加到EKS群集

iam身份验证以及访问控制介绍 (Introduction) Elastic Kubernetes Service (EKS) is the fully managed Kubernetes service from AWS. It is deeply integrated with many AWS services, such as AWS Identity and Access Management (IAM) (for authentication to the cluste…