less和sass的区别，你了解多少？

>>>变量使用原则：

多次频繁出现的值、需要修改的值，设为变量

(2)、混合(MiXins)

①无参混合

声明：.name{} 选择器中调用：.name;

②代参混合

无默认值声明：.name(@param){} 调用：.name(parValue);

有默认值声明：.name(@param:value){}

调用：.name(parValue); parValue可省

>>>如果声明时，参数没有默认值，则调用时必须赋值，否则报错！

>>>无参混合，会在css中编译除同名的class选择器，有参的不会

(3)、less的匹配模式：使用混合进行匹配，类似于if结构

声明：

.name(条件一，参数){}

.name(条件二，参数){}

.name(@_,参数){}

调用：.name(条件值，参数值);

匹配规则：根据调用时提供的条件值去寻找与之匹配的"MiXins"执行，其中@_表示永远需要执行的部分

(4)、less中的运算

+ - * / 可带、可不带单位

颜色运算时，红绿蓝分三组计算，组内可进位，组间互不干涉

(5)、包含了传进来的所有参数：border:@arguments;

(6)、less中的嵌套：保留HTML中的代码结构

①嵌套默认是后代选择器，如果需要子代选择器，则在子代前加>

②.&表示上一层 &:表示上一层的hover事件

section{

p{

color: red;

background-color: yellowgreen;

text-align: center;

}

ul{

padding: 0px;

list-style: none;

li{

float: left;

margin: 10px;

width: 100px;

text-align: center;

border: @border;

&:hover{

background-color: yellow;

}

}

2、Sass：

(1)、Sass中的变量

使用 $变量名：变量值，声明变量；

如果变量需要在字符串中嵌套，则需使用#加大括号包裹；

border-#{$left}:10px solid blue;

(2)、Sass中的运算，会将单位也进行运算，使用时需注意最终单位

例：10px_10px=100px_px

(3)、sass中的嵌套：选择器嵌套，属性嵌套，伪类嵌套

选择器嵌套

ul{ li{} } 后代

ul{ >li{} } 子代

&:表示上一层 div{ ul{ li{ &==“div ul li” } } }

属性嵌套：属性名与大括号之间必须有:

例如:border:{color:red;}

伪类嵌套：ul{li{ &:hover{ “ul li:hover” } } }

(4)、混合宏、继承、占位符

①混合宏：声明：@mixin name($param:value){}

调用：@include name(value);

>>>声明时，可以有参，可以无参；可带默认值，也可不带；但是，调用时，必须符合声明规范。同less

>>>优点；可以传参，不会生成同名class；

>>>缺点：会将混合宏中的代码，copy到对应的选择器中，产生冗余代码！

②继承：声明：.class{} 调用：@extend .class;

>>>优点：继承的相同代码，会提取到并集选择器中，减少冗余代码

>>>缺点：无法进行传参，会在css中，生成一个同名class

③占位符：声明：&class{} 调用：@extend %class;

>>>优点：继承相同代码，会提前到并集选择器；不会生成同名的class选择器

>>>缺点：无法进行传参

_综上所述：_当需要传递参数时，用混合宏；当有现成的class时用继承；当不需要参数，也不需要class时，用占位符

(5)、if条件结构：

@if 条件{}

@else{}

(6)、for循环结构：

@for $i from 1 to 10{} 不包含10;

@for $i from 1 through 10{} 包含10;

(7)、while循环结构：

$j:1;

@while $j<10{

.while#{$j}{

border:#{$j}px solid red;

}

$j:$j+1;

}

(8)、each循环遍历

@each item in a,b,c,d{

//item表示每一项

}

(9)、函数：

@function func($length){

$length1:$length*5;

@return $length1;

}

调用：func(10px);

(10)、使用…将传进来的所有参数，接收到一个变量中

@mixin bordeRadius($param1…){

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
…(img-FzLlbgKz-1715551573391)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！