Less功能特性
(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;
}
.
命名空间
Less功能特性的更多相关文章
- nginx入门篇----功能特性
1.nginx功能特性 可以作为http服务器或者反向代理服务器 能够快速响应静态页面(html)的请求 支持FastCGI.SSL.Virtual Host.URL Rewrite.HTTP.Gzi ...
- FusionCharts参数的详细说明和功能特性(转)
功能特性animation 是否动画显示数据,默认为1(True)showNames 是否显示横向坐标轴(x轴)标签名称ro ...
- 网站服务管理系统wdcp简介及功能特性
WDCP是WDlinux Control Panel的简称,是一套用PHP开发的Linux服务器管理系统以及虚拟主机管理系统,,旨在易于使用Linux系统做为我们的网站服务器,以及平时对Linux服务 ...
- Android P新功能特性抢先看
2018年3月8日,Google推出了Android P Preview版本,并提供官方镜像下载. 为了让广大开发者能够及时了解Android P的新功能特性,提前为您的app进行良好适配,WeTes ...
- Python:鲜为人知的功能特性(下)
GitHub 上有一个名为<What the f*ck Python!>的项目,这个有趣的项目意在收集 Python 中那些难以理解和反人类直觉的例子以及鲜为人知的功能特性,并尝试讨论这些 ...
- Python:鲜为人知的功能特性(上)
GitHub 上有一个名为<What the f*ck Python!>的项目,这个有趣的项目意在收集 Python 中那些难以理解和反人类直觉的例子以及鲜为人知的功能特性,并尝试讨论这些 ...
- ava 8中的新功能特性
正如我之前所写的,Java 8中的新功能特性改变了游戏规则.对Java开发者来说这是一个全新的世界,并且是时候去适应它了. 在这篇文章里,我们将会去了解传统循环的一些替代方案.在Java 8的新功能特 ...
- Git学习系列之Git的功能特性(从一般开发者的角度和主开发者的角度来剖析)
不多说,直接上干货! Git的功能特性,从一般开发者和主开发者的角度来进行剖析. Git的功能特性: 从一般开发者的角度来看,Git有以下功能: 1.从服务器上克隆完整的Git仓库(包括代码和版本信息 ...
- FusionCharts3.2.1 参数的详细说明和功能特性
功能特性animation 是否动画显示数据,默认为1(True)showNames 是否显示横向坐标轴(x轴)标签名称rotat ...
- 开源系统监控工具Nagios、Zabbix和Open-Falcon的功能特性汇总及优缺点比较
Nagios Nagios 全名为(Nagios Ain’t Goona Insist on Saintood),最初项目名字是 NetSaint.它是一款免费的开源 IT 基础设施监控系统,其功能强 ...
随机推荐
- 博弈论中的SG函数
SG函数的定义: g(x) = mex ( sg(y) |y是x的后继结点 ) 其中mex(x)(x是一个自然是集合)函数是x关于自然数集合的补集中的最小值,比如x={0,1,2,4,6} 则mex( ...
- 【AHOI 2005】 约数研究
[题目链接] 点击打开链接 [算法] 要求M,显然可以通过约数个数定理从1..N暴力计算答案,然而n最大10^6,这个算法的时间复杂度是 O(N * sqrt(N))的,不能通过此题 因此我们换一种思 ...
- CF 757 E Bash Plays with Functions —— 积性函数与质因数分解
题目:http://codeforces.com/contest/757/problem/E 首先,f0(n)=2m,其中 m 是 n 的质因数的种类数: 而且 因为这个函数和1卷积,所以是一个积性函 ...
- Ubuntu 16.04安装Wireshark进行抓包
技巧: 1.可以通过tcpdump抓取某个网卡的包,然后输出日志文件,通过Wireshark进行分析. 2.可以设置Wifi热点,然后通过手机连接这个热点,然后进行tcpdump的分析,然后输出日志文 ...
- bzoj 2111: [ZJOI2010]Perm 排列计数【树形dp+lucas】
是我想复杂了 首先发现大于关系构成了一棵二叉树的结构,于是树形dp 设f[i]为i点的方案数,si[i]为i点的子树大小,递推式是\( f[i]=f[i*2]*f[i*2+1]*C_{si[i]-1} ...
- Phpstorm安装和优化
Phpstorm是php开发一个强大的IDE,但是它不是免费的需要注册码,而且界面是英文界面,对英文不太好的人有点不友好.所以这篇文章主要从phpstorm的破解和汉化来优化phpstorm. 1.首 ...
- Go语言多态
总结一下Go语言中多态 package main import "fmt" //申明一个函数类型 type FuncMs func(int ,int) int //加法 func ...
- Python测试工具——nose
1.nose 特点: a) 自动发现测试用例(包含[Tt]est文件以及文件包中包含test的函数) b) 以test开头的文件 c) 以test开头的 ...
- 【洛谷3822】[NOI2017] 整数(线段树压位)
题目: 洛谷 3822 分析: 直接按题意模拟,完了. 将每次加 / 减拆成不超过 \(32\) 个对单独一位的加 / 减. 考虑给一个二进制位(下称「当前位」)加 \(1\) 时,如果这一位本来就是 ...
- k-substrings Codeforces - 961F
不会做.. 官方题解: 1.枚举某个前缀(指题目要求的相同前后缀中的前缀)的中心位置i,那么对应后缀的中心位置已经确定了(n-i+1),可以二分答案求出对于每个中心位置i最大的符合要求的相同前后缀(设 ...