sass与less的区别

ゝ一纸荒年。 2023-02-21 12:51 22阅读 0赞

## 区别 ##

**1.语法不同**

sass有两种语法格式
     
    
     1. 以.scss为后缀名的嵌套写法
    nav { 
      $width: 100px;
      width: $width;
      color: $nav-color;
    }
    
    //-----------编译后
    nav { 
      width: 100px;
      color: #F90;
    }
     2. 最早的缩进语法
     nav 
        width:100px;
        height:100px;
     编译后也是一样的

less的语法格式嵌套写法
      #header { 
      color: black;
      .navigation { 
        font-size: 12px;
      }
      .logo { 
        width: 300px;
      }
    }

2.变量的声明不同

sass使用 $
    $highlight-color: #F90;

less使用 @
    @nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    
    #header { 
      color: @light-blue;
    }

**3.Mixin不同**

> sass的用法与JavaScript的函数是一样的，定义后直接使用 @include调用

@mixin silly-links { 
      a { 
        color: blue;
        background-color: red;
      }
    }
    @include silly-links;
    //编译后
    a { 
      color: blue;
      background-color: red; }

> less就是定义一个类，然后直接当函数使用(less不提供定义函数)

.b-coloe { 
        border: 4px solid red;
    }
    .box { 
        .b-coloe();
        width: 100px;
        height: 200px;
        background-color: blue;
    }
    //编译后
    .b-coloe { 
      border: 4px solid red;
    }
    .box { 
      border: 4px solid red;
      width: 100px;
      height: 200px;
      background-color: blue;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关 less与sass的区别和了解

一、Less、Sass/Scss是什么? 1、Less：是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。 Less 既可以在客户端上运

柔光的暖阳◎/ 2023年06月24日 04:57/ 0 赞/ 31 阅读

相关 sass与less的区别

区别 1.语法不同 sass有两种语法格式 1. 以.scss为后缀名的嵌套写法 nav { $width

ゝ一纸荒年。/ 2023年02月21日 12:51/ 0 赞/ 23 阅读

相关 sass和less的怎么转化为css,Sass和Less之间的区别是什么

Sass和Less之间的区别是：1、Less在JS上运行，Sass在Ruby上使用；2、两者编写变量的方式不同；3、在Less中仅允许循环数值，而在Sass中可以遍历任何类型的

逃离我推掉我的手/ 2022年09月03日 01:29/ 0 赞/ 222 阅读

相关 sass/scss、less

一、Sass/Scss、Less是什么? Sass(Syntactically Awesome Stylesheets)是一种动态语言，Sass语法属于缩排语法，比css多

红太狼/ 2022年07月14日 15:58/ 0 赞/ 257 阅读

相关 Sass/Less对比

Sass/Less Comparison In this document I am using Sass's SCSS syntax. You c

电玩女神/ 2022年06月13日 09:12/ 0 赞/ 237 阅读

相关浅谈sass与less区别优缺点

Sass是一种动态样式语言，Sass语法的缩排语法，比Css比多出很多功能，如变量，嵌套，运算，继承，颜色处理，函数等，易于阅读。Cass的安装需要安装Ruby环境，是服务器端

系统管理员/ 2022年06月10日 12:49/ 0 赞/ 226 阅读

相关 LESS SASS

LESS LESS：一门CSS预处理语言。优点：LESS对CSS语言做了扩充，让CSS更易维护，方便制作主题。 SASS SASS：世界上最成熟、稳定和强大

阳光穿透心脏的1/2处/ 2022年01月30日 05:09/ 0 赞/ 288 阅读

相关安装less/sass

安装sass npm i node-sass 安装wepy-compiler-sass插件 npm install wepy-compiler-sass

冷不防/ 2021年09月19日 10:34/ 0 赞/ 440 阅读

相关 Sass 、Scss、LESS 和 Stylus区别总结

转载自：[https://blog.csdn.net/pedrojuliet/article/details/72887490][https_blog.csdn.net_ped

短命女/ 2021年09月18日 01:14/ 0 赞/ 471 阅读

相关 less和sass

less与sass的区别在介绍less和sass的区别之前，我们先来了解一下他们的定义：一、Less、Sass/Scss是什么? > 1、

川长思鸟来/ 2021年08月29日 13:53/ 0 赞/ 476 阅读