一、浏览器端环境搭建

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的学习(@变量名)

一、浏览器端环境搭建

二、语法

最新文章

热门文章