less基本使用

255 阅读1分钟

less语言

less的下载

1.安装node.js(官网下载后 安装一直下一步即可)
2.安装之后,测试是否安装完成
 2.1 node -v 或者 npm -v查看安装版本
 2.2 npm install less -g 进行安装(时间不长,耐心等待)

使用npm安装一直下载不动!!!

1.先修改下载地址
npm config set registry https://registry.npm.taobao.org
2.下载文件
npm install less -g
3.输入lessc -v 查看是否成功

怎么将less文件转化为css文集

less下载配置完成后

1.打开cmd,将目录转到你要转化的less文件的文件夹上,若直接转化到less文件上则会报错

1的示范

2.输入lessc less文件 转化的css名字

less语法总结

(1变量 可以将属性的值赋值给一个变量,变量为完全的常量,所以只能定义一次

翻译结果

(2)混入 将一些通用的属性放在一个class中,然后在例外一个class中去调用这些属性。任何的class和id或是元素都可以用这样的方式进行引入。

翻译结果

(3)带参数混合

翻译结果
(4)以嵌套的方式写层叠样式,可以改写成用less语法进行,其中&符号用于写串联选择器,这一点对于伪类选择器有很大的作用。
翻译结果
(5)任何数字、颜色都可以参与运算
(6)内置函数less本身提供了一系列的颜色运算函数。颜色会被转化成为HSL色彩空间,然后在通道级别操作。

小例子

(7)import导入

结果