精华内容
下载资源
问答
  • SASS SCSS区别

    2021-09-27 12:21:14
    SASS(Syntactically Awesome Style Sheets)是一种由 Hampton Catlin 设计、Chris Eppstein Natalie Weizenbaum 开发的样式表语言。 它是一种预处理器脚本语言,将被编译或解释为 CSS。 Sass Script 本身就是一...

    原文

    Difference Between SASS and SCSS

    SASS(Syntactically Awesome Style Sheets)是一种由 Hampton Catlin 设计、Chris Eppstein 和 Natalie Weizenbaum 开发的样式表语言。 它是一种预处理器脚本语言,将被编译或解释为 CSS。 Sass Script 本身就是一种脚本语言。 它的 typing 规则是动态的。

    SCSS 通常被称为 Sassy CSS,它是作为 SASS(Syntactically Awesome Style Sheets)的主要语法引入的,它建立在现有的 CSS 语法之上。 它使用分号和括号,如 CSS(级联样式表)。 SCSS 是 CSS 的超集,即所有 CSS 功能都将在 SCSS 中可用,并且包含 SASS(Syntactically Awesome Style Sheets)的一些功能。 SCSS 使任何 CSS 术语都有效。

    9 大区别:

    区别1

    SASS是Syntactically Awesome Style Sheets,是CSS的扩展,提供嵌套规则、继承、Mixins等特性,而SCSS是Sassy Cascaded Style Sheets,与CSS类似,填补了CSS与SASS之间的空白和不兼容。 它是在 MIT 许可下获得许可的。它首次出现在2006年。

    区别2

    SASS 更易于使用且语法更简单,因此无需使用分号、曲线、大括号等,而 SCSS 与 CSS 完全兼容,文件扩展名为 .scss 类型。

    区别3

    SASS 具有最好的编码标准和良好的官方文档的特点,而 SCSS 更容易学习开发代码。

    区别4

    SASS 基于 javascript 并支持不同的语言扩展,拥有自己的语法、开源 CSS 预处理器和高级功能,例如控制和指令及其库。

    区别5

    SASS 更难通过重写代码与现有 CSS 项目集成,而 SCSS 通过采样添加新代码而不是重写现有代码库更容易与现有代码库集成。

    区别6

    SASS 更易于使用、阅读和编写,而 SCSS 在实现代码方面更具逻辑性和复杂性。

    区别7

    SASS 变量将以美元 ($) 符号开头,而 SCSS 具有模块化功能,可以通过使用某种注释以更加模块化的方式组织代码。

    区别8

    SASS 具有高级语法功能,并且其文件具有 .sass 扩展名,而 SCSS 具有类似每个有效 CSS 文件都是 SCSS 文件的功能。

    区别9

    SASS 与 Ruby 相似,安装需要使用 Ruby,没有严格的代码缩进,而 SCSS 与 CSS 相似,无需任何额外安装或配置即可轻松使用。

    区别10

    SASS 具有可在 CSS 文件的不同位置使用的局部和全局变量,而 SCSS 具有不同的变量,例如颜色变量,这些变量可以稍后在样式表中使用。

    区别11

    SASS 具有嵌套功能,可以将 CSS 选择器嵌套显示在 HTML 中,并且难以维护较长的分层嵌套 CSS,而 SCSS 可以处理多个类和不同的嵌套样式。

    区别12

    SASS 具有文档样式,它比 CSS 更好,并且具有颜色、属性和参数列表的操作功能,而 SCSS 语法具有边距、列表样式、填充、显示等。

    区别13

    SASS 具有控制指令、功能指令、Mixins 并具有可扩展的特性,而 SCSS 可以与 SASS 一起使用来表示 CSS 类似的特性。

    区别14

    在最初的开发之后,SASS 扩展到 SassScript。 它支持跨平台操作系统。 它受到CSS、LESS、YAML等的影响。这个SASS的文件扩展名是.scss和.sass,它的官方实现也是一个使用Ruby开发的开源项目。

    结论

    SASS 与 SCSS 都是 CSS 预处理器,它们非常有用,可包含在基于 CSS 的 UI(用户界面)或前端框架中以简化开发。 这些 SASS 与 SCSS 框架在以编程方式利用强大的 CSS 功能时在高级别的 CSS 功能方面提供了强大的功能。 SASS 是一种 CSS 扩展,其中大部分功能都将被扩展,而 SCSS 是 CSS 的一种超集,其中 CSS 的所有功能都将在 SCSS 中。 预处理器的选择取决于通过以有效的方式做出权衡选择来使应用程序高效工作所需的功能和特性。

    与SCSS相比,SASS更易于使用并且需要更少的语法或配置,推荐用于需要更快开发范围和更容易开发复杂组件的较大应用程序的情况,而SCSS可以用于优化Mixin特性的情况,以及许多其他有效技术。

    展开全文
  • Sass SCSS 有什么区别SassScss不同点Sass语法Scss语法 SassScss不同点 SCSSSass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。 Sass SCSS 其实是同一种东西,我们平时都称之为...

    Sass 和 SCSS 有什么区别?

    你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特
    《人生果实》经典语录

    Sass与Scss不同点

    SCSSSass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能
    Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点

    • 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
    • 语法书写方式不同,Sass是以严格的缩进式语法规则来书写,不带大括号和分号,而SCSS 的语法书写和我们的CSS 语法书写方式非常类似。

    Sass语法

    $font-stack: Helvetica, sans-serif  //定义变量
    $primary-color: #333 //定义变量
    
    body
      font: 100% $font-stack
      color: $primary-color
    

    Scss语法

    $font-stark Helvetica, sans-serif;
    $primary-color: #333;
    
    body {
      font: 100% $font-stack;
      color: $primary-color;
    }
    

    两个编译出来的css都一样

    body {
      font: 100% Helvetica, sans-serif;
      color: #333;
    }
    

    SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作

    也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 SCSS。大部分扩展,例如变量、parent references 和 指令都是一致的。

    推荐阅读

    连点成线
    Vue源码学习目录


    谢谢你阅读到了最后~
    期待你关注、收藏、评论、点赞~
    让我们一起 变得更强

    展开全文
  • Sass SCSS区别

    2017-02-25 19:05:03
    Sass SCSS 有什么区别SCSSSass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。 Sass SCSS 其实是同一种...

    Sass 和 SCSS 有什么区别?

    SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。
    Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

    1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
    2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

    Sass 语法

        $font-stack: Helvetica, sans-serif  //定义变量
        $primary-color: #333 //定义变量
    
        body
          font: 100% $font-stack
          color: $primary-color

    SCSS 语法

        $font-stack: Helvetica, sans-serif;
        $primary-color: #333;
    
        body {
          font: 100% $font-stack;
          color: $primary-color;
        }

    最后,推荐.scss

    展开全文
  • [Bootstrap_3][Sass_Scss][中文]_04._使用Bootstrap的Sass_Scss版本進行編譯
  • SASS SCSS 文件提供工作构建脚本。 此构建脚本将生成一个未压缩的参考文件一个带有源映射的缩小工作文件。 建议删除源映射链接部署文件,因为它不需要并且加载额外的文件。 安装后,您将在Tools > Build ...
  • [Bootstrap_3][Sass___Scss][中文]_01._Sass___Scss_簡易介紹
  • scss和sass区别_Sass和SCSS有什么区别

    千次阅读 2020-09-01 17:44:59
    scss和sass区别This is the updated version of an article originally published on April 28, 2014. 这是最初于2014年4月28日发布的文章的更新版本。 I’ve written a lot on Sass, but some comments I got ...

    scss和sass区别

    Sass or SCSS

    This is the updated version of an article originally published on April 28, 2014.

    这是最初于2014年4月28日发布的文章的更新版本。

    I’ve written a lot on Sass, but some comments I got made it clear that not everyone knows exactly what Sass refers to. Here’s a bit of clarity:

    我已经在Sass上写了很多东西 ,但是我得到的一些评论清楚地表明,并不是每个人都确切知道Sass指的是什么。 这有点清楚:

    When we talk about Sass, we usually refer to the preprocessor and the language as a whole. We’ll say, for example, “we are using Sass”, or “here is a Sass mixin”. Meanwhile, Sass (the preprocessor) allows two different syntaxes:

    在谈论Sass时 ,我们通常指的是预处理器和整个语言。 例如,我们将说“我们正在使用Sass”或“这是Sass mixin”。 同时,Sass(预处理器)允许两种不同的语法:

    • Sass, also known as the indented syntax

      Sass ,也称为缩进语法

    • SCSS, a CSS-like syntax

      SCSS ,类似于CSS的语法

    萨斯的历史 (History of Sass)

    Initially, Sass was part of another preprocessor called Haml, designed and written by Ruby developers. Because of that, Sass stylesheets were using a Ruby-like syntax with no braces, no semi-colons and a strict indentation, like this:

    最初,Sass是另一个名为Haml的预处理器的一部分,该预处理器由Ruby开发人员设计和编写。 因此,Sass样式表使用的是类似Ruby的语法,没有大括号,没有分号和严格的缩进,如下所示:

    // Variable
    !primary-color= hotpink
    
    // Mixin
    =border-radius(!radius)
      -webkit-border-radius= !radius
      -moz-border-radius= !radius
      border-radius= !radius
    
    .my-element
      color= !primary-color
      width= 100%
      overflow= hidden
    
    .my-other-element
      +border-radius(5px)

    As you can see, this is quite a change compared to regular CSS! Even if you’re a Sass (the preprocessor) user, you can see this is pretty different from what we are used to. The variable sign is ! and not $, the assignment sign is = and not :. Pretty weird.

    如您所见,与常规CSS相比,这是一个很大的变化! 即使您是Sass(预处理器)用户,您也可以看到这与我们以前的习惯完全不同。 可变符号是! 不是$ ,分配符号是=而不是: 。 很奇怪

    But that’s how Sass looked like until version 3.0 arrived in May 2010, introducing a whole new syntax called SCSS for Sassy CSS. This syntax aimed at closing the gap between Sass and CSS by bringing a CSS-friendly syntax.

    但这就是Sass在3.0版于2010年5月问世之前的样子,它引入了一种全新的语法,称为SCSS for Sassy CSS 。 该语法旨在通过引入CSS友好语法来缩小Sass与CSS之间的差距。

    // Variable
    $primary-color: hotpink;
    
    // Mixin
    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
      border-radius: $radius;
    }
    
    .my-element {
      color: $primary-color;
      width: 100%;
      overflow: hidden;
    }
    
    .my-other-element {
      @include border-radius(5px);
    }

    SCSS is definitely closer to CSS than Sass. That being said, Sass maintainers have also worked to make both syntaxes closer to each other by moving ! (variable sign) and = (assignment sign) from the indented syntax to $ and : from SCSS.

    SCSS绝对比Sass更接近CSS。 话虽如此,Sass维护人员还通过移动!来使两种语法更加接近! 缩进语法中的(变量符号)和= (赋值符号)从SCSS转换为$:

    Now, when starting a new project, you may wonder which syntax you should use. Let me enlighten the path and explain the pros and cons of each syntax.

    现在,当开始一个新项目时,您可能想知道应该使用哪种语法。 让我启发一下道路,并解释每种语法的利弊。

    Sass缩进语法的优点 (Pros for Sass Indented Syntax)

    While this syntax might look weird, it has some interesting points. First of all, it is shorter and easier to type. No more braces and semi-colons, you don’t need all that stuff. Even better! No need for @mixin or @include, when a single character is enough: = and +.

    尽管此语法看起来很怪异,但它有一些有趣的地方。 首先,它更短,更容易键入 。 不再需要花括号和分号,您不需要所有这些东西。 更好! 当一个字符就足够时,不需要@mixin@include=+

    Also the Sass syntax enforces clean coding standards by relying on indentation. Because a wrong indent is likely to break the whole .sass stylesheet, it makes sure the code is clean and well formatted at all times. There is one way to write Sass code: the good way.

    此外,Sass语法通过依赖缩进来强制执行干净的编码标准 。 由于错误的缩进可能会破坏整个.sass样式表,因此可以确保代码始终干净且格式正确。 编写Sass代码的方法有一种:好的方法。

    But beware! Indenting means something in Sass. When indenting a selector, it means it is nested into the previous selector. For instance:

    但是要当心! 缩进意味着 Sass中的东西 。 缩进选择器时,表示它嵌套在前一个选择器中。 例如:

    .element-a
      color: hotpink
    
        .element-b
          float: left

    … will output the following CSS:

    …将输出以下CSS:

    .element-a {
      color: hotpink;
    }
    
    .element-a .element-b {
      float: left;
    }

    The simple fact of pushing .element-b one level to the right means it is a child of .element-a, changing the resulting CSS. Be very careful with your indentation!

    向右推.element-b一个简单的事实意味着它是.element-a的子.element-a ,更改了结果CSS。 小心缩进!

    As an aside, I feel like the indentation based syntax will probably suit a Ruby/Python team more than a PHP/Java team (although this is debatable, and I’d love to hear opinions to the contrary).

    顺便说一句,我觉得基于缩进的语法可能更适合Ruby / Python团队而不是PHP / Java团队(尽管这值得商bat,我很想听听相反的意见)。

    SCSS语法的优点 (Pros for SCSS Syntax)

    For starter, it is fully CSS compliant. It means, you can rename a CSS file in .scss and it will just work. Making SCSS fully compatible with CSS has always been a priority for Sass maintainers since SCSS was released, and this is a big deal in my opinion. Moreover, they try to stick as close as possible to what could become a valid CSS syntax in the future (hence @directives).

    首先,它完全符合CSS要求 。 这意味着,您可以在.scss重命名CSS文件,它将正常工作 。 自从SCSS发布以来,使SCSS与CSS完全兼容一直是Sass维护人员的优先考虑的事情,我认为这是很大的事情。 而且,他们尝试尽可能地贴近将来可能成为有效CSS语法的内容(因此@directives )。

    Because SCSS is compatible with CSS, it means there is little to no learning curve. The syntax is already known: after all, it’s just CSS with a few extras. This is important when working with inexperienced developers: they will be able to quickly start coding without knowing the first thing about Sass.

    由于SCSS与CSS兼容,这意味着几乎没有学习曲线 。 语法是已知的:毕竟,它只是CSS,还有一些其他功能。 与经验不足的开发人员一起工作时,这一点很重要:他们将能够快速开始编码,而无需了解Sass的第一手资料。

    Moreover, it is easier to read because it actually makes sense. When you read @mixin, you know it is a mixin declaration; when you see @include, you are calling a mixin. It doesn’t make any shortcuts, and everything makes sense when read out loud.

    此外,它更容易阅读,因为它确实有意义。 当您阅读@mixin ,您知道它是一个mixin声明; 当您看到@include ,您正在调用mixin。 它没有任何捷径,大声读出时一切都有意义。

    Also, most existing tools, plugins and demos for Sass are developed using the SCSS syntax. As time goes, this syntax is becoming pre-eminent and the default choice, mostly for the above reasons.

    而且,大多数现有的Sass工具,插件和演示都是使用SCSS语法开发的。 随着时间的流逝,主要由于上述原因,该语法正变得越来越突出,并且成为默认选择。

    最后的想法 (Final Thoughts)

    The choice is up to you, but unless you have really good reasons to code using the indented syntax, I would strongly suggest using SCSS over Sass. Not only is it simpler, but it is also more convenient.

    选择取决于您,但是除非您有充分的理由使用缩进语法进行编码,否则我强烈建议您在Sass上使用SCSS。 它不仅更简单,而且也更加方便。

    I once tried the indented syntax myself and liked it. I liked how short and easy it was. I was actually about to move an entire code base to Sass at work before changing my mind at the last minute. I thank my past-self for halting that move, because it would have been very difficult to work with several of our tools had we used the indented syntax.

    我曾经亲自尝试过缩进语法并喜欢它。 我喜欢那又短又容易。 实际上,在最后一刻改变主意之前,我实际上打算将整个代码库移交给Sass。 我感谢我过去的努力停止了这一步,因为如果使用缩进语法,使用我们的一些工具将非常困难。

    Also, please note Sass is never in uppercase, no matter whether you’re talking about the language or the syntax. Meanwhile, SCSS is always in uppercase. Need a reminder? SassnotSASS.com to the rescue!

    另外,请注意,无论您是在谈论语言还是语法, Sass都不会大写。 同时, SCSS始终为大写。 需要提醒吗? SassnotSASS.com进行救援!

    翻译自: https://www.sitepoint.com/whats-difference-sass-scss/

    scss和sass区别

    展开全文
  • sass scss

    2018-06-12 15:58:28
    Sass SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名语法书写方式不同,Sass 是以严格的缩进...
  • 学习-SASS-SCSS
  • 主要介绍了vue安装使用教程,用了很久css预编译器,但是一直不太清楚到底用的sass还是scss,直到有天被问住了有点尴尬,感兴趣的朋友一起看看吧
  • sass和scss

    2017-07-05 13:58:00
    scss和css3的语法差不多,就是多了一个用$符号定义变量,然后嵌套什么的就OK了。 sass也是定义变量,但是是使用换行...另外慕课网上有关于sass和scss的入门课程,讲的挺好的。 转载于:https://www.cnblogs.com...
  • Sass和SCSS其实是同一种东西,我们平时称之为Sass,两者之间不同之处有以下两点: 文件扩展名不同,Sass是以“.sass”后缀为扩展名,而SCSS是以“.scss”后缀为扩展名 语法书写方式不同,Sass是以严格的缩进式语法...
  • Sass和Scss-常用功能

    2020-04-26 15:54:28
    1、Sass和Scss Sass和Scss其实是一样的css预处理语言,ScssSass3引入新的语法,其后缀名为.scssSass版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss。两者是有不同的,继Sass之后Scss的编写规范基本...
  • sass和scss区别

    千次阅读 2018-11-01 16:02:04
    1、什么是sass? Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 ...
  • Sass 官网上是这样描述 Sass 的: Sass 是一门高于 CSS 的元语言,它能用来清晰地、...Sass SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: 1.文件扩展名不同,Sass 是以“....
  • sassscss区别和关系 github 库: sass scss: https://github.com/sass/ruby-sass less: https://github.com/less/less.js sassscss 的前身。 sass 语言在写的时候没有大括号 {} 分号;,就是裸奔的...
  • sass/scss less区别

    2019-08-06 16:47:37
    部分内容引自 孤舟蓑翁:sass/scss less区别
  • Sass SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: 1、文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名 2、语法书写方式不同,Sass 是以...
  • Sass和Scss区别

    2021-01-26 08:38:55
    Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护管理的样式表。Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合HAML(一种...
  • sass和scss使用规则

    千次阅读 2020-12-02 16:27:53
    sass和scss使用规则 ①父选择器& 举个栗子 a { &:hover { font-size: 16px; } body.firefox & { color: #eee; } &-sidebar { color: #eee;} } 结果: a:hover { font-size: 16px; } body.fire...
  • Less、Sass和SCSS

    2019-10-01 19:15:41
    (一)区别: Less(可在客户端服务端运行)是...SCSS 需要使用分号花括号而Sass用换行缩进。 Sass/SCSS与Less的区别: 编译环境不一样 变量符不一样,Less是@,SCSS是$,且变量作用域也不一样...
  • 5、Vue3 集成Sass和Scss

    2021-07-31 13:26:25
    Vue3 集成Sass和ScssVue 项目安装sass-loader node-sassvue组件此时可以写SassScss CSS样式语法了VS Code 需要安装对应插件 Vue 项目安装sass-loader node-sass 默认Vue项目不能够解析sassscss。 vue create vue...
  • SASS(语法上很棒的样式表)是由Hampton Catlin设计的样式表语言,由Chris EppsteinNatalie Weizenbaum开发。它是一种预处理器脚本语言,将被编译或解释为CSS。SassScript本身就是一种脚本语言。它的打字规则是动态...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,048
精华内容 12,819
关键字:

sass和scss区别