less与sass的区别和了解

柔光的暖阳◎ 2023-06-24 04:57 30阅读 0赞

## 一、Less、Sass/Scss是什么? ##

1、Less：

是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。

Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

2、Sass：

是一种动态样式语言，Sass语法属于缩排语法，

比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass与Scss是什么关系?

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用\{\}取代了原来的缩进。

## 二、less和sass的相同之处 ##

Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；  
2、参数混入——可以传递参数的class，就像函数一样；  
3、嵌套规则——Class中嵌套class，从而减少重复的代码；  
4、运算——CSS中用上数学；  
5、颜色功能——可以编辑颜色；  
6、名字空间(namespace)——分组样式，从而可以被调用；  
7、作用域——局部修改样式；  
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

## 三、less和sass的区别 ##

Less和Sass的主要不同就是他们的实现方式。

Less是基于JavaScript，是在客户端处理的。  
Sass是基于Ruby的，是在服务器端处理的。

关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

1、Less：

【两种注释方式】  
①//less中的注释，但这种不会被编译

②

/\*

*  这也是less中的注释，但是会被编译  
    \*/

【less中的变量】  
1、声明变量:@变量名:变量值;  
使用变量: @变量名

> > > less中变量的类型：  
> > > ①数字类 1 10px  
> > > ②字符串：无引号字符串 red ;有引号字符串 “haha”  
> > > ③颜色类：red \#000000 rgb()  
> > > ④值列表类型：用逗号和空格分隔 10px solid red  
> > > eg:

1 @length: 100px;
     2 @color:red;
     3 @opa:0.5;
     4 @border:10px solid red;
     5 .borderRadius(@brWidth:10px){ 
     6 border-radius: @brWidth;
     7 }
     8 .setMargin(lefts,@width){ 
     9 margin-left:@width;
    10 }

> > > 变量使用原则：  
> > > 多次频繁出现的值、需要修改的值，设为变量

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事件  
eg:

1 section{ 
     2 p{ 
     3 color: red;
     4 background-color: yellowgreen;
     5 text-align: center;
    
    List item
    
     6 }
     7 ul{ 
     8 padding: 0px;
     9 list-style: none;
    10 li{ 
    11 float: left;
    12 margin: 10px;
    13 width: 100px;
    14 text-align: center;
    15 border: @border;
    16 &:hover{ 
    17 background-color: yellow;
    18 }
    19 }

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 KaTeX parse error: Expected '\}', got '\#' at position 13: j<10\{ .while\#̲\{ j\}\{  
border:\#\{$j\}px solid red;  
\}  
 j : j: j:j+1;  
\}

8、each循环遍历  
@each item in a,b,c,d\{  
//item表示每一项  
\}

9、函数：  
@function func($length)\{  
 l e n g t h 1 : length1: length1:length\*5;  
@return KaTeX parse error: Expected 'EOF', got '\}' at position 10: length1; \}̲ 调用：func(10px);…param1…)\{  
//使用…将传进来的所有参数，接收到一个变量中  
border-radius: p a r a m 1 ; − w e b k i t − b o r d e r − r a d i u s : param1; -webkit-border-radius: param1;−webkit−border−radius:param1;  
\}