less样式预编译

1.css原生变量定义

使用“–”进行变量定义
使用var()进行变量的引用

--bgColor:red;
background:var(--bgColor);

2.css原生计算属性

使用calc进行计算属性
```
width:calc(50% - 200px)
```

使用calc进行变量计算

bgWidth:50%;
width:calc(var(--bgWidth) - 200px)

细节介绍:calc中的运算符左右两侧必须加空格
```
width:calc(59% - 200px)
```

3.css原生变量的作用域

当前css页面的根变量

:root{bgColor:red;
}
.box1{background:var(--bgColor);
}
.box2{background:var(--bgColor);
}

4.less预处理器

浏览器不识别less文件，less只是方便我们开发css和增强语法逻辑的

在vscode中安装easy less插件，用于将less转化成css文件

5.less变量的定义

使用@进行变量定义
```
@bgColor:red;
```

使用"."进行函数声明 mixin

//声明函数 关键字
.setColor(@c){background-color:@c;
}div{//调用函数.setColor(red)
}

使用嵌套

div{p{a{color:red;}}
}

生成的就是：

div p a{color:red;
}

使用循环loop

//定义递归循环
.loop(@index) when (@index > 0){.loop(@index - 1);width:@index * 1px;
}
//使用
div{.loop(2)
}

生成的css文件

div{width:1px;width:2px;
}

例子：

//定义递归循环
.loop(@index) when (@index > 0){.loop(@index - 1);.d@{index}{width:@index * 1px}
}
//使用
div {.loop(2)
}

生成：

div .d1{width:1px;
}
div .d2{width:2px;
}

江在川上曰：less样式预编译相关推荐

江在川上曰：js中的JSON解析和序列化
江在川上曰:js中的JSON解析和序列化 JSON解析和序列化 JSON是javascript的一个严格的子集,利用了javacript中的一些模式来表示结构化数据.他只是一种数据格式,并非一种编程语 ...
江在川上曰：webpack前端工程化
前端工程化 1.模块化相关规范 1.1浏览器端模块化规范名称文件 AMD Require.js CMD Sea.js 1.2 服务器端模块规范 common.js 1.3 大一统的模块化规范(ES ...
江在川上曰：云服务器上的flask项目部署(Ubuntu+Flask+Gunicorn+Supervisor+Nginx+Anaconda)
云服务器上的flask项目部署(anaconda.python.flask等相关安装) 在探索未知的路上走了很多弯路,这里记载了我在阿里云上部署项目切实可行的步骤,当然问题因人而异,没有四海皆适用的准 ...
江在川上曰：JS函数
函数函数的定义方式自定义函数(命名函数) 函数表达式(匿名函数) 利用 new Function("参数1","参数2","函数体") ...
江在川上曰：vue中使用swiper
vue中使用swiper 1 安装 //这是swiper组件 npm install vue-awesome-swiper --save-dev //这是swiper组件的依赖包 npm instal ...
java预编译啥意思_java预编译 java jdbc 预编译语句和普通语句的区别
java中什么是预编译precompile?总有一天你恍然大悟,父母是你花心思,花时间最少,却最爱你的人. 什么是预编译?起什么作用的? . 在java中如何实现预编译?祝你幸福!这句话真俗.小编会祝 ...
【记录8】Geoserver发布ArcGIS图层,使用QGIS上传图层样式
文章目录前言一.准备数据二.使用Geoserver发服务 1.新建工作空间 2.新建存储仓库 3.发布图层 4.图层预览三.使用ArcGIS和QGIS导出样式文件 1.导出为lyr格式 2.下 ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
js上传视频，预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...

江在川上曰：less样式预编译

less样式预编译

1.css原生变量定义

2.css原生计算属性

3.css原生变量的作用域

4.less预处理器

5.less变量的定义

江在川上曰：less样式预编译相关推荐

最新文章

热门文章