十分钟看懂Css、less和Sa(SCSS)的区别

2021-01-15 20:09| 发布者: |

  (作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少

  SASS(英文全称:Syntactically Awesome Stylesheets)Sass诞生于2007年,使用Ruby编写,是一种对css的一种扩展提升,增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写,然后编译成css。比如说,sass中可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。

  LESS(2009年开源的一个项目,受Sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手。LESS保留了css的任何功能,同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码,可以在任何使用随时切换到css的语法进行书写。

  传统的css可以直接被html引用,但是sass和less由于使用了类似JavaScript的方式去书写,所以必须要经过编译生成css,而html引用只能引用编译之后的css文件,虽然过程多了一层,但是毕竟sass/less在书写的时候就方便很多,所以在我们使用sass/less之前,只要我们提前设置好,就可以直接生成对应的css文件,而我们只需要关心我们的sass/less文件即可。

  SASS技术的文件的后缀名有两种形式:.sass和.scss。其实两者都是同一种东西,两种均可以可以通过编译生成浏览器能识别的css文件。这两种的区别:

  SCSS的语法书写和CSS语法书写方式非常类似,.sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号;

  LESS技术的后缀名只有一种,就是.less,语法规则和sass大同小异,详细可以参考less中文网u。

  关于SASS和LESS的概念就是这样,如果想要继续深入了解更详细语法,恐怕就得多花功夫了,不过,学好SASS和LESS对你的前端发展绝对是有很大帮助的。加油,努力成为前端大神。

<
>
关于我们
AB模版网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

服务时间:9:00-18:00)

官方微信官方微信

部门热线

前   台:
业务部:
客服部:
技术部:
人事部:

咨询电话 返回顶部
返回顶部