通俗的来讲,Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,从而可以让Css更具维护性,主题性,扩展性。

本文为Less入门与语法梳理教程。其中包括了一些入门级例子,适合于对Less有入门级了解的开发者查阅。

LESS 源文件的引入方式与标准CSS文件的引入方式一样:


复制代码代码如下:<link rel="stylesheet/less" type="text/css" href="styles.less">

在我们需要引入 LESS 源文件的 HTML 中加入如下代码:


复制代码代码如下:<script src="/UploadFiles/2021-03-30/less.js">

导入文件:


复制代码代码如下:@import “variables.less”;
@import “variables.css”;
/*也可以将标准的 CSS 文件直接改成 .less 格式*/

变量与作用域


复制代码代码如下:/*用变量管理值*/
@width : 20px; //全局变量
#homeDiv {
#centerDiv{
width : @width; // 此处应该取最近定义的变量 width 的值 30px
}
@width : 30px; //局部变量,变量和混合是延迟加载的,不一定要在使用前声明
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}</p> <p>/*用变量管理选择器名称、URLs、属性*/
@mySelector: banner; // 定义一个变量用于选择器名称
@images: "../img"; // 变量可以是字符串
@property: color; // 定义一个变量用于属性名称
.@{mySelector} { //选择器名称使用变量的用法
background: url("@{images}/white-sand.png"); //URLs使用变量的用法
@{property}: #0ee;
…… //其它常规属性等
}</p> <p>/*编译生成的CSS文件*/
.banner {
background: url("../img/white-sand.png");
color: #0ee;
……
}

变量可以嵌套定义与使用


复制代码代码如下:@fnord: "I am fnord.";
@var: "fnord";
content: @@var;//嵌套使用
content: "I am fnord."; //编译后结果
/*当一个变量定义两次时,只会使用最后定义的变量,Less会从当前作用域中向上搜索。*/

数值,颜色和变量可运算


复制代码代码如下:@init: #111111;
@transition: @init*2;
@var: 1px + 5 // Less能够判断颜色和单位之间的区别
.switchColor {
color: @transition;
}
/*编译生成的CSS文件*/
.switchColor {
color: #222222;
}

混合(Mixins)与函数


复制代码代码如下:.roundedCorners(@radius:5px) { //定义参数并且给予默认值
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}</p> <p> // 在另外的样式选择器中使用
#header {
.roundedCorners; //使用类并且参数为默认值
}</p> <p> #footer {
.roundedCorners(10px); //自定义参数值
}</p> <p>.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}</p> <p>#menu a {
color: #111;
.bordered;
/*在另一个规则集内部使用上面类的属性,则直接访问属性所在类名(或Id名)即可*/
}

@arguments变量:当 Mixins 引用这个参数时,该参数表示所有的变量(多参数)。


复制代码代码如下:.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}

命名空间:


复制代码代码如下:#mynamespace {
.home {...}
.user {...}
}
//如果我们要复用 user 这个选择器的时候,我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user

嵌套规则:


复制代码代码如下:<!-- HTML片段-->
<div id="home">
<div id="top">top</div>
</div>


复制代码代码如下:/*使用嵌套规则的LESS 文件*/
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
}
/*编译生成的CSS文件*/
#home {
color: blue;
width: 600px;
height: 500px;
border: outset;
}
#home #top {
border: outset;
width: 90%;
}
a {
color: red;
text-decoration: none;
&:hover {
/*有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素,&表示当前选择器的父选择器*/
color: black;
text-decoration: underline;
}
}
/*编译生成的CSS文件*/
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}

Extend:

extend是一个Less伪类,为扩展选择器;扩展选择器必须在所有伪类的最后


复制代码代码如下:nav ul:extend(.inline)
background: blue;
}
.inline {
color: red;
}</p> <p>/*编译生成的CSS文件*/
nav ul { // 声明块保持原样
background: blue;
}</p> <p>.inline,nav ul {
color: red;
}</p> <p>pre:hover , .some-class {
&:extend(div pre);
}</p> <p>/*以上与给每个选择器添加一个extend完全相同*/
pre:hover:extend(div pre),
.some-class:extend(div pre) {}

从本质上讲extend会查找编译后的CSS,而不是原始的less


复制代码代码如下:.bucket {
tr & { // 目标选择器中的嵌套,&代表最近父元素
color: blue;
}
}
.some-class:extend(tr .bucket) {} // 识别嵌套规则
/*编译生成的CSS文件*/
tr .bucket , .some-class {
color: blue;
}

 extend必须是精确匹配(包括通配符*、伪类顺序、nth表达式,唯一例外的是属性选择器中的引号,less会知道它们是相同的,然后匹配它)


复制代码代码如下:.a.class,
.class.a,
.class > .a {
color: blue;
}
.test:extend(.class) {} // 不会匹配上面的任何选择器的值
*.class {
color: blue;
}
.noStar:extend(.class) {} //不会匹配*.class选择器
link:hover:visited {
color: blue;
}
.selector:extend(link:visited:hover) {} //不会匹配,伪类顺序不同
:nth-child(1n+3) {
color: blue;
}
.child:extend(n+3) {} //不会匹配,尽管逻辑上1n+3与n+3是相同的

标签:
CSS,Less框架,教程

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
千金楼资源网 Copyright www.htabc.com

评论“CSS Less框架基础教程”

暂无“CSS Less框架基础教程”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?