less语法，预处理css,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=https://registry.npm.taobao.org

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;
}

Mixin

/* 定义一个类 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
/* 定义的类应用到另个一个类中 */
＃header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

import

导入其他css文件

举例：在1.less文件下引入buttom.less文件
1.html 文件
我的 less文件和css文件都在html文件同目录下的css文件里

<!DOCTYPE