less入门

关键词：

less是一门CSS预处理语言，增加了变量，Mixin，函数等特性，使得CSS更加方便维护，开发；

less可以运行在Node或者浏览器，但最终都是将.less文件转换成.css文件，因为浏览器渲染时只能识别.css文件；

1.不同情况下使用less编译器编译less文件

　　1.1 使用less编译器手动编译

　　　　在nodejs环境中，通过npm全局安装less编译器，手动编译.less文件；这种方式简单粗暴，效率低下，如果项目中有很多.less文件，缺点显而易见，不过这不失是了解less的简单方式；以下是具体的使用方式：

// 全局安装less编译器
npm install less -g 
// 安装好之后，新建文件夹less，新建文件test.less
mkdir less    cd less    touch test.less
// 书写less代码后，使用lessc命令编译
// 编译当前.less文件，并输出到test.css
lessc test.less test.css

　　　　当然lessc命令也有自己的参数，比如--clean-css(表示编译后进行压缩，要安装less-plugin-clean-css插件)等;

// 安装less-plugin-clean-css插件
sudo npm install less-plugin-clean-css -g
// 使用参数--clean-css压缩
lessc --clean-css test.less test.min.css

 　　1.2 sublime text 3中使用less

　　　　sublime text是前端开发神器，同时提供了大量的插件包可以完成各种任务；在sublime中编辑，编译less文件无疑是一件快乐的事；在sublime text3中用到的插件为：less，less2css，想要正确地使用这两个插件需要提前全局安装less编译器；

// 第一步：全局安装less编译器，以及插件less-plugin-clean-css
// 如果不安装编译器或者压缩插件，在使用时会报错，具体为何报错，下面步骤阐述
sudo npm install less  less-plugin-clean-css -g

// 第二步：安装 less插件  这是less语法高亮插件

// 第三步：安装less2css插件，在保存.less文件时会在同级目录下生成名称相同的.css文件；虽然less2css原本是sublime2的插件，但是sublime3也可以使用；

　　　　在上述安装过程中，如果不提前安装less编译器以及less-plugin-clean-css插件，在保存less文件时报错，原因如下：less2css插件并没有封装less编译器等，因此不具备编译能力，less2css插件在用户command+s/ctrl+s保存时，也要调用系统中已经安装好的less编译器，如果没有安装编译器肯定报错；less-plugin-clean-css插件功能是压缩代码，在保存时除了调用了编译器同时也调用了压缩代码的插件，所以也要安装此插件；

 　　1.3 grunt/gulp构建工具中使用less

　　　　grunt／gulp构建工具中同样可以使用less，个人比较喜欢gulp流式工作流程；在这两个构建工具中使用less不作简述，以下是参考文档：

　　　　grunt中使用less：https://www.npmjs.com/package/grunt-contrib-less

　　　　gulp中使用less：https://www.npmjs.com/package/gulp-less

如何使用less，比如浏览器中，先写好.less文件，在通过编译器编译成.css文件，有很多第三方编译器；

或者通过sublime text将less文件编译成css文件

或者在grunt，gulp中通过less插件，在打包的时候将.less文件转换成.css文件

或者webpack，安装less,less-loader,

或者在vuejs框架的单文件组件中如何使用less，使用的是webpack模块打包器

less 基础学习

　　预编译语言less方便了对html样式的操作，引入了变量，Mixni，函数等；不像以前写css那样一行行的写，而且父子节点样式之间没有层次结构，很多像width／height等属性数值写死，这在后期维护中十分的麻烦；less引入的特性很好的解决了这些痛点，能够很好地看清楚层次结构，方便修改等；

less快速入门(代码片段)

less快速入门我对less的读后感通过less.js让less不再像传统的css是静态数据表，让它具备了编程语言的动态性。得益于Variables(变量)和Mixins()让less可以做到编程语言很多的基础和实用特性，这将大大减少前端的代码量，使用代码变得... 查看详情

less快速入门(代码片段)

概览Less（LeanerStyleSheets的缩写）是一门向后兼容的CSS扩展语言。这里呈现的是Less的官方文档（中文版），包含了Less语言以及利用JavaScript开发的用于将Less样式转换成CSS样式的Less.js工具。因为Less和CSS非常像，因此很容易学习。而... 查看详情

css预编译：less入门

LESS预编译是向下兼容CSS并且为当前CSS扩展功能。LESS官网就是最好的学习资源。 这篇文章是对LESS的一个Overview,仅作为初步了解。因为官网是英文，所以我也尽量顺应它的表达避免歧义。Variablesusevariablesformorecomprihensiblecode:@nic... 查看详情

less入门

LESS原理及使用方式本质上，LESS包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。LESS并没有裁剪CSS原有的特性，更不是用来取代CSS的，而是在现... 查看详情

less快速入门

 Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。Less可以运行在Node、浏览器和Rhino平台上。网上有很多第三方工具帮助你编译Less源码。实例:@ba... 查看详情

less入门

1.Less是什么？LessCSS是一种动态的样式语言，属于Css预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。LESS可以在多种语言、环境中使用，包括浏览器... 查看详情

less基础入门

　　平时在工作中,偶尔会遇到老大让你修改原来写好的样式,如果修改的多的话,修改起来是非常麻烦的.他不像js一样,定义变量、函数,需要修改某些值,直接修改方法就行了。less的出现,恰恰帮我们解决了这个问题在这呢,我们简要... 查看详情

less--入门(代码片段)

Less(LearnerStyleSheets)是向后兼容css扩展语言。变量(Variables)1@width:10px;2@height:@width+10px;3header4width:@width;5height:@height;6编译后等同于：1header2width:10px;3height:20px;4混合(Mixins)1.bordered2border-top:1 查看详情

sql注入从入门到进阶：sqli-labs靶场通关笔记(代码片段)

目录环境搭建显错SQL注入基本步骤（以Less-1为例）1）判断类型2）构造闭合3）查询字段数4）显位5）爆库6）爆表7）爆列8）爆值Less-2Less-3Less-4Less-5updatexml报错Less-6Less-7写马Less-8布尔盲注1）... 查看详情

lees入门(代码片段)

安装1下载EasyLess插件   2新建less文件，输入less语句，保存，就会在同级目录下生成同名的css文件   3在HTML页面导入<linkrel="stylesheet"href="../less/a.css"> 与Sass的区别：Less是基于JavaScript的，在客户端处理... 查看详情

前端入门23-css预处理器（less&sass）

...讲讲这两个问题，写过CSS应该就会比较清楚，虽然我才刚入门，但在写一些练手时就已经有点感觉了：写CSS后，很难维护，维护基本要靠注释来，而且由于HTML文 查看详情

十分钟入门less

我们都知道写CSS代码是有些枯燥无味的，尤其是面对那些成千上万行CSS代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的CSS可维护，但它本不... 查看详情

less快速入门(代码片段)

我们都知道写CSS代码是有些枯燥无味的，尤其是面对那些成千上万行CSS代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的CSS可维护，但它本不... 查看详情

less入门及基础学习（建议有css基础）

本文整理自：Less：优雅的写css代码原文写的很好，也很清晰，本文为个人整理方便个人对知识进行汇总整理！（个人建议原地址博文）css是不能够定义变量的，也不能嵌套。它没有编程语言的特性。在项目开发中，常常发现有... 查看详情

十分钟入门less(翻译自：learnlessin10minutes(orless))

十分钟入门less(翻译自：LearnlESSin10Minutes(orless))　　注：本文为翻译文章，因翻译水平有限，难免有缺漏不足之处，可查看原文。　　我们知道写css代码是非常枯燥的，尤其是写重复颜色、样式的代码，这需要我们付出很多努力... 查看详情

前端利器之less入门(代码片段)

less是什么？Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。less，是方便我们快速编写CSS的工具，它增强了CSS代码的扩展性和复用性。Less可以运行在Node或浏览器端。less能为我... 查看详情

vue--十分钟入门less

这篇文章来自DannyMarkov，是我最喜欢的博主之一，实际上我最近翻译的一些文章全是出自他手。在查看本文之前你也可以查看原文。我们都知道写CSS代码是有些枯燥无味的，尤其是面对那些成千上万行CSS代码的项目。你始终在相... 查看详情

gulp学习入门(代码片段)

constgulp=require('gulp');constless=require('gulp-less')//定义任务gulp.task('helloGulp',function()console.log('hellogulp'))//运行任务gulp任务名称gulp.task('dest',function()gulp.src('./src/*/*.*').pipe(gulp.dest('./dist'))console.log... 查看详情