CSS预处理语言--Less

最新推荐文章于 2025-06-09 04:14:20 发布

Fair_feng

最新推荐文章于 2025-06-09 04:14:20 发布

阅读量693

点赞数 1

CC 4.0 BY-SA版权

文章标签： less

本文链接：https://blog.youkuaiyun.com/Fair_feng/article/details/69525058

本文介绍了Less CSS预处理器的基本概念及使用方法，包括如何安装配置Less环境，如何使用变量、混合(Mixins)、嵌套等功能，以及如何进行基本的运算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为刚入门的菜鸟，整理了一些简单的资料，希望大神多多指教。

一、什么是Less

1、使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护，属于css预处理语言的一种。更方便的处理CSS的逻辑功能，更好的管理CSS代码。

二、使用安装

1、基于node.js

首先安装node环境,在官网可以根据情况下载：
http://nodejs.cn/download/
根据npm进行全局安装

$ npm install -g less

less的编译命令：
首先进入到当前地址

$ lessc 编译文件      生成文件
$ lessc styles.less styles.css

输出压缩过的 CSS,在最后添加 -x，如果希望获得更好的压缩效果，还可以通过 –clean-css 选项启用 Clean CSS 进行压缩。

$ lessc styles.less styles.css -x

2、浏览器端直接使用

下载less的js 文件  ，此时2.5.3版本
http://lesscss.cn/#download-options

引入less文件，注意 rel的不同

<link rel="stylesheet/less" href="example.less" />

然后引入js文件

<script src="lesscss-1.4.0.min.js"></script>

三、简单使用

1.变量

以@开头，变量可以写在页首，也可以写在其他地方，其符合“按需加载”，不必在使用前声明。

/*变量*/
@styles-w:100px;
.div{width:@styles-w;}

/*按需加载*/
.p{font-size:@styles-f;}
@styles-f:16px;

/*取此作用域中最后的定义*/
@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

编译：

/*变量*/
.div{width:100px;}

/*按需加载*/
.p{font-size:16px;}

/*取此作用域中最后的定义*/
.class1 .class {
    three: 3;
}
.class1 {
    one: 1;
}

2.混合(Mixins)

定义一个通用的.class，当然如果不想在CSS中展示，可以隐藏。

.border{
    border-radiu:5px
}
#header{
    .border;
}

/*隐藏，在()中不添加参数*/
.border(){
    border-radiu:5px;
}

/*带参数，可以选择默认值*/
.border(@ten:10px){
    border-radiu:@ten;
}
#footer{
    .border(20px);
}

编译：

.border{
    border-radiu:5px
}
#header{
    border-radiu:5px;
}
/*隐藏，在()中不添加参数*/
/*带参数，可以选择默认值*/
#footer{
    border-radiu:20px;
}

3.嵌套

以嵌套的方式编写CSS，更方便的处理CSS样式

#nav{
    font-size:16px;
    .a{color:red}
    .b{
        border-radiu:10px;
        .c{
            font-size:20px;
            &:hover{
                background:white;
            }
        }
    }
}

编译：

#nav {
  font-size: 16px;
}
#nav .a {
  color: red;
}
#nav .b {
  border-radiu: 10px;
}
#nav .b .c {
  font-size: 20px;
}
#nav .b .c:hover {
  background: white;
}

4.运算

任何的数字、变量、颜色都可以进行运算

@font-s:10px+1;
@color:#2DC456;
.a{font-size:@font-s * 2}
.b{color:@color + #111}

编译：

.a {font-size: 22px}
.b {color: #3ed567;}