LESS知识概括

最新推荐文章于 2022-11-15 13:36:55 发布

GeorgeLin98

最新推荐文章于 2022-11-15 13:36:55 发布

阅读量303

点赞数

分类专栏：前端文章标签： less

本文链接：https://blog.csdn.net/weixin_41005188/article/details/112745096

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

LESS知识概括

LESS简介
LESS语法

LESS简介

less简介：

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。
less的中文官网
bootstrap中less教程

Less编译工具：

koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
koala 官网

LESS语法

less中的注释：

以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

less中的变量：

使用@来申明一个变量：

@pink：pink;

1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载
①延迟加载：变量是延迟加载的，在使用前不一定要预先说明。意思是指：在前面使用了这个变量，但没有定义，但可以在后面给他定义出来，不影响输出。

less变量的块级作用域：

作用域其实可以理解为可以被访问的区域。Less语言中变量的作用域和其他编程语言中的很类似，首先会先从本地范围查找，如果没有找到，编译器会从父范围查找，向上一层一层找，直到找到为止。

@color:red;  // 声明变量
.xkd{
  @color: blue; // 声明变量
  color: @color; 
  font-size: 28px;
  p{
    @color:green; // 声明变量
    color: @color;
  }
}

.other{
  font-size: 24px;
  p{
    color:@color;
  }
}

在这个 Less 文件中，我们在全局、父类选择器、子类选择器中都定义了一个不同值的变量 @c，在使用时，会从最近的位置开始查找，也就是采用就近原则。
编译成css代码：

.xkd {
  color: blue;
  font-size: 28px;
}
.xkd p {
  color: green;
}
.other {
  font-size: 24px;
}
.other p {
  color: red;
}

在这里插入图片描述

less中的嵌套规则：

基本嵌套规则
&平级的使用
less学习—less的嵌套规则
那么什么是嵌套呢，我们首先看一个例子：

<header class="page-header">
    <h1 class="title"></h1>
    <nav class="page-nav"></nav>
</header>
<style>
.page-header {
    background-color:#666666;
    color:#000;
}
.page-header .title{
   color:#0f0f0f;
}
.page-header .page-nav:hover{
    background-color:#ffffff;
}
</style>

我们在编写如上一个html时，我们需要对其进行css的样式设置，因此，一般都会按照上边进行设置，但是我们应该都能发现到h1和nav标签都是header标签的子标签，但作为一名合格的码农，偷懒是必修课（嘻嘻），因此，嵌套本人用的最爽的原因便是可以减少敲代码，但并不会影响到上边css的易读性。

.page-header {
	background-color:#666666;　　
	color:#000;
	.title {　　　　
		color:#0f0f0f;
		}
	.page-nav:hover{
		background-color:#ffffff;
		}
}

在page-nav类中，若我们定义了一个或者多个伪类并为其设置了样式，是不是要这么写呢：

.page-header {
　　background-color:#666666;
　　color:#000;　　
　　.title {
　　　　color:#0f0f0f;
　　}
　　.page-nav {　　　
　　font-size:14px;
　　}
　　.page-nav:hover{
　　　　background-color:#ffffff;
　　}
　　.page-nav:visited {　　　　
　　color:#0000ff;
　　}
}

还是说：可以用嵌套嘛，在里面套着就行了

.page-header {
　　background-color:#666666;
　　color:#000;　　
　　.title {
　　　　color:#0f0f0f;
　　}　　
　　.page-nav {
　　　　font-size:14px;
　　	   :hover{
　　			background-color:#ffffff; 
　　		}　　　　
　　	   :visited { 
　　			color:#0000ff; 
　　	    }
　　}
}

好了，公布结果，第一种没有错，能正常跑起来，但是不够偷懒，不得精髓啊，第二种，偷懒的不错，可惜并不能编译成功
因为less在编译的时候，会解析成.page-nav :hover(这里中间是有空格的，不要看漏了)，伪类hover变成nav的子级类了，实际上如果你认真看上边成功编译的例子，你都会发现到，他在嵌套编译后出现的都是以父级子级进行转换，所以对于伪类这种中间没有带空格的怎么办呢？这个就需要引入一个父选择器（&）没错就是这个符号，他代表的是父级的类。

.page-nav {
　　　　font-size:14px;
　　　　&:hover{ background-color:#ffffff; }
　　　　&:visited { color:#0000ff; }
　　}

是的，直接在伪类前边添加&就可以了，记得中间是没有空格的哦，这样子我们就能够正常的表示伪类了，都是归功于父选择器符号（&），他在上边的例子中就是代表着.page-nav这个父类的名称

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }
 
  &-custom {
    background-image: url("custom.png");
  }
}
//编译后
.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

上边这个例子是不是发现打开了新世界了，&就是表示父类名称，那么在里面使用其他字符串来，那么是不是可以表示多个类了

.grand {
  .parent {
    & > & {
      color: red;
    }
 
    & & {
      color: green;
    }
 
    && {
      color: blue;
    }
 
    &, &ish {
      color: cyan;
    }
  }
}
 
//编译后
.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

css选择器学过的小伙伴肯定清楚，有各种各样的并集选择器，交集选择器啊等等，那么他们跟&的配合就很简单明了了，因为看到这里，你肯定已经发现了，实际上&真就仅仅表示父类的名称，你只是把他用&表示而已，

less中的混合：

混合就是将一系列属性从一个规则集引入到另一个规则集的方式
普通混合：此时的代码会编译到css文件中

.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

不带输出的混合：不会编译到css文件中

.juzhong(){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

带参数的混合：此时可以添加相关的形参

.juzhong(@w,@h,@c){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}

带参数并且有默认值的混合：可以使用@参数：默认值

.juzhong(@w:100px,@h:100px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}

带多个参数的混合：同上
命名参数：使用时直接传入形参的值

#box2{
    .juzhong(@h:200px;@c:deeppink;);
}

匹配模式：类似使用集成的框架，把所有的可以调用的进行抽取成为一个文件，引入文件使用使用相关的方法。如引入jQuery再使用其中的方法。

①公共类.less

.triangle(@_){
    width: 0;
    height: 0;
    overflow: hidden;
}

.triangle(L,@w,@c){
    border-width: @w;
    border-style: dashed solid  dashed dashed ;
    border-color: transparent @c transparent transparent;
}
.triangle(R,@w,@c){
    border-width: @w;
    border-style: dashed  dashed dashed solid;
    border-color: transparent transparent  transparent @c;
}

②此时定义三个同名的方法
第一个：使用@_ 调用其他的同名就会默认调用此
③匹配模式.less

@import "匹配模式公共类.less";

#warp > .inner{
    .triangle(R,@w:10px,@c:black);
}

arguments变量：@arguments：代表多个变量

.border(@w:10px,@style:solid,@c:deeppink){
    border: @arguments;
}

#wrap{
    width: 200px;
    height: 200px;
    background: pink;
    .border();
}

less运算：

在less中可以进行加减乘除的运算
例如：@var: 1px + 5;LESS 会输出 6px.

less避免编译：

有时候我们需要输出一些不正确的css语法或者使用less不认识的专有语法。要输出这样的值我们可以在字符串前加上一个~

.test_03{
　　width: 300px;
　　height: ~'calc(300px - 30px)';
}

=>

.test_03 {
　　width: 300px;
　　height: calc(300px - 30px);
}

less继承：

性能比混合高
灵活度比混合低
语法：获得继承名：extend（继承部分名）{…}

.jicheng{
    width: auto;
    height: 50%;
    text-align: center;
    background: aqua;
}
.header:extend(.jicheng){
  /*header自身代码*/
  padding: 0 auto;
}

.jicheng,
.header {
  width: auto;
  height: 50%;
  text-align: center;
  background: aqua;
}
.header {
  /*header自身代码*/
  padding: 0 auto;
}

继承所有状态（如伪类选择器）。语法：获得继承名：extend（继承部分名 all）{…}

.jicheng{
    width: auto;
    height: 50%;
    text-align: center;
    background: aqua;
}
.jicheng:hover{
  background: red;
}

/*没有加all*/
.header:extend(.jicheng){}
/*加入all*/
.footer:extend(.jicheng all){};

.jicheng,
.header,
.footer {
  width: auto;
  height: 50%;
  text-align: center;
  background: aqua;
}
.jicheng:hover,
.footer:hover {
  background: red;
}
/*没有加all*/
/*加入all*/