Less css 技术快速教程

2024-01-24 12:17:07

Less ---Css预处理器

介绍

lesscss是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，

增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展

LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/

bootstrap中less教程：http://www.bootcss.com/p/lesscss/

为什么要学习

因为HTML具有大量标签层次结构，CSS样式在阅读的时候不便于查看，Less对CSS进行了增强和拓展，增加变量，类似于函数的聚合

<div class="A">
    <div class="B">
        <div class="C">
            
        </div>
    </div>
</div>

//LESS  和HTML一样层次分明，可以提前动态预编译成CSS
.A{
    //样式A
	.B{
        //样式B
		.C{
			//此处写样式C
		}
	}
}

//原CSS  层次不分明
.A{
	//样式A
}
.B{
	//样式B
}
.C{
	//样式C
}

Less编译工具

1. koala

官网 www.koala-app.com

国人开发的LESSCSS/SASS编译工具，多语言，实时编译，免费且跨平台，界面相对好看

2. Node.js库

LESSCSS官方有一款基于Node.js的库，用于编译.less文件。

2.1 使用时，首先全局安装less（部分系统下可能需要在前面加上sudo切换为超级管理员权限）：

npm install -g less

# 查看帮助（运行该命令不带任何参数）
lessc

2.2 编译

lessc styles.less

2.3 编译到css

lessc styles.less styles.css

2.4 编译生产版本压缩形式的css，需要clean-css插件

lessc --clean-css styles.less styles.min.css

3. 浏览器端用法

首先，将rel属性设置为“stylesheet/less”的.less样式表链接起来：

<link rel="stylesheet/less" type="text/css" href="example.less" />

下一步，下载Less.min.js文件并将其包含在页面<head>元素的<script></script>标记中：

<script src="less.min.js" type="text/javascript"></script>

特别注意：

在脚本之前引用样式表
当链接多个.less样式表时，每个样式表都是独立编译的。因此，在样式表中定义的任何变量、mixin或名称空间在任何其他样式表中都是不可访问的。
由于浏览器加载外部资源的同源策略要求启用COR

需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。

还有一种情况容易导致样式无法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css（具体方法请搜索）。或者还有一种更简单的方法，即是直接将.less文件改名为.css文件即可。

less中的注释

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

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

less中的变量

使用@来申明一个变量：@pink：pink;

1.作为普通属性值只来使用：直接使用@pink

2.作为选择器和属性名：#@{selector的值}的形式

3.作为URL：@{url}

4.变量的延迟加载

变量是块级作用域

@var: 0;
.class{
    @var: 1;
    .brass{
        @var: 2;
        three: @var;  //最终结果3，变量是延迟加载的
        @var: 3;
    }
    one: @var;
}

less中的嵌套规则

1.基本嵌套规则

<div class="wrap">
    <div class="inner">
        
    </div>
</div>

2.&的使用

#wrap{
    .inner{
        &:hover{		//&设置当前选择器与父类平级
            background: pink;
        }
    }
}

//编译后
#wrap .inner :hover{
    background: pink;
}

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1.普通混合

.aggregation{			//普通混合  会编译到css样式中
    //高度重复的样式
}

.wrap{
    .inner{
        .aggregation //此次引用了另一个规则集
    }
}

2.不带输出的混合

.aggregation(){			//aggregation不会编译到css样式中
    //高度重复的样式
}

.wrap{
    .inner{
        .aggregation //此次引用了另一个规则集
    }
}

3.带参数的混合

.aggregation(@w,@h,@c){			//带参数的混合，不会编译到css，也不叫函数，不叫函数，不叫函数   min in
    //高度重复的样式
    position: absolute;
    background: @c;
    height: @h;
    width: @w
}

.wrap{
    .inner{
        .aggregation(100px,100px,pink) //此次引用了另一个规则集
    }
}

4.带参数并且有默认值的混合

.aggregation(@w:10px,@h:10px,@c:pink){	//带参数默认值的混合，不会编译到css   min in
    //高度重复的样式
    position: absolute;
    background: @c;
    height: @h;
    width: @w
}

.wrap{
    .inner1{
        .aggregation(100px,100px,pink) //带参数的调用
    }
    .inner2{
        .aggregation() //不带参数的调用
    }
}

5.带多个参数的混合

//混合方式同 3.带参数的混合

6.命名参数

.aggregation(@w:10px,@h:10px,@c:pink){	//带参数默认值的混合，不会编译到css   min in
    //高度重复的样式
    position: absolute;
    background: @c;
    height: @h;
    width: @w
}

.wrap{
    .inner1{
        .aggregation(@w:pink) //带命名参数的混合，形参和实参不一致时可以指定参数名
    }
    
}

7.匹配模式

需求：使用边构建一个三角形，并且可以自定义方向和颜色

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>构建三角形</title>
    <link rel="stylesheet" type="text/less" href="./example.less"/>		//引入待编译的less
</head>
<body>
    <div id="wrap">
        <div class="sjx"></div>
    </div>
</body>
<!--使用less编译，从http://lesscss.cn/#download-options下载less文件放入同一个目录中（注意文件名）-->
<script src="less.min.js" type="text/javascript"></script>  
</html>

注意：这里使用浏览器的方式是为了在复习的时候可以直接复制代码进行演示，在项目和实际应用中，不会使用到

业务代码：example.less

@import "./triangle.less"; //引入其他less使用@import
#wrap .sjx{
    .triangle(R,40px,red)
}

自定义库文件：triangle.less

.triangle(@_,@w,@c){  //  @_在匹配的时候，同名混合优先调用@_开头的，此时triangle混合用于封装下方混合中重复使用的样式
    width: 0px;
    height: 0px;
    overflow:hidden;    // 在IE6/IE7情况下开启haslayout解决兼容问题
}

.triangle(L,@w,@c){  // L/R/T/B是匹配符号
    border-width: @w;
    border-style: dashed solid dashed dashed;//dashed(虚线)是为了在渲染的时候触发透明，触发规则：无边框->虚线->实线
    border-color: transparent @c transparent transparent;  //transparent是CSS3属性，IE6不支持，可以画虚线解决
}
.triangle(R,@w,@c){	//同名混合，带有不同的匹配符号，业务代码只会调用相同匹配符号的混合进行编译
    border-width: @w;
    border-style: dashed  dashed dashed solid;
    border-color: transparent  transparent transparent @c;
}
.triangle(T,@w,@c){
    border-width: @w;
    border-style: dashed  dashed solid dashed;
    border-color: transparent transparent @c transparent;
}
.triangle(B,@w,@c){
    border-width: @w;
    border-style:solid dashed  dashed dashed;
    border-color:@c transparent  transparent transparent;
}

8.arguments变量

arguments：实参列表，是一个伪数组，

伪数组：具有less属性的对象

.border(@w，@style，@c){
	border: @arguments;	// 2.可以使用@arguments接受实参列表作为变量，@arguments属于一种简写方式，类似语法糖
    //border: @w @style @c;
}
#wrap .sjx{
    .border(1px,solid,black)  // 1.当实参和形参对应的时候
}

less运算

在less中可以进行加减乘除的运算

#wrap .sjx{
    width:(100 + 100px)   //在less计算过程中，只需要一方带单位即可
}

less继承

特点

性能比混合高

灵活度比混合低

继承示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>继承演示</title>
        <link rel="stylesheet" type="text/less" href="./extend.less"/>	
    </head>
    <body>
        <div id="wrap">
            <div class="inner">
                inner1
            </div>
            <div class="inner">
                inner2
            </div>
        </div>
    </body>
    <script src="less.min.js" type="text/javascript"></script> 
</html>

center-extend.less

.center{  //居中
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.center:hover{ //鼠标悬浮变红
    background: red !important; //!important提升优先级
}

extend.less

*{
    margin: 0;
    padding: 0;
}

@import "./center-extend.less";
#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        &:extend(.center all);  //继承center中的所有，包括center:hover，作用是让两个inner都会居中鼠标悬浮变红
        &:nth-child(1){
            width: 100px;
            height: 100px;
            background: pink;
        }       
        &:nth-child(2){
            width: 50px;
            height: 50px;
            background: yellow;
        }
    }
}

编译结果：

* {
  margin: 0;
  padding: 0;
}
.center,
.wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.center:hover,
.wrap .inner:hover {		//:hover和:nth-child(1)同级，随后被nth-child覆盖，这里less加!important提升优先级
  background: red !important;
}
.wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
.wrap .inner:nth-child(1) {  //此处与:hover同级，会覆盖:hover的background,所以:hover使用!important提升优先级
  width: 100px;
  height: 100px;
  background: pink;
}
.wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background: yellow;
}

less避免编译

*{
	margin: 100 * 100px;
    padding ~"cacl(100px + 100)"	//添加~" " 让less在编译css过程中当成字符串处理，避免直接编译计算，让浏览器去执行
}

重点记忆

变量
- @ 变量名 定义
- 变量延迟加载
- 变量块级作用域
嵌套
- & ：让子对象于父对象平级
混合
- 什么是混合
  - 将一系列的规则集引入到另一个规则集中
  - 混合的定义在less规则有明确的指定，使用 . 的形式来调用
- 普通混合（会被编译到原生css中）
- 不带输出的混合（加双括号）
- 带参数的混合
- 带默认值的混合
- 匹配模式，就是在多个混合中使用不同的匹配符号进行标识，在调用过程中传入不同的匹配符号进行不同的编译
- arguments
计算
- 加减乘除
- 计算的一方带单位即可

码农公寓