Less简介——CSS_less css__洋的博客-程序员宅基地
文章目录
CSS的高级功能
定义变量
css也可以进行变量的定义
可以在html中定义全局变量，之后想要修改的时候直接修改全局变量即可。
- 变量定义格式：
--变量名:变量值; - 变量的使用格式：
var(--变量名)
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html{
--color:rgb(76, 145, 76);
--length:100px;
}
.box1{
width: var(--length);
height: var(--length);
background-color: var(--color);
}
.box2{
width: var(--length)x;
height:var(--length);
color: var(--color);
}
.box3{
width: var(--length);
height: var(--length);
border: var(--color) solid 2px;
}
</style>
</head>
<body>
<div class="box1">helloworld</div>
<div class="box2">helloworld</div>
<div class="box3">helloworld</div>
</body>
</html>
输出：
可以直接传计算式子
使用calc（）计算函数
eg：
width: calc(100px*2);
问题：这些属性比较新，很多浏览器不支持
IE就不支持，这就引入了less
less简介
- less是一门css的预处理语言
- less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
- less的兼容性比较好，而且添加了许多对CSS的扩展，支持变量和函数
- 但less不是css，浏览器不能直接识别，即浏览器无法执行less代码，要执行必须先将less转换成css
转换方法：在css中只需要安装easyless插件即可
安装完成之后vscode就可以自动将.less文件转换成.css文件
.less文件的写法和css一样，但是功能比css强大。
eg：子元素的央视直接可以写在大括号中。
.body{
background-color: darkseagreen;
.box1{
background-color: darksalmon;
}
}
会自动生成对应的css文件
.body {
background-color: darkseagreen;
}
.body .box1 {
background-color: darksalmon;
}
less基础语法
注意html引入的时候是要引入对应的css文件。
嵌套结构
使用less指定的样式可以嵌套指定
eg：
body{
background-color: darkseagreen;
}
.box1 {
background-color: darksalmon;
//为box1的后代box2设置样式
.box2{
background-color: darkcyan;
.box4{
background-color: darkslateblue;
}
}
.box3{
background-color: darkred;
}
}
对应的css就是
body {
background-color: darkseagreen;
}
.box1 {
background-color: darksalmon;
}
.box1 .box2 {
background-color: darkcyan;
}
.box1 .box2 .box4 {
background-color: darkslateblue;
}
.box1 .box3 {
background-color: darkred;
}
注释
//代表less注释，单行注释
// less注释，不会被解析到css中
/**/css注释，会被解析到css文件中
eg：
less文件
//less注释，不会被解析到css中
/*
css注释，会被解析到css文件中
*/
对应的css文件
/*
css注释，会被解析到css文件中
*/
变量
变量,在变量中可以存储一个任意的值。
并且我们可以在需要时,任意的修改变量中的值。
less中变量的声明：@变量名：变量值；
变量的使用：
- 可以直接使用的变量，直接@变量名进行引用
- 类名变量，属性名变量，或者使用一部分值之时的引用：@{变量名}
注意变量不会在css中显示
eg：
// 存储像素
@a:100px;
// 存储颜色
@b:red;
// 存储类名
@c:box6;
.box5 {
// 可以直接使用的变量，直接@变量名进行引用
width: @a;
color:@b;
}
// 类名变量，或者使用一部分值之时的引用：@{
变量名}
.@{
c}{
width: @a;
background-image: url("@{c}/1.jpg");
}
css文件:
.box5 {
width: 100px;
color: red;
}
.box6 {
width: 100px;
background-image: url("box6/1.jpg");
}
- 变量发生重名时，会优先使用离自己比较近的变量
- 可以在变量声明前就使用变量
可以通过$属性名，直接对属性值进行引用
父元素
&: 表示外层的父元素
less文件：
.box1 {
// 后代元素
.box2 {
color: red;
}
// 子元素
>.box3 {
color: rosybrown;
}
// hover
// &: 表示外层的父元素
&:hover {
background-color: darkseagreen;
}
&-color {
background-color: darksalmon;
}
}
css
.box1 .box2 {
color: red;
}
.box1 > .box3,
.p3 {
color: rosybrown;
}
.box1:hover {
background-color: darkseagreen;
}
.box1-color {
background-color: darksalmon;
}
less的扩展
extend扩展
extend，一个样式可以直接引用并扩展另一个样式——选择器分组
.box1 {
>.box3 {
color: rosybrown;
}
}
.p1 {
width: 100px;
height: 100px;
}
.p2:extend(.p1) {
color: darkslategray;
}
.p3:extend(.box1 > .box3) {
width: 3px;
height: 3px;
}
css：
.box1 > .box3,
.p3 {
color: rosybrown;
}
.p1,
.p2 {
width: 100px;
height: 100px;
}
.p2 {
color: darkslategray;
}
.p3 {
width: 3px;
height: 3px;
}
混合函数扩展
直接对指定的样式进行引用，这实际上就是将样式进行了复制，又叫mixin混合函数
.p1 {
width: 100px;
height: 100px;
}
.p4 {
// 这里就相当于将p1的样式在这里进行了复制
.p1();
}
css
.p4 {
width: 100px;
height: 100px;
}
创建 mixin：
mixin混合函数可以单独做复制用，声明方法就是在选择器后面添加一个括号，该函数就专门供副复制使用。
单独创建的mixin混合函数不会在css中显示。
.p5() {
width: 100px;
height: 100px;
background-color: goldenrod;
}
.p6 {
.p5();
// 也可以不加括号直接写.p5;
}
css：
.p6 {
width: 100px;
height: 100px;
background-color: goldenrod;
}
混合函数
混合函数的扩展方式是直接进行复制，这样会造成重复代码，所以混合函数的主要用途不是做扩展使用，而是作为“函数”使用
less
// 混合函数的使用
.text(@w,@h,@bg-color){
width: @w;
height: @h;
border: 1px solid @bg-color;
}
// 可以指定初始值
.text1(@w: 100px, @h: 200px, @bg-color:orange)
{
width: @w;
height: @h;
border: 1px solid @bg-color;
}
div{
// 传参
// 按顺序写参数
.text(200px,300px,red);
// 或指定名称写参数，这样就不用管顺序了
.text1(@w:300px,@h:200px,@bg-color:yellow);
}
css:
div {
width: 200px;
height: 300px;
border: 1px solid red;
width: 300px;
height: 200px;
border: 1px solid yellow;
}
函数
- average(color1,color2):取颜色的平均值
eg；
span {
color:average(red, yellow);
}
css:
span {
color: #ff8000;
}
- darken:颜色加深函数
html{
height: 100%;
width: 100%;
}
body{
height: 100%;
width: 100%;
background-color: steelblue;
}
body:hover{
// 颜色加深10%
background-color: darken(steelblue,10%);
}
css:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
background-color: steelblue;
}
body:hover {
background-color: #38678f;
}
less补充
- 在less中所有的数值都可以直接进行运算
eg：
.box1{
width: 100px + 100px;
height: 100px/2;
background-color: thistle;
}
- @import用来引入其他 less 文件，将其他less文件引入到当前less文件。
eg：
@import "test.less";
方便模块化的管理
css文件和less文件之间的映射关系
问题：当我们调试代码的时候，在浏览器只显示的文件位置是css文件的位置，但是我们要修改的是less文件而不是css文件。
修改成less显示：
修改后，再创建less文件就会生成.css文件和.css.map文件。在之后查看浏览器元素就会出现再less中的位置。
- 第一个属性
"compress": false是压缩，压缩后，生成的css文件都会写成一行以节省空间
智能推荐
Akka（13）： 分布式运算：Cluster-Sharding-运算的集群分片-程序员宅基地
通过上篇关于Cluster-Singleton的介绍，我们了解了Akka为分布式程序提供的编程支持：基于消息驱动的运算模式特别适合分布式程序编程，我们不需要特别的努力，只需要按照普通的Actor编程方式就可以实现集群分布式程序了。Cluster-Singleton可以保证无论集群节点出了任何问题，只要集群中还有节点在线，都可以持续的安全运算。Cluster-Singleton这种模式保证了某种Ac
java线程 kill linux_新手程序员登录服务器杀进程！高级：你别再瞎Kill进程服务了...-程序员宅基地
免费无套路分享 100G Java 视频、pdf 面试学习资料获取方式：【关注 + 转发】后，私信我，回复关键字【666】，即可免费无套路获取哦~以下是资源的部分目录以及内容截图：干货较多，这里仅仅贴出了部分哟~重要的事再说一遍，获取方式：【关注 + 转发】后，私信我，回复关键字【666】，即可免费无套路获取哦~正文开始，前言我们都知道，kill在linux系统中是用于杀死进程。kill pid ..._java 杀linux进程
actionSupport类-程序员宅基地
actionSupport类该类实现了action接口和其他的几个有用的接口,比如数据校验、错误消息本地化等.继承该类后,这些功能便自动获得.一、基本校验public void validate(){ PortfolioService ps = getPortfolioService(); if ( getPassword().length() == 0 ){ ..._actionsupport类
相对熵(KL散度)-程序员宅基地
https://zhuanlan.zhihu.com/p/37452654https://blog.csdn.net/weixinhum/article/details/85064685交叉熵和相对熵相对熵(KL散度)KL 散度：衡量每个近似分布与真实分布之间匹配程度的方法：\[D_{K L}(p \| q)=\sum_{i=1}^{N} p\left(x_{i}\right)..._为什么相对熵是inf
基于Simulink的模糊控制器设计及Matlab源代码_simulink模糊控制-程序员宅基地
现在，我们将这些定义组合起来，构建一个模糊控制器模型。模糊控制器的输入和输出都是模糊变量，其中输入的模糊变量称为“控制量”，输出的模糊变量称为“被控量”。将Fuzzy Membership Function模块的输入设置为误差信号，将其输出连接到Fuzzy Logic Controller模块的输入，将Fuzzy Logic Controller模块的输出连接到一个Scopes模块，然后开始仿真。假设我们要控制一个电机的转速，输入控制量是电机的误差（期望转速与实际转速之差），输出被控量是电机的转速。_simulink模糊控制
DFS客户端访问设置及安全策略-程序员宅基地
除了Windows Server 2003家族中基于服务器的DFS组件外，还有基于客户端的DFS组件。DFS客户端可以将对DFS根目录或DFS链接的引用缓存一段时间，该时间由管理员指定。DFS客户端组件可以在许多不同的Windows平台上运行。Windows Server 2003 家族产品支持下列平台上的目标。 一、 从其他计算机访问DFS目标 表1 支持DFS的操作系统列
随便推点
UIMenuController的用法-程序员宅基地
在很多应用当中， 当我们长按一段文字或者图片的时候会弹出一个菜单，我们通过这个菜单可以实现文字的复制、剪切、删除和各种操作：这个菜单就是UIMenuController，系统默认支持UITextField、UITextView、UIWebView控件的UIMenuController操作；对于..._uimenucontroller uimenucontrollerwillhidemenunotification
Mac系统占用空间大、空间不够、查看系统文件大小分布-程序员宅基地
转载:https://blog.csdn.net/u011423056/article/details/79450845背景：最近老提示空间不够，这就比较讨厌了，为什么存储空间这么快就花完了。。。如图，256的空间，就剩下几个G了，其中最大头的系统占用：160G，占比60%多，我勒个擦。。。正常情况下：我们可以点击管理，进入到系统磁盘优化界面：这种适用于简单的文...
【前端】前端监控体系-程序员宅基地
>对于一个应用来说，除了前期的开发和设计，在项目上线后端维护很重要，其中就包括监控体系的搭建。>系统需要具备发布灰度过程中的监控以及用户问题的反馈和定位等能力。>这些问题可以从2个点解决：数据采集 和 数据上报与监控_前端监控
自定义UI 简易图文混排_图文混排效果图_Notzuonotdied的博客-程序员宅基地
系列文章目录自定义UI 基础知识自定义UI 绘制饼图自定义UI 圆形头像自定义UI 自制表盘文章目录系列文章目录前言创建绘制对象加载图片自定义绘制内容绘制图片绘制文字文本宽高获取测量文字宽度文本绘制的位置实现代码附录源码前言这系列的文章主要是基于扔物线的HenCoderPlus课程的源码来分析学习。扔物线课程源码：ImageTextView.javaAndroid官方文档：自定义绘制这一篇文章主要介绍的是文字的测量，更多的内容可以参考：HenCoder Android 开发_图文混排效果图
TensorFlow2.0教程-AutoGraph-程序员宅基地
TensorFlow2.0教程-AutoGraphtf.function的一个很酷的新功能是AutoGraph，它允许使用自然的Python语法编写图形代码。from __future__ import absolute_import, division, print_functionimport numpy as npimport tensorflow as tffrom tensor...
adb命令在测试中的使用_adb测试命令有什么用-程序员宅基地
输入命令 ./aa.sh如果 没有成功报出问题：:Permission denied。就是没有权限。解决办法：修改该文件aa.sh 的权限 ：使用命令：chmod 777aa.sh。然后再执行 最上面的操作 就 OK ...._adb测试命令有什么用