less简单应用

来源：互联网发布：商业数据分析报告编辑：程序博客网时间：2024/05/22 13:29

简介

（1）less是一种动态样式语言

（2）less将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数.

（3）less既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行

（4）less是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

客户端使用

1、引入 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”

<link rel="stylesheet/less" type="text/css" href="styles.less">

2、然后在< head> 中引入less.js:

<script src="less.js" type="text/javascript"></script>

注意：less样式文件一定要在引入less.js前先引入。

简单应用

目录结构

这里写图片描述

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet/less" type="text/less" href="css/styles.less">    <script src="js/less.js" type="text/javascript"></script></head><body><header>    <p>Hello World!</p></header></body></html>

styles.less

@nice-blue: #5B83AD;@size:50px;header {  color: @nice-blue;  font-size: @size;}

结果

这里写图片描述

less语法

关于less语法，可以参考我的另一篇博客——less语法详解
http://blog.csdn.net/iamcgt/article/details/73028435

阅读全文

1 0