Less功能特性
2024-09-30 13:22:13
（1）变量
我们常常在 CSS 中 看到同一个值重复多次，这样难易于代码维护
const bgColor="skyblue";
$(".post-content").css("background-color",bgColor);
$("#wrap").css("background-color",bgColor);
$(".arctive").css("background-color",bgColor);
只要我们修改 bgColor这一个变量， 整个页面的背景颜色都会随之改变。而 Less 中的变量十分强大，可化万物，值得一提的是，其变量是常量 ，所以只能定义一次，不能重复使用。
①值变量
/* Less */
@color: #;
@bgColor: skyblue;//不要添加引号
@width: %;
#wrap {
color: @color;
width: @width;
} /* 生成后的 CSS */
#wrap {
color: #;
width: %;
}
以 @ 开头 定义变量，并且使用时 直接 键入 @名称。在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。
@lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: rgb(, , );
@primaryTextColor: #;
@secondaryTextColor: #;
@dividerColor: #b6b6b6;
@borderColor: #dadada;
②选择器变量
让 选择器 变成 动态
/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
color: #;
width: %;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#;
} /* 生成的 CSS */
#wrap{
color: #;
width: %;
}
.wrap{
color:#ccc;
}
#wrap{
color:#;
}
③属性变量
减少代码书写量
/* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
} /* 生成的 CSS */
#wrap{
border-style:solid;
}
④url变量、字符串插值
项目结构改变时，修改其变量即可。
/* Less */
@images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
} /* 生成的 CSS */
body {
background: url("../img/dog.png");
}
⑤声明变量
有点类似于混合方法
结构: @name: { 属性: 值 ;};
使用：@name();
/* Less */
@background: {background:red;};
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
} /* 生成的 CSS */
#main{
background:red;
}
#con{
width: 200px;
height: 200px;
border: solid 1px red;
}
⑥变量运算
加减法时 以第一个数据的单位为基准
乘除法时 注意单位一定要统一
<p class="opration">变量运算</p> @opration:opration;
@oprationWidth:200px;
@oprationHeight:200px;
@oprationColor:#;
.opration{
background: @oprationColor*;//#444444
width: ((@oprationWidth)-)*;//
height:(@oprationHeight)+;//
}
⑦变量作用域
注意：就近原则
@scrop:scrop;
@h1:@h2;
@h2:%;
#@{scrop}{
background:yellowgreen;
width: @h1;
@h2:%;
}
⑧用变量定义变量
/* Less */
@variable:#variable;
@speak:"name";
@name:"content展示：你好我叫熊熊";
@{variable}{
color: red;
}
@{variable}::after{
content: @@speak;
color: green;
} /* 生成的CSS */
#variable::after {
content: "content展示：你好我叫熊熊";
color: green;
}
（2）嵌套Nesting
①Less使您能够使用嵌套代替或与级联结合使用。 假设我们有以下CSS：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
在Less中，我们也可以这样写：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
生成的代码更简洁，并模仿HTML的结构。
②&的妙用
demo1：
还可以使用此方法将伪选择器与mixins捆绑在一起。 这是经典的clearfix hack清除浮动，重写为mixin（＆表示当前的选择器父级）：
.clearfix {
display: block;
zoom: ;
&:after {
content: " ";
display: block;
font-size: ;
height: ;
clear: both;
visibility: hidden;
}
}
demo2：
/* Less */
#header{
&:after{
content:"Less is more!";
}
.title{
font-weight:bold;
}
&_content{//理解方式：直接把 & 替换成 #header
margin:20px;
}
}
/* 生成的 CSS */
#header::after{
content:"Less is more!";
}
#header .title{ //嵌套了
font-weight:bold;
}
#header_content{//没有嵌套！
margin:20px;
}
③媒体查询
在以往的工作中，我们使用 媒体查询，都要把一个元素 分开写
#wrap{
width:500px;
}
@media screen and (max-width:768px){
#wrap{
width:100px;
}
}
Less 提供了一个十分便捷的方式
/* Less */
#main{
//something... @media screen{
@media (max-width:768px){
width:100px;
}
}
@media tv {
width:2000px;
}
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
#main{
width:100px;
}
}
@media tv{
#main{
width:2000px;
}
}
唯一的缺点就是 每一个元素都会编译出自己 @media 声明，并不会合并。
④实战技巧
可以借助 Less 在元素中，去定义自己的私有样式
/* Less */
#main{
// something..
&.show{
display:block;
}
}
.show{
display:none;
}
/*CSS结果*/
#main.show{
display:block;
}
.show{
display:none; //会被覆盖。
}
（3）混合
①无参数方法
方法犹如 声明的集合，使用时 直接键入名称即可
/* Less */
.card { // 等价于 .card()
background: #f6f6f6;
-webkit-box-shadow: 1px 2px rgba(, , , .);
box-shadow: 1px 2px rgba(, , , .);
}
#wrap{
.card;//等价于.card();
}
/* 生成的 CSS */
#wrap{
background: #f6f6f6;
-webkit-box-shadow: 1px 2px rgba(, , , .);
box-shadow: 1px 2px rgba(, , , .);
}
其中 .card 与 .card() 是等价的。个人建议，为了避免 代码混淆，最好写成 :
.card(){
//something...
}
#wrap{
.card();
}
要点：
`.` 与 `#` 皆可作为 方法前缀。
方法后写不写 `()` 看个人习惯。
②默认参数方法
Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数。
@arguments 犹如 JS 中的 arguments 指代的是 全部参数。
传的参数中 必须带着单位。
/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#){
border:solid 1px @color;
box-shadow: @arguments;//指代的是 全部参数
}
#main{
.border(0px,5px,30px,red);//必须带着单位
}
#wrap{
.border(0px);
}
#content{
.border;//等价于 .border()
} /* 生成的 CSS */
#main{
border:solid 1px red;
box-shadow:0px,5px,30px,red;
}
#wrap{
border:solid 1px #;
box-shadow: 0px 50px 30px #;
}
#content{
border:solid 1px #;
box-shadow: 10px 50px 30px #;
}
（4）作用域Scope
Less中的Scope与CSS的范围非常相似。 变量和mixin首先在本地查找，如果找不到它们，它将继承自“父”范围。
<div id="page">
作用域
<p id="header">头部</p>
</div>
/* 作用域 */
@var: red;
#page{
@var: green;
#header {
color: @var; // green
}
}
如果本地没有则会继承父级，即变为red红色。
与CSS自定义属性一样，mixin和变量定义不必放在引用它们的行之前。 因此，以下Less代码与前一个示例相同：
/* 作用域 */
@var: red;
#page{
#header {
color: @var; // green
}
@var: green;
}
（5）注释comments
注释分为行注释和块注释，即单行注释和多行注释。
/* 一个块注释
* style comment! */
@var: red; // 这一行被注释掉了！
@var: white;
（6）运算（Operations）
算术运算+， - ，*，/可以对任何数字，颜色或变量进行操作。 如果可能，数学运算会考虑单位并在添加，减去或比较数字之前转换数字。
（7）命名空间
有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
你只需要在 #header a中像这样引入 .button:
#header a {
color: orange;
#bundle > .button;
}
.
命名空间
最新文章
- 连载《一个程序猿的生命周期》-《发展篇》 - 3.农民与软件工程师，农业与IT业
- 洛谷10月月赛Round.3
- ORA-00257: archiver error. Connect internal only, until freed——解决
- Nginx负载均衡深入浅出
- php根据日期获得星期
- muParser公式库使用简介( 转)
- deepin软件中心打不开
- Java：双括号初始化 /匿名内部类初始化法
- Codeforces Round #313 (Div. 2) C
- JavaScript·DOM,BOM
- go操作redis和mysql示例
- C# 本进程执行完毕后再执行下一线程
- FastList使用
- ASP.NET MVC 做的网站项目
- Java虚拟机 - 多态性实现机制
- Java反编译工具Jad详解
- [Javascript] Check both prop exists and value is valid
- 第三百六十三节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mget和bulk批量操作
- Oracle安装部署之dbca静默建库和删除库
- 【Java nio】java nio笔记