腾讯云

文章/答案/技术大牛

发布

社区首页 >专栏 >Sass/Scss、Less 是什么？

Sass/Scss、Less 是什么？

原创

CRMEB商城源码

发布于 2022-08-02 03:25:17

1.2K00

代码可运行

文章被收录于专栏：crmebcrmeb

运行总次数：0

代码可运行

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)。

Sass 与 Less 区别

使用：

Less： https://less.bootcss.com/usage/

Sass： https://www.sass.hk/docs/

不同之处

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 文件。

1.混合不同 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;

}