LESS（sublime）

最新推荐文章于 2024-03-18 09:50:00 发布

广东话的蛇皇

最新推荐文章于 2024-03-18 09:50:00 发布

阅读量153

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104594927

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

less

less赋予了CSS逻辑和简化了css编写并降低了CSS的维护成本
less中文网
支持css原生语法，支持变量
浏览器不支持需要编译转换成css才能运行、解析（即less解析器）
在这里插入图片描述

安装

下载node
打开cmd npm install -g less

针对sublime的自动编译

打开sublime安装插件Less2Css
如果编译时submile报错（unable to interpret argument clean-css-if itis a plugin(less-plugin-clean-css）
在cmd里安装 less-plugin-clean-css插件npm install less-plugin-clean-css
在tools栏中找到Less并点击set css output directory to 'auto'
编译后的css为压缩代码

语法

注释：在css当中可以使用，所以编译的过程当中生成在css文件

/*注释：在css当中可以使用，所有编译的过程当中生成在css文件*/
//注释：css不支持,不会编译在css文件

变量

必须@前缀，：是等于的意思，必须分号结束；
不能以数字开头，不能包含特殊字符，区分大小写

//变量用于字符拼接使用方法
@mainColor:#e92323;
@className:box;
.@{className}{
  color: @mainColor;
}

函数

@charset "UTF-8";
/*混入*/
/*组合样式的例子*/
//.w50{
//  width: 50%;
//}
//.f_left{
//  float: left;
//}
//.f_right{
//  float: right;
//}
/*类混入*/
//.w50-f_left{
//  .w50();
//  .f_left();
//}

/*函数混入*/
/*定义函数*/
.w50(){
  width: 50%;
}
/*定义函数包含参数*/
//.f_left(){
//  float: left;
//}
//.f_right(){
//  float: right;
//}
/*
1.定义了参数（没有默认值），调用的时候必须传参
2.怎么定义默认值 和定义变量值是一样的
3.定义了参数（有默认值），可传可不传
*/
.f(@direction:left){
  float: @direction;
}
.borderRadius(@width:100px){
  border-radius: @width;
  -webkit-border-radius:@width;
  -moz-border-radius:@width;
  -o-border-radius:@width;
  -ms-border-radius:@width;
}
.w50-f_left{
  .w50();
  .f(right);
  .borderRadius(20px);
}

嵌套

@charset "UTF-8";
.wjs_app{
  display: block;
  img{
    display: none;
  }
  /*需要连接的情况：&*/
  &:hover{
    img{
      display: block;
      position: absolute;
      left: 50%;
      margin-left:-60px;
      border: 1px solid #ccc;
      border-top: none;
      top:40px;
      z-index: 100000;
    }
  }
  > div{
    display: block;
  }
}

导入

@charset "UTF-8";

@import "variables";

@import "mixins";

@import "topBar";

@import "banner";

运算

@num:5;
ul{
  width: 100%*@num;
  li{
    width: 100%/@num;
    color: red+yellow+blue;
    background: gray*0.3;
    /*内置函数*/
    border-color: darken(red,20%);
  }
}

bootstrap定制

原理：通过对less修改并重新编译成css

线下通过修改less定制bootstrap
线上可以通过bootstrap网站定制

在浏览器中预览less

在一些情况下无法在服务端解析less或者服务端解析less失败，这个时候需要在浏览器直接预览less
实现原理：用JavaScript插件对服务端less文件进行ajax请求并在浏览器中编译成css再直接追加到文档中
1.less无法在浏览器端直接使用
2.浏览器不识别
3.必须解析成css代码
4.通过less解析插件（javascript）
5.引入less文件需要加上 type=“text/less”
6.less.watch(); 无刷新预览样式
7.以http形式打开网页预览

 	<link rel="stylesheet" type="text/less" href="../less/test.less">
    <script src="../lib/less/less.min.js"></script>
    <script>less.watch();</script>

Less的rem适配

rem是相对单位em大小是基于父元素的字体大小r 意思 root 根元素，html标签rem的大小是基于html元素的字体大小，浏览器默认的字体大小是16px
1.伸缩布局 flex
2.流式布局百分比
3.响应布局媒体查询（超小屏设备的时候：流式布局
共同点：元素只能做宽度的适配（排除图片）
适配方案rem：宽度和高度都能做到适配（等比缩放）
4.rem布局
通过控制html上的字体大小去控制页面上所有已rem为单位的基准值控制尺寸
4.1 把页面上px单位转换成rem单位
4.2 页面制作的时候 ps 上的量取的px转成rem使用
4.3 怎么换算？？？预设一个基准值方便计算 100px
4.4 适配的时候设置基准值 320px 50px 怎么算：（640px 100px ===320px 50px）
4.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度
4.6 怎么去改变（js换算，媒体查询推荐）

rem适配方案不好维护设备，设计稿尺寸，预设基准值这些都会更新
运用less就完美了

@charset "UTF-8";
//变量
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//设备的种类
@len:length(@adapterDeviceList);
//主体颜色
@snColor:#fabc09;