网站专题BANNER

Less简介以及Less的几种使用方式

发表日期:2022-01-10 09:29:00 文章编辑:洛壹网络 文章来源:深圳网站制作

一、Less简介


        官方网站:http://lesscss.cn/ 


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


        Less可以运行在Node或浏览器端。也可运行在桌面客户端。


二、在Vue中使用Less


1、安装依赖


处理普通的.css 文件,        需要安装css-loader,style-loader


           .less 文件, 需要安装 less-loader


   //.sass 文件,需安装  sass-loader


npminstall  css-loader style-loader  --save-dev


npminstall  less-loader --save-dev


//npminstall  scss-loader --save-dev


 


2、安装好相关loader后,我们需要在webpack.base.conf.js或者webpack.config.js 中加入相关配置代码,如下


  {undefined


        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,


        loader: 'url-loader',


        options: {undefined


          limit: 10000,


          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')


        }


      },


      {


          test:/\.less$/,


          use:[


           "style-loader","css-loader","less-loader"


          ]


      }


 


或者


      {


               test: /\.less$/,


                loader:"style!css!less"


      }


 


3、在style中加入lang="less"即可使用less


<stylescoped>


@nice-blue:#5b83ad;


.page{undefined


width: 200px;


height: 200px;


display: flex;


background: @nice-blue;


}


</style>


深圳网站建设_Less简介以及Less的几种使用方式


三、在客户端使用


引入你的 .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()来启动监视模式。


四、在服务器端使用

安装

在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:

$ npm install less

如果你想下载最新稳定版本的 LESS,可以尝试像下面这样操作:

$ npm install less@latest

使用

只要安装了 LESS,就可以在Node中像这样调用编译器:

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {

    console.log(css);

});

上面会输出

.class {

  width: 2;

}

你也可以手动调用解析器和编译器:

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {

    if (err) { return console.error(err) }

    console.log(tree.toCSS());

});

配置

你可以向解析器传递参数:

var parser = new(less.Parser)({

    paths: ['.', './lib'], // Specify search paths for @import directives

    filename: 'style.less' // Specify a filename, for better error messages

});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {

    tree.toCSS({ compress: true }); // Minify CSS output

});

在命令行下使用

你可以在终端调用 LESS 解析器:

$ lessc styles.less

上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:

$ lessc styles.less > styles.css

如何你想将编译后的 CSS 压缩掉,那么加一个 -x 参数就可以了.


深圳网站建设_Less简介以及Less的几种使用方式


相关内容
网站建设开发:JavaScript正则全面解析

正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

JavaScript中什么是“一流函数”

在计算机科学中,如果一种编程语言将函数视为一等公民,那么它就被称为具有一等函数。这意味着该语言支持将函数作为参数传递给其他函数,将它们作为其他函数的值返回,并将它们分配给变量或将它们存储在数据结构中。

认识less以及less和css简单的语句区别

less作为一门CSS扩展语言,也就是说CSS预处理器。(Leaner Style Sheets)简称less,它只不过是为css新增这些的功能,比如说:变量、函数、作用域等等。

Mybatis源码 一级缓存的的简单介绍

市面上流行的ORM框架都支持缓存,不管是Hibernate还是Mybatis都支持一级缓存和二级缓存,目的是把数据缓存到JVM内存中,减少和数据库的交互来提高查询速度。同时MyBatis还可以整合三方缓存技术。

Python数据可视化案例:动态更新数据

在开发与数据监测和数据可视化有关的系统时,我们会需要根据最新的数据对图形进行更新。下面的代码模拟了这种情况,单击Start按钮时会更新数据并重新绘制图形使得曲线看上去在移动一样,单击Stop按钮则停止更新数据。

如何查询IP地址,IP地址基本格式以及分类介绍

根据用途和安全性级别的不同,IP地址还可以大致分为两类:公共地址和私有地址。公共地址在Internet中使用,可以在Internet中随意访问。私有地址只能在内部网络中使用,只有通过代理服务器才能与Internet通信。

本地服务器如何查看IP地址及端口

windows服务器查询IP及端口,本地服务器如何查看IP地址及端口,查询端口占用情况

2022年前端工程师必须掌握的4大核心技能

什么才是Web前端开发的必备核心技能呢?简单来讲有4大核心技能 就是:掌握前端三大基础,前端主流框架、服务端开发,以及前端工程化。

我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器