less的学习(@变量名)

时间：2023-03-08 23:12:00
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、变量

变量的规则：

  1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
  2. 没有先定义后使用的规定；
  3. 一个变量有多次赋值，以最后定义的值为最终值；
  4. 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
  5. 定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
  6. 存在作用域，局部作用域优先级高于全局作用域。
 @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. 以最后定义的值为最终值；

相关文章