您的位置: 首页  >  文章  >  less快速入门简单语法详细讲

less快速入门简单语法详细讲

分类: 文章 • 2024-12-12 19:14:29

一种 动态 样式 语言

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

客户端运行less:

· 第一种方式是直接在html页面引用.less文件，然后借助less.js去编译less文件动态生成css样式而存在于当前页面，这种方式适用于开发模式。

· 第二种方式是我们首先写好.less文件的语法，然后借助工具生成对应的.css文件，然后客户端直接引用.css文件即可。比如我们常用的bootstrap.css就是通过工具编译而成，这种方式更适合运行环境。

在html页面引用less

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

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

1.变量

 例如@h:10px *LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次.

注意：在.less文件里面定义一个全局的@base变量，那么在该文件里面所有地方均可调用。

（1）Less里面的变量都是以@作为变量的起始标识，变量名由字母、数字、_和-组成；

（2）在一个文件里面定义的同名变量存在全局变量和局部变量的区别（后面介绍）；**

2.混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

3.嵌套规则

less快速入门简单语法详细讲

 

4.函数&运算

 加，减，乘，除操作可以做属性值和颜色值的运算，实现属性值之间的关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

Color 函数

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
​
saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color
​
fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency
​
spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
​
mix(@color1, @color2);    // return a mix of @color1 and @color2
​

使用起来相当简单:

@base: #f04615;
​
.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

你还可以提取颜色信息:

hue(@color);        // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color);  // returns the 'lightness' channel of @color
​

如果你想在一种颜色的通道上创建另一种颜色，这些函数就显得那么的好用，例如:

@new: hsl(hue(@old), 45%, 90%);
​

@new 将会保持 @old的 色调, 但是具有不同的饱和度和亮度.

Math 函数

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
如果你想将一个值转化为百分比，你可以使用percentage 函数:
percentage(0.5); // returns `50%`

Importing

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";
​​​​​​​ @import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用

.css后缀就可以:

​​​​​​​

@import "lib.css";
这样LESS就会跳过它不去处理它.JavaScript 表达式

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:

@var: `"hello".toUpperCase() + '!'`;
输出:
@var: "HELLO!";
​

注意你也可以同时使用字符串插值和避免编译:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;
​

输出:

@var: HELLO!;
​

它也可以访问JavaScript环境:

@height: `document.body.clientHeight`;
​

如果你想将一个JavaScript字符串解析成16进制的颜色值, 你可以使用 color 函数:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

在客户端使用

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

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

然后点击页面顶部download按钮下载 less.js, 在<head> 中引入:

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

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

备注：请在服务器环境下使用！本地直接打开可能会报错！

监视模式

监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。

要使用它，只要在URL后面加上'#!watch'，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。

相关推荐