less与sass(scss)的区别

野性酷女 2023-09-28 12:53 30阅读 0赞

原文网址：[less与sass(scss)的区别\_IT利刃出鞘的博客-CSDN博客][less_sass_scss_IT_-CSDN]

## 简介 ##

本文介绍less与sass(scss)的区别。

## 编译环境 ##

less环境较sass简单

**less：通过客户端处理的（基于JavaScrip）。**

法1：引入less.js来处理代码输出css到浏览器。

法2：开发环节使用less，编译成css文件放在项目中。一般用 nmp或yarn将less和less-loader添加到项目里。

**sass：通过服务端处理。相比less解析速度会快一点**

需要安装Ruby环境。

## 上手难度 ##

less：容易上手

sass：上手难度略高

## 语法 ##

less：变量符是@

sass：变量符是$

**变量的作用域也不一样**

less：\{\}内定义的变量为局部变量。

Sass3.4.0之前：没有局部变量，满足就近原则。（3.4.0之后已修复）

## 功能 ##

### 条件语句 ###

**less**

不支持条件语句

**scss**

支持if\{\}else\{\}、for\{\}循环语句

/** if else */
    @if lightness($color) > 30% {
    	/**	do....*/
    } @else {
    	/**	do....*/
    }
    
    
    /**	循环*/
    @for $i from 1 to 10 {
      	.border-#{$i} {
        	border: #{$i}px solid red;
      	}
    }

### 输出设置 ###

**less**

没有输出设置

**sass**

提供4中输出选项：nested, compact, compressed 和 expanded

1.  nested：嵌套缩进的css代码
2.  expanded：展开的多行css代码
3.  compact：简洁格式的css代码
4.  compressed：压缩后的css代码

### 引入外部css ###

**less**

引用外部文件和css中的@import没什么差异。

**scss**

scss引用的外部文件命名必须以\_开头，文件名如果以下划线\_开头的话，sass会认为该文件是一个引用文件，不会将其编译为css文件。

如下例所示：其中\_test1.scss、\_test2.scss、\_test3.scss文件分别设置的h1 h2 h3。

// 源代码：
    @import "_test1.scss";
    @import "_test2.scss";
    @import "_test3.scss";
    
    // 编译后：
    h1 {
      font-size: 17px;
    }
     
    h2 {
      font-size: 17px;
    }
     
    h3 {
      font-size: 17px;
    }

[less_sass_scss_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125544714

发表评论取消回复

表情：

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

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

相关阅读

相关 less与sass(scss)的区别

原文网址：[less与sass(scss)的区别\_IT利刃出鞘的博客-CSDN博客][less_sass_scss_IT_-CSDN] 简介本文介绍less与sas

野性酷女/ 2023年09月28日 12:53/ 0 赞/ 31 阅读

相关 less，sass，scss的关系与区别

原文网址：[less，sass，scss的关系与区别\_IT利刃出鞘的博客-CSDN博客][less_sass_scss_IT_-CSDN] 简介本文介绍less，s

墨蓝/ 2023年09月28日 12:51/ 0 赞/ 103 阅读

相关 SCSS的具体详解和与less的区别

一、SCSS的四种输出格式与SCSS与Sass的区别可以参考[这位老哥的][Link 1] 简单来说 SCSS更简单一点，没有什么奇怪的语法与奇怪的缩进，与le

た入场券/ 2023年07月24日 05:47/ 0 赞/ 115 阅读

相关 less与less之间的模块引用、模块化

demo.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset

川长思鸟来/ 2023年06月30日 09:25/ 0 赞/ 108 阅读

相关 less与sass的区别和了解

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

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

相关 sass与less的区别

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

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

相关 less笔记-Less安装与基础使用

一、安装Less npm为Node.js的包管理器，通过npm可简易的安装Less。 Node.js下载地址：https://nodejs.org/en/ 下载的Node

布满荆棘的人生/ 2022年09月25日 13:21/ 0 赞/ 395 阅读

相关 vim和less的小区别

1.对于大文件的处理，要用less，vim会读取文件所有，很可能导致系统死掉 2.对于自动换行来说，vi的复制能保持原样，但是less复制一个换行的段落，粘贴之后文字就由一

妖狐艹你老母/ 2022年09月19日 14:24/ 0 赞/ 551 阅读

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

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

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

相关详说css与预处理器（以及less、sass、stylus的区别）

CSS(Cascading Style Sheet)被译为级联样式表，做为一名前端从业人员来说，这个专业名词并不陌生，在行业中通常称之为“风格样式表（Style Sheet）”

亦凉/ 2021年08月30日 12:16/ 0 赞/ 531 阅读