five

2024-02-02 21:40:58

less使用安装

安装

npm install -g less

lessc -v 查看版本

学习网址

1.1.2学习less
[官网](http://lesscss.org/)
    [中文网](http://lesscss.cn/)  http://www.1024i.com/demo/less/
Webstrom 插件
Lessc less.less less.css  编译less文件成css

less编译

命令行编译

进入当前文件的目录 cd Desktop 切换到桌面

lessc test.less test.css 将其编译成css文件

此种编译较为麻烦执行自动编译过程

webstrom自动编译

less需要解析成css才能被浏览器识别所以称为预解析语言

概念

本质上，less有一套自定义的语法及解析器，用户根据这些语法定义自己的样式规则，这些规则通过解析最终会解析成css文件。

基本语法 --变量

在里面写注释使用/**/ 双斜杠不支持

变量不能包含特殊字符不能以数字开头

以@为前缀， :是等于的意思必须以分号结束大小写区分

@color: red;

如果需要和字符串拼接需要加{}进行拼接

leg

@charset "UTF-8";必须先声明字符集 如果先生成文件了  就重新编译  删掉原来的字符集

@mainColor: red;
@className: box;
.@{className}{
color: @mainColor;
}

mixin混入

类名混入

组合样式
.w50{
    width: 50%;
}
.f_left{
    float: left;
}
.w50-f_left{
    .w50();
    .f_left();
}
这样w50-f_left就会继承w50和f_left的样式

函数混入

类名的混入还是会造成代码冗余

.w50(){
  width: 50%;
}
.f_left(){
  float: left;
}
.w50-f_left{
  .w50();
  .f_left();
}

上面这种方式将.w50().f_left()加上括号写成函数进行调用

这种代码更少

函数混入传入参数

.w50(){
  width: 50%;
}
//定义了参数  可以设置默认值 @direction: left
.f(@direction: left){
  float: @direction;
}
.w50-f_left{
  .w50();
  .f(right);
}
这种更加的灵活
调用时参数可传可不传

嵌套

.wjs_app{
  display: block;
  img {
    display: none;
  }
  &:hover{
    color: red;
  }
}

编译结果为当需要连接的时候使用 &进行连接一般伪元素用的比价多或者当类名被选中active

@charset "UTF-8";
.wjs_app {
  display: block;
}
.wjs_app img {
  display: none;
}
.wjs_app:hover {
  color: red;
}

import 导入

相当于徐要使用到其他模块里面的东西  就需要导入
语法  @import "mixins";
@import "variables";
把需要的css引进到某个文件   就可以拥有其他less文件里面的css样式
最终只需要这个文件的css样式就可以了

运算函数

@num:7;
ul{
  width: 100%*@num;
}
li{
  width: 100%/@num;
}
输出
ul {
  width: 700%;
}
li {
  width: 14.28571429%;
}

在文档里面有内置函数可以进行运用查找

bootstrap定制 less源码线上定制

less - 浏览器端使用

没有环境进行直接编译就需要在浏览器上直接进行编译

less无法直接在浏览器直接使用

解决方法浏览器不识别

使用less插件进行解析引入插件应该放在css文件引入的下面

引入的时候需要将引入type文件类型 text/css 进行解析

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

加上这个如果更新了文件就需要刷新一下

如果引入watch插件进行监听进行无刷新进行更新但是时间间隔比较久所以直接刷新一下比快了解一下就好了

<script>less.watch();</script>
加上这就话就可以le

less.js底层使用的ajax

rem认识

rem是相对单位

em大小是基于父元素字体大小父元素是16px 则2em是32px

rem是大小基于 html元素的字体大小

rem适配

#####布局方式

伸缩布局 flex

流逝布局百分比加入标准适配就可以了

响应式布局媒体查询

共同点元素只能做宽度的适配（排除图片）

#####宽度和高度一起缩放适配方案 rem

设置rem的初始值比如 50px

则在320*50px的页面此时换算之后就是 6.4rem** 1rem
在640*100px页面里面 rem要变成100px
通过控制html的font-size的大小来控制页面上所有已rem伪单位的基准值控制

把页面上的px单位转换成rem单位
页面制作的时候 psd上的量取depx转换成rem使用
预设一个基准值方便计算根据当前的基准值进行其他要页面的rem基准值

换算公式

换算公式当前的rem基准值 = 预设的基准值*当前设备的宽度/设计稿的宽度
怎么改变res 改变 js 改变或者媒体查询推荐

rem-less适配

rem适配不好维护设备会更新设计稿尺寸预设基准值

适配主流设备

less没有for循环数据可以使用函数调用函数进行循环

停止条件根据数组的长度去停止当前的循环

在less 循环是通过序号进行判断从1开始所以注意循环结束条件加上=号

也就是传参数的index起始值为1

min-width: extract(@adapterDeviceListm, @index)
这个表示取数组中的第几个

ctrl+shift+p 可以可以快捷调出安装插件控制台

字体图标的使用下载 fw这个文件拿到里面的css和font

引入字体图标的css文件

<link rel = "stylesheet" type = "text/css" href= "lib/font-awesome/css/font.awesome.css">

font-awesome字体图标

居中对齐使用text-align: center

只要引入上面的文件在字体图标的网站查找对应图标的类名就可以了

zepto.js

轻量级 api于jq类似

jq的end（）可以找到上一个对象 endSelf（）直接找到第一个

zepto的滑动事件 swipeUp swipeDown swipeLeft swipeRight

这些事件可以用on进行注册

码农公寓