less语法，预处理css,http状态码，

less语法，预处理css,http状态码，

今天分享一些less知识点附带其他知识

• less语法
• 安装
• • 安装不成功的可以先安装淘宝镜像
• less编写
• • 注释
  • 定义变量
  • 嵌套
  • Mixin
  • import
  • 高亮和高暗
• 其他知识点
• • http协议状态码
  • 请求方式
  • 监听页面窗口大小

less语法

一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点

CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题

安装

在安装less之前先安装node.js 因为npm下载是基于node.js
在node.js官网下载最新的稳定版
傻*式安装一直下一步next，安装在C盘就行,
检查安装完毕
在电脑的运行/cmd软件中打开，检测版本号。快捷键打开 win+R 。下载需等待

node -v
npm -v

以上都是是安装成功 ,成功后安装less

npm install -g less

可以在电脑运行/cmd中全局安装，也可以在编辑器中安装
全局安装是在cmd的C盘中安装，

安装不成功的可以先安装淘宝镜像

基于某种原因下载东西是外网现在，下载慢，不成功。可以下载淘宝镜像后再试试

npm config set registry=

less编写

打开终端方式三种

1. 在集成管理器中
   

2. 在终端，新建终端中
   

3. 快捷键ctrl+~/`

在终端中输入，生成css文件

标准格式
lessc 1.less 1.css
lessc 1.less自己新建的less文件 1.css生成什么类型的文件

注： 在这里输入命令报错，是less没有下载需要在终端在重新下载一下less

npm install -g less

住： 这种错误需要配置一下电脑设置

在电脑搜索 powerShell 并以管理员打开 输入以下命令

set-executionpolicy remotesigned

然后在终端重新输入less命令就ok了

注释

html引入的时候还是引入原先css样式表

// 模板注释，这里的注释转换成CSS后将会删除
/* CSS 注释语法 转换为CSS后任然保留 */

定义变量

在less文件下输入
此处变量名只是名目这样声明，实际不能这么写

@变量名: 变量值;
@bgColor: #f5f5f5;
​
body{width: @变量名;background-color: @bgColor;
}

写完一句less就生成 一下css文件

嵌套

less文件

& 代表上一级标签
_> 子代选择器

.container {width: @containerWidth;> .row {height: 100%;a{color: #f40;&:hover{color: #f50;}}}div {width: 100px;.hello {background-color: #00f;}}
}

css文件

.container {width: 1024px;
}
.container > .row {height: 100%;
}
.container > .row a {color: #f40;
}
.container > .row a:hover {color: #f50;
}
.container div {width: 100px;
}
.container div .hello {background-color: #00f;
}