CRMEB JAVA知识科普——Scss、Less是什么,如何区别?

CRMEB java版新零售社交电商系统,是一款基于Java + Uni-app 开发的新零售社交电商系统,系统代码全开源无加密,独立部署、二开方便,适用于企业新零售、批发、分销、预约、O2O、多店等各种业务需求。

对于很多开发者在了解新零售社交电商系统我们的时候,对Scss、Less是什么,如何区别?下面就跟小编一起了解下。

一. Sass/Scss、Less是什么?

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。

Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此Sass语法进行了改良,Sass 3就变成了Scss(Sassy CSS)。SCSS(Sassy CSS)是CSS语法的扩展。这意味着每一个有效的CSS也是一个有效的SCSS语句,与原来的语法兼容,只是用{}取代了原来的缩进。

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数.  Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行 (借助 Node.js)。

二. SassLess区别

CRMEB JAVA知识科普——Scss、Less是什么,如何区别?_第1张图片

使用

Less: Less.js 用法 | Less.js 中文文档 - Less 中文网

Sass: Sass教程 Sass中文文档 | Sass中文网

不同之处

1、Less在JS上运行,Sass在Ruby上使用。


Sass有工具库Compass, 简单说,Sass和Compass的关系类似于像Javascript和jQuery的关系,Compass在Sass的基础上,封装了一系列有用的模块和模板,补充强化了Sass的功能。

Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库,Bootstrap的样式文件部分源码就是采用Less语法编写。

2、编写变量的方式不同。
Sass使用$,而Less使用@。

//  Sass

$lightColor:#baf;

// Less

@lightColor:#baf;

3、Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。

4、输出格式不一样

Less无输出格式,Sass可以使用特定的输出格式

· nested:嵌套缩进的css代码

· expanded:展开的多行css代码

· compact:简洁格式的css代码

· compressed:压缩后的css代码

:nested

在执行监测(编译)命令时,可以指定输出格式为nested:

sass --watch styles.scss:styles.css --style nested

复制

nested格式下,输出的CSS代码:

div {

  padding: 20px;

  margin: 20px; }

.one {

  background: red; }

.two {

  background: yellow; }

nested是默认格式,可以不指定。

:expanded

展开格式看起来像开发人员手写的格式。

要将CSS输出设置为展开格式,可以使用如下命令:

sass --watch styles.scss:styles.css --style expanded

该格式下,输出的CSS代码:

div {

  padding: 20px;

  margin: 20px;

}

.one {

  background: red;

}

.two {

  background: yellow;

}

.three {

  background: #ff8000;

}

:compact

紧凑格式占用的空间要小得多,每个CSS选择符定义只占用一行。

要将CSS输出设置为紧凑格式,可以使用如下命令:

sass --watch styles.scss:styles.css --style compact

该格式下,输出的CSS代码:

div { padding: 20px; margin: 20px; }

.one { background: red; }

.two { background: yellow; }

.three { background: #ff8000; }

:compressed

压缩格式占用尽可能少的空间,选择符定义不换行,文件最小,一般用于生产版本。

要将CSS输出设置为压缩格式,可以使用如下命令:

sass --watch styles.scss:styles.css --style compressed

该格式下,输出的CSS代码:

div{padding:20px;margin:20px}.one{background:red}.two{background:ye..........

5、引入外部CSS文件方法命名有一点不一样

引入外部CSS文件

scss引用的外部文件命名必须以_开头, 如下例所示:

其中_test1.scss文件名如果以下划线开头的话,Sass会认为该文件是一个引用文件,不会将其编译为css文件。

6、混合不同 Mixins

Sass

 /*声明一个Mixin叫作“error”*/

@mixin error($borderWidth:2px){

  border:$borderWidth solid #f00;

  color: #f00;

}

/*调用error Mixins*/

.generic-error {

  @include error();/*直接调用error mixins*/

}

Less

/*声明一个Mixin叫作“error”*/

.error(@borderWidth:2px){

  border:@borderWidth solid #f00;

  color: #f00;

}

/*调用error Mixins*/

.generic-error {

  .error();/*直接调用error mixins*/

}

7。继承方法不一样

sass的继承:@extend

.block {

  margin: 10px 5px;

  padding: 2px;

}

p {

  @extend .block;/*继承.block选择器下所有样式*/

  border: 1px solid #eee;

}

less的继承:类似于mixins .block

.block {

  margin: 10px 5px;

  padding: 2px;

}

p {

  .block;/*继承.block选择器下所有样式*/

  border: 1px solid #eee;

}

相同之处

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

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

为什么选择使用Sass而不是Less?

1、Sass在市面上有一些成熟的框架,比如说Compass,而且有很多框架也在使用Sass,比如说Foundation。

2、就国外讨论的热度来说,Sass绝对优于LESS。
3、就学习教程来说,Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网,而Sass的中文教程,慢慢在国内也较为普遍。

4、Sass也是成熟的CSS预处理器之一,而且有一个稳定,强大的团队在维护。

5、同时还有Scss对sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。

6、bootstrap(Web框架)最新推出的版本4,使用的就是Sass。

 

你可能感兴趣的:(java,scss,less)