less和sass的区别[简洁易懂]

news2025/7/17 8:35:25

一、基础知识
1.sass,less都是CSS的预处理器,其基本思想就是用编程的思路编写CSS代码。增加了变量,嵌套,函数,语句,继承等概念。有助于模块化开发,例如写一个换肤的效果,以前我们需要写多套css样式,现在引入了变量的概念,只需要写一套css,改变变量就可以了。
2.浏览器对sass和less是不识别的,在vscode中下载插件easy less/easy sass 将编写好的sass和less文件转化成css文件,在项目开发中会用npm下载其他的插件。

Sass/Scss、Less是什么?
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。
Sass与Scss是什么关系?
Sass的缩排语法【缩排语法既是使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性】,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数.  Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行 (借助 Node.js)。

1.编译环境不同
sass同通过ruby 是在服务器端处理
Sass的安装需要Ruby环境,是在服务端处理的。
less是通过js编译 是在客户端处理
Less是需要引入less.js来处理Less代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放到项目中,也有 Less.app、SimpleLess、CodeKit.app这样的工具,也有在线编译地址

2.变量符不一样
less是用@,sass是用$

3.sass支持条件语句,可以使用if{}else{},for{}循环等等。而less不支持。
4、输出设置不同
Sass提供4中输出选项:nested, compact, compressed 和 expanded。
输出样式的风格可以有四种选择,默认为nested
nested:嵌套缩进的css代码
expanded:展开的多行css代码
compact:简洁格式的css代码
compressed:压缩后的css代码
而Less没有输出设置
5.Sass和Less的工具库不同
Sass有工具库Compass, 简单说,Sass和Compass的关系类似于像Javascript和jQuery的关系,Compass在Sass的基础上,封装了一系列有用的模块和模板,补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库,Bootstrap的样式文件部分源码就是采用Less语法编写。
6.Sass和Less的工具库不同
Sass有工具库 Compass
Less有UI组件库Bootstrap
7、引用外部 CSS 文件
Scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话,Sass会认为该文件是一个引用文件,不会将其编译为css文件.

// 源代码:
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后:
h1 {
  font-size: 17px;
} 
h2 {
  font-size: 17px;
}
h3 {
  font-size: 17px;
}
Less引用外部文件和css中的@import没什么差异。


混入:SCSS运用@mixin——@include;LESS运用.show{}——.show();
命名空间:只针对LESS文件起作用,首先用#命名再调用;
继承:SCSS运用@extend,LESS运用&:extend( )。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405463.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端200道面试题及答案(更新中)

目录 html相关 1)说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别? 2)link和import的区别 3)浏览器如何实现不同标签页的通信? 4)iframe的优缺点 5)canvas 6&#x…

Sublime Text 4 (Build 4143) 注册方法STEP BY STEP

To 初学Python的Pythonista: Sublime Text相对于PyCharm和Visual Studio Code,确实有不足之处,但提供了众多功能丰富的插件,且最大优点就是相对于Pycharm和VSCODE,它体积小,启动速度快。对于Python的初学者来说&#…

JavaScript基础总结---重点

目录JavaScript简介什么是JavaScript浏览器执行JS过程JS的组成JS的引入方式函数与作用域arguments的使用全局变量与局部变量预解析对象创建对象的三种方式1.利用字面量创建对象2.利用 new Object 创建对象3.利用构造函数创建对象遍历对象属性变量、属性、函数、方法总结new关键…

节点流和处理流详解

CSDN话题挑战赛第2期 参赛话题:学习笔记 1. 基本介绍 节点流可以从一个特定的数据源读写数据,如FileReader,FileWriter处理流(也叫包装流)是“连接”在已存在的流(节点流或处理流)之上&#x…

web服务器项目常见面试题目(C++)

项目介绍 1、为什么要做这样一个项目? 在学习CPP语言的时候,发现需要做一个项目来巩固一下,网上有推荐这个项目,然后就自己尝试做了一下。这个项目综合性比较强,从中既能学习Linux环境下的一些系统调用,也…

Vue3创建项目(一)新手教程

✅作者简介: 我是痴心阿文,你们的学友哥。 整理一下Vue3创建项目,新手教程,看完需要预计花费10分钟。 1.环境准备 Vue依赖NodeJs的环境,需要先安装Nodejs。 2.NodeJs安装 打开NodeJs下载页选择自己系统对应的版本下载。…

【JAVA】书店管理系统(附带前后端源码及资源)

【JAVA_Web】书店管理系统(附带前后端源码及资源) 一、项目的目的和意义 1.1目的 在“互联网”的大趋势下,线上销售以其简单、便捷、高效的特点受到人们的青睐。网上书店不受时间或者空间的限制,只要在网络覆盖的地方人们就可以…

vue3 动态加载组件、动态引入组件

1.问题 在做一个用vite构建的vue3项目时,动态拉取导入.vue页面,然后控制台一直有以下提示,页面也无法渲染出来。 2.分析 根据上面的报错提示,让我们安装并使用:rollup/plugin-dynamic-import-vars 这个插件&#xff0…

JS遍历对象的七种方法

我根据阮老师的《ES6标准入门》学习并总结了七种遍历对象的方法,我会将分别介绍这七种方法并进行详细的区分,并将从属性可枚举性问题与遍历方法两个大方面讲述全文,其中可枚举性是掌握遍历对象之前的的铺垫,请读者耐心学习&#x…

【解决vscode终端输出中文乱码问题图文教程】

全网最全解决vscode运行C/C终端输出乱码问题图文教程解决vscode终端输出中文乱码问题,强推**方法二**,少走几年弯路乱码原因方法一(永久性)方法二(永久性)强力推荐!!!&am…

Vue3中样式渗透:deep()为什么无效

今天学习 /deep/ 样式穿透,因为vue3中已经使用:deep()取代了/deep/ ,所以直接用:deep()练习。 :deep()的使用场景: 如果给当前组件的style 节点添加了scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组…

DVWA(全级别通关教程详解)

文章目录Brute ForceLowMediumCommand InjectionLowMediumHighCSRFLowMediumHighFile InclusionLowMediumHighFile UploadLowMediumHighSQL Injection (手工)LowMediumHighSQL Injection(工具)LowMediumHighSQL Injection (Blind)Low布尔盲注时间盲注XSS…

若依RuoYi框架log图标与文字怎么改?

文章目录1.若依修改主界面图标2.若依修改主界面文字3.若依修改页面上方图标4.若依修改页面上方文字5.若依登录页面文字修改6.免费图片转换网站1.若依修改主界面图标 图片路径: /src/assets/logo/logo.png直接将想要替换的png格式图片将其替换即可,图片大小建议为60*…

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初…

vue中input标签上传本地文件或图片后获取完整路径,如E:\medicineOfCH\stageImage\xxx.jpg

前言&#xff1a; 好久没有写vue了。今天遇到一个需求&#xff1a;使用input框来上传图片类型&#xff0c;并且在选择之后立刻回显出来。使用< input type“file”/>在选定图片后再< img src“xxx”/>。今天在实现这个需求的时候主要是出现了三个问题&#xff1a;…

分享 6 个 Vue3 开发必备的 VSCode 插件

今天分享 6 个 Vue3 开发必备的 VSCode 插件&#xff0c;可以直接用过 VSCode 的插件中心直接安装使用。 如果有觉得有帮助&#xff0c;还请点赞&#x1f44d;支持一下~ 1. Volar &#x1f525; 下载数 153 万 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生&…

40个web前端实战项目,练完即可就业,从入门到进阶,基础到框架,html_css【附视频+源码】

当下前端开发可以说是一个比较火的职业&#xff0c;所以学习的人比较多&#xff0c;不管是培训还是自学都是希望通过前端可以找到一份好的工作&#xff0c;但是很多自学的朋友在自学过程中有些盲目&#xff0c;不仅大大降低了学习的效率&#xff0c;而且也会打击自己的学习热情…

使用nvm安装node

常用命令 NVM的常用命令如下&#xff1a;nvm list available&#xff1a;查看可在线安装的NodeJS版本nvm ls&#xff1a;列出所有已经在NVM中安装的NodeJS版本。nvm current&#xff1a;显示当前正在使用的Node版本。nvm install xx.xx.xx&#xff1a;在NVM中在线安装指定版本的…

nvm安装步骤及使用方法

一、nvm说明 nvm 主要是用来管理 nodejs 和 npm 版本的工具&#xff0c;可以用来切换不同版本的 nodejs。 二、nvm下载 https://github.com/coreybutler/nvm-windows/releases 三、nvm安装 1.解压缩后点击exe文件进行安装 2、点击next&#xff0c;选择nvm安装路径&#xf…

Vue:vue3中封装Axios请求

解决、 提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、创建文件夹存放封装好的js二、封装代码三、配置四、在需要的组件中使用总结前言 这篇文章直接能够在项目中使用&#xff0c;没有解释什么东西&#…