less的安装与使用（LESS从入门到精通）
less的安装与使用（LESS从入门到精通）LESS——像写javascript一样书写cssSASS/SCSS和Stylus都很强，但是我还是选择了LESS，个人喜欢NodeJS，然后stylus空格我又不喜欢，就用了LESS，现在用的也习惯了，下面就给大家介绍一下LESS的一些用法吧。https://www.sass.hk/ https://www.w3cschool.cn/sass/ https://github.com/sass/sass LESS学习网站：http://lesscss.cn/ https://less.bootcss.com/ https://www.w3cschool.cn/less/ https://github.com/less/less.js Stylus学习网站：https://stylus.bootcss.com/ https://github.com/stylus/stylus 二、为什么用L
一、LESS是什么
LESS是css预处理语言，是CSS的扩展。
然后说说比较流行的几款预编译器：SASS/SCSS、LESS、Stylus。
SASS学习网站：
https://www.sass.hk/ https://www.w3cschool.cn/sass/ https://github.com/sass/sass
LESS学习网站：
http://lesscss.cn/ https://less.bootcss.com/ https://www.w3cschool.cn/less/ https://github.com/less/less.js
Stylus学习网站：
https://stylus.bootcss.com/ https://github.com/stylus/stylus
二、为什么用LESS
SASS/SCSS和Stylus都很强，但是我还是选择了LESS，个人喜欢NodeJS，然后stylus空格我又不喜欢，就用了LESS，现在用的也习惯了，下面就给大家介绍一下LESS的一些用法吧。
LESS——像写javascript一样书写css
特点：
1、写样式更简单：嵌套
2、使用方便：变量、运算、函数
3、学习成本低：语法
三、怎么用LESS
1、安装使用
(1)浏览器中使用
在head中引用：
<link rel="stylesheet/less" type="text/css" href="index.less" />//必须加上/less <script src="https://img.aigexing.comless-1.3.3.min.js"></script>//js必须在less后引用 CDN： https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js https://cdn.bootcss.com/less.js/3.9.0/less.js
观察模式，不调用也可以：
<link rel="stylesheet/less" href="index.less"> <script>less = { env: 'development'};</script>//声明开发模式 <script src="https://img.aigexing.comless-1.3.3.min.js"></script> <script>less.watch();</script>//调用观察模式
根据个人需求进行配置，不配置也可以:
<script> less = { env: "development" // 开发(development)模式/生产(production)模式 async: false // 异步加载 fileAsync: false // load imports async when in a page under // a file protocol poll: 1000 // 观察模式间隔 functions: {} // user functions keyed by name dumpLineNumbers: "all" // "comment" or "mediaQuery" or "all" relativeUrls: false // whether to adjust url's to be relative // if false url's are already relative to the // entry less file rootpath: ":/"// a path to add on to the start of every url //resource }; </script>
(2)在node.js中使用
安装：
npm install -g less
编译：
lessc index.less index.css
2、语法
保留CSS的基础语法，并进行了扩展
import "reset.css" less在编译时不会变动css文件 import "base" less导入其他less文件时可以省略文件格式 import url("base.less") less也可以使用url形式导入，但是必须有后缀
3、运算
在less中，可以在书写属性时直接进行加减乘除
例子：header插入了一个padding
@fullWidth: 1200px; .header{ width: @fullWidth – 20px * 2; padding: 0px 20px*2; }
4、变量
(1)格式：以@开头
@headergray: #c0c0c0; @fullWidth: 1200px; @logoWidth: 35%;
(2)字符串插值
@name: banner; background: url("images/@{name}.png") no-repeat; 编译： background: url("images/banner.png") no-repeat;
(3)避免编译
background: ~"red"; 编译： background: red;
(4)移动端rem布局中的使用
less: @fullWidth: 750; @toRem: unit(@fullWidth/10 rem); header{ height: 150/@toRem; } 编译： header{ height: 2rem; }
5、混合
(1)在一个类中继承另一个类
.class1{ } .class2{ .class1; }
(2)用&替换当前选择器
a{ color: #000; &:hover{ color: #f00; } }
(3)在父类中嵌套子类
.class1{ p{ span{ a{ } } &:hover{ } } div{ } }
(4)带参混合
.color(@color=red){ color: @color; } .class1{ .color(#0f0); } .class2{ .color(); }
6、函数
(1)逻辑控制
格式：statement when(conditons)、prop: if((conditions) value);
例子1：在less中使用一个带参类名展示上下左右四个方向的纯CSS三角形
.triangle(@val) when(@val=left){ width: 0; height: 0; border-left: none; border-right: 20px solid #f00; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .triangle(@val) when(@val=right){ width: 0; height: 0; border-right: none; border-left: 20px solid #f00; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .triangle(@val) when(@val=top){ width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: none; border-bottom: 20px solid #f00; } .triangle(@val) when(@val=bottom){ width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; border-bottom: none; } .div1{ .triangle(left); } .div2{ .triangle(right); } .div3{ .triangle(top); } .div4{ .triangle(bottom); }
例子2：
background: if((true) #f00);
(2)循环
例子：将8个td的背景依次更换为bg_1.png、bg_2.png、…、bg_8.png
table td{ width: 200px; height: 200px; .loop(@i) when(@i<9){ &:nth-child(@{i}){ background: url(~"../images/partner_@{i}.png") no-repeat; } .loop(@i 1); } .loop(1); }
(3)列表
@backgroundlist: apple pear coconut orange; 复制代码
(4)less函数库
image-size(“bg.png”) 获取图片的Width和Height image-width() 获取图片的Width和Height image-height() 获取图片的Width和Height convert(9s ms) 转换9秒为毫秒 convert(14cm mm) 转换14厘米为毫米
更多函数参考官方函数库，包括混合函数、数学函数、字符串函数、列表函数等等
7、使用JS表达式
less中还可以引用js表达式，不过一般都不推荐使用，此种方式在使用nodejs将less编译css时可能会报错。
格式：`javascript`
例子：将高度设置为当前获取到的浏览器的高度
@fullHeight: unit(` window.screen.height ` px); div{ height: @fullHeight; }
尝试将@width: unit(` window.screen.width ` px)引进vw布局？
不推荐，不建议less在正式环境中使用，使用LESS时需要在头部引入js，而在js执行时的时候，会消耗时间，而less编译需要在js执行后，会在一定程度上影响到性能。
码字不易，后面还会放出各种文章，喜欢的关注一下我吖，你们的关注是我最大的动力
转自：https://juejin.im/post/5c8e4f4651882545ba60a230
作者：hn-failte
