前端基础入门之css less
文章目录
- less 简介
- 1、安装插件
- 2、编写 less
- 3、less 语法
- less 注释
- 父子关系嵌套
- 变量
- 其他
- 4、混合函数
- 其他
- 5、补充
less 简介
less
是一门css
的预处理语言
less
是一个 css 的增强版,通过less
可以编写更少的代码实现更强大的样式- 在
less
中添加了许多的新特性:像对变量的支持、对mixin
的支持… less
的语法大体上和css
语法一致,但是less
中增添了许多对css
的扩展,所以浏览器无法直接执行less
代码,要执行必须向将less
转换为css
,然后再由浏览器执行
1、安装插件
在vscode
中搜索less
,点击安装
2、编写 less
html 代码
使用快捷方式创建html
代码
回车
生成html
代码
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
less 代码
创建style.less
文件,编写less
代码
body {--height: calc(200px / 2);--width: 100px;div {height: var(--height);width: var(--width);}.box1 {background-color: #bfa;}.box2 {background-color: red;}.box3 {background-color: yellow;}
}
Easy LESS
插件会帮助我们在style.less
所在目录下面生成一个相同名称的css
文件
查看生成的style.css
代码
body {--height: calc(200px / 2);--width: 100px;
}
body div {height: var(--height);width: var(--width);
}
body .box1 {background-color: #bfa;
}
body .box2 {background-color: red;
}
body .box3 {background-color: yellow;
}
我们直接在 HTML 中引入生成的style.css
<link rel="stylesheet" href="/css/style.css" />
运行代码,查看效果
3、less 语法
less 注释
less
中的单行注释,注释中的内容不会被解析到css
中
css
中的注释,内容会被解析到css
文件中
// `less`中的单行注释,注释中的内容不会被解析到`css`中/*
`css`中的注释,内容会被解析到`css`文件中
*/
父子关系嵌套
在less
中,父子关系可以直接嵌套
// `less`中的单行注释,注释中的内容不会被解析到`css`中/*
`css`中的注释,内容会被解析到`css`文件中
*/
body {--height: calc(200px / 2);--width: 100px;div {height: var(--height);width: var(--width);}.box1 {background-color: #bfa;.box2 {background-color: red;.box3 {background-color: yellow;}> .box4 {background-color: green;}}}
}
对应的css
/*
`css`中的注释,内容会被解析到`css`文件中
*/
body {--height: calc(200px / 2);--width: 100px;
}
body div {height: var(--height);width: var(--width);
}
body .box1 {background-color: #bfa;
}
body .box1 .box2 {background-color: red;
}
body .box1 .box2 .box3 {background-color: yellow;
}
body .box1 .box2 > .box4 {background-color: green;
}
变量
变量,在变量中可以存储一个任意的值
并且我们可以在需要时,任意的修改变量中的值
变量的语法:@变量名
- 直接使用使用变量时,则以
@变量名
的形式使用即可 - 作为类名、属性名或者一部分值使用时,必须以
@{变量名}
的形式使用 - 可以在变量声明前就使用变量(可以但不建议)
@b1:box1;
@b2:box2;
@b3:box3;
@size:200px;
@bc:background-color;
@bi:background-image;
@color:red;
@path:image/a/b/c;.@{b1}{width: @size;height: $width;@{bc}: @color;@{bi}: url("@{path}/1.png");
}.@{b2}{width: @size;height: $width;@{bc}: @color;@{bi}: url("@{path}/2.png");
}.@{b3}{width: @size;height: $width;@{bc}: @color;@{bi}: url("@{path}/3.png");
}
生成的css
代码
.box1 {width: 200px;height: 200px;background-color: red;background-image: url("image / a / b / c/1.png");
}
.box2 {width: 200px;height: 200px;background-color: red;background-image: url("image / a / b / c/2.png");
}
.box3 {width: 200px;height: 200px;background-color: red;background-image: url("image / a / b / c/3.png");
}
注意:在url
中使用less
语法需要用引号包裹
其他
.p1 {width: @size;height: $width;&-wrapper {background-color: peru;}// &:hover{// background-color: blue;// }:hover {background-color: blue;}
}
.p2:extend(.p1) {color: @color;
}
.p3 {.p1();
}
.p4() {width: @size;height: $width;
}
.p5 {// .p4();.p4;
}
生成的css
代码
.p1,
.p2 {width: 200px;height: 200px;
}
.p1-wrapper {background-color: peru;
}
.p1 :hover {background-color: blue;
}
.p2 {color: red;
}
.p3 {width: 200px;height: 200px;
}
.p5 {width: 200px;height: 200px;
}
&
拼接- 伪元素
:extend()
对当前选择器扩展指定选择器的样式(选择器分组).p1()
直接对指定的样式进行引用,这里就相当于将p1
的样式在这里进行了复制(mixin
混合)- 使用类选择器时可以在选择器后边添加一个括号,这时我们实际上就创建了一个
mixins
混合函数
4、混合函数
在混合函数中可以直接设置变量,并且可以指定默认值
.test(@w:200px, @h:100px, @bc:red) {width: @w;height: @h;background-color: @bc;
}.p6 {// .test(200px, 100px, red); // 对应参数位传值// .test(@h:200px,@w:100px,@bc:red); // 写明对应属性,可变换顺序// .test();.test(300px);
}
生成的css
代码
.p6 {width: 300px;height: 100px;background-color: red;
}
其他
average
混合函数.h1 {color: average(red, yellow); }
生成的
css
代码.h1 {color: #ff8000; }
darken
混合函数body {background-color: darken(#bfa, 50%); }
生成的
css
代码body {background-color: #22aa00; }
5、补充
创建all.less
文件,将我们之前编写的less
文件通过@import
引入进来
可以通过import
来将其他的less
引入到当前的less
中
@import "style.less";
@import "syntax.less";
查看生成的all.css
代码,会发现其他的内容囊括了两个less
文件的内容
所以,我们可以利用@import
来对less
文件进行整合,然后引入生成的css
文件使用即可
这样,每次修改的时候直接对某个模块的less
文件进行修改,就会非常简单
如果我们观察过之前fontawesome
源码文件,会发现其中也有less
代码文件
不同的less
文件里都有其自己的职责
,如
_animated.less
中专门存放动画的混合函数_variables.less
中专门存放定义的变量- …
但是也有个问题,通过F12
调试时显示的也是css
中对应的行号
如果我们要改,需要找一下,太麻烦了,能不能直接显示less
中行号呢?这样我们直接定位到对应less
中直接进行修改,维护起来也会比较方便
我们需要在Easy LESS
插件中修改settings.json
文件,在其中添加如下配置
"less.compile": {"compress": true, // true => remove surplus whitespace"sourceMap": true, // true => generate source maps (.css.map files)"out": true // false => DON'T output .css files (overridable per-file, see below)
}
修改完毕后,会发现多生成出来一个all.css.map
文件,说明配置生效
再刷新下页面,通过F12
会发现变成了less
文件对应的行号
我们来逐一解释下配置的less.compile
项中每一个属性的含义
compress
生成的css
文件代码会被压缩(作用相当于我们之前安装的JS & CSS Minifier (Minify)
插件的效果)sourceMap
生成.css.map
文件,通过F12
可以查看了less
文件对应行号out
生成对应css
文件(当然是需要了)
前端基础入门之css less相关推荐
- 前端基础入门之css像素与视口和媒体查询
文章目录 像素与视口 像素 视口(viewport) 手机像素 完美视口 vw单位 vw 常见的设计图宽度 vw适配 rem 媒体查询 响应式布局 媒体查询 媒体查询语法 媒体类型 媒体特性 断点 像 ...
- 前端基础入门之css定位 position
定位的简介 需求分析 按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
- 前端基础入门之css字体相关
文章目录 字体 1. 字体相关的样式 2. font-family 3. 几种字体 手写体 艺术体 乱码字体 中文字体 4. @font-face 5. 图标字体(iconfont) 图标字体简介 f ...
- HTML完结《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.24
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(QQ_3336392096.jpg)] 一篇文章让你从HTML零基础入门前端开发 前言: 此文为玄子,复习ACCP-S1课程后,整 ...
- 日常更新《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.23
一篇文章让你从HTML零基础入门前端开发 前言: 此文为玄子,复习ACCP-S1课程后,整理的文章,文中对知识点的解释仅为个人理解,源码均可直接复制运行 配套PPT,站点源码,等学习资料请加文章封面联 ...
- 〖大前端 - 基础入门三大核心之CSS篇④〗- CSS选择器之元素关系选择器、序号选择器与属性选择器
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- 〖大前端 - 基础入门三大核心之CSS篇②〗- CSS选择器之标签选择器、id选择器、class选择器与原子类
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- 〖大前端 - 基础入门三大核心之CSS篇③〗- CSS选择器之复合选择器与伪类
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- 〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果
当前子专栏 基础入门三大核心篇 是免费开放阶段.推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加 ...
- 〖大前端 - 基础入门三大核心之CSS篇㉒〗- 过渡属性的基本使用
当前子专栏 基础入门三大核心篇 是免费开放阶段.推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加 ...
最新文章
- NEC:借助AI撬动未来物联网世界
- dll文件是什么语言编写的_Win7系统当中libeay32.dll文件丢失的解决方法是什么?...
- (原创分享,改进版)CSS样式表速成!
- 8.使用Xshell5密钥登录liunx
- Spring Security OAuth2源码解析(一)
- wxif 判断字符串相等_ES6:字符串、数组、对象的扩展
- node.js学习笔记之模拟路由
- Leetcode OJ: Maximun Subarray
- c语言那些细节之little-endian和big-endian
- WPF开发实例——仿QQ登录界面
- 金山反间谍清理专家能清除的部分恶意软件清单(截至2007年2月28日更新)
- 什么是博客,它与网站有何不同? (说明)
- latex 编译缺少STXingkai字体
- 计算机网络三层交换机配置,综述三层交换机配置实例 附详细命令解释
- 树莓派+L9110S电机模块
- IOL2020中国初选第一题题解
- 牛客-练习赛101-推理小丑
- 一套实用性最强的商业方案,让他白手起家做到全国十大财阀之一!
- 堡垒机如何传输文件_如何在linux下向堡垒机传文件
- 阅读理解调研及NLP其它任务转化为MRC参考