精华内容
下载资源
问答
  • scss、sass css区别

    万次阅读 2018-05-21 10:51:48
    项目中,会经常使用诸如scss、sass的style样式,它们和css有什么区别呢? less大家应该都不陌生,同样的scss、sass一样,它们都可以称为:CSS预处理器语言。 简单来说,scss和sass的区别,就在于 文件扩展名...

    项目中,会经常使用诸如scss、sass的style样式,它们和css有什么区别呢?


    less大家应该都不陌生,同样的scsssass一样,它们都可以称为:CSS预处理器语言

    简单来说,scsssass的区别,就在于 文件扩展名不同:“.sass”和“.scss
    1. sass是以严格缩进式语法规则来书写的,不带大括号{}和分号;
    2. SCSS的语法和```CSS``书写语法类似

    下面介绍一下它们的编译规则:

    sass的编译

    1. sass编译的方法:

    • 命令编译
    • 自动化编译
    • GUI工具编译

    注意: “单文件编译””多文件编译”

    2. sass输出方式:

    输出方式 编译时,携带参数 参考图
    sass嵌套输出方式 nested sass --watch test.scss:test.css --style nested 图1
    sass展开输出方式 expanded sass --watch test.scss:test.css --style expanded 图2
    sass展开输出方式 compact sass --watch test.scss:test.css --style compact 图3
    sass展开输出方式 compressed sass --watch test.scss:test.css --style compressed 图4
    截图 对比:

    sass输出方式对比

    除了以上的介绍之外,sass还可以进行加法/减法乘法除法变量计算数字运算字符运算颜色运算,等等。

    具体内容本文不介绍。


    以上就是关于“scss、sass 和 css 的区别”的简单介绍。

    展开全文
  • SCSS Sass 区别

    2017-06-19 22:16:45
    SCSS 是 Sass 3 引入新的语法,其语法...另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)特定于浏览器的语法,例如:古老的 IE filter 语法。 由于 SCSSCSS 的扩展,因此,所有在 CSS 中正常工作的

    SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法

    由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 SCSS。大部分扩展,例如变量、parent references 和 指令都是一致的;唯一不同的是,SCSS 需要使用分号和花括号而不是换行和缩进。 例如,以下这段简单的 Sass 代码:

    #sidebar
      width: 30%
      background-color: #faa
    

    只需添加花括号和分号就能转换为 SCSS 语法:

    #sidebar {
      width: 30%;
      background-color: #faa;
    }
    

    另外,SCSS 对空白符号不敏感。上面的代码也可以书写成下面的样子:

    #sidebar {width: 30%; background-color: #faa}
    

    还有一些不同是比较复杂的。这些将在下面进行详细讲解。建议先看看Sass 3 语法差异。在继续学习 SCSS 之前请务必理解下面这些内容。

    Nested Selectors

    To nest selectors, simply define a new ruleset inside an existing ruleset:

    #sidebar {
      a { text-decoration: none; }
    }
    

    Of course, white space is insignificant and the last trailing semicolon is optional so you can also do it like this:

    #sidebar { a { text-decoration: none } }
    

    Nested Properties

    To nest properties, simply create a new property set after an existing property's colon:

    #footer {
      border: {
        width: 1px;
        color: #ccc;
        style: solid;
      }
    }
    

    This compiles to:

    #footer {
      border-width: 1px;
      border-color: #cccccc;
      border-style: solid; }
    

    Mixins

    A mixin is declared with the @mixin directive:

    @mixin rounded($amount) {
      -moz-border-radius: $amount;
      -webkit-border-radius: $amount;
      border-radius: $amount;
    }
    

    A mixin is used with the @include directive:

    .box {
      border: 3px solid #777;
      @include rounded(0.5em);
    }
    

    This syntax is also available in the indented syntax, although the old = and + syntax still works.

    This is rather verbose compared to the = and + characters used in Sass syntax. This is because the SCSS format is designed for CSS compatibility rather than conciseness, and creating new syntax when the CSS directive syntax already exists adds new syntax needlessly and could create incompatibilities with future versions of CSS.

    Comments

    Like Sass, SCSS supports both comments that are preserved in the CSS output and comments that aren't. However, SCSS's comments are significantly more flexible. It supports standard multiline CSS comments with /* */, which are preserved where possible in the output. These comments can have whatever formatting you like; Sass will do its best to format them nicely.

    SCSS also uses // for comments that are thrown away, like Sass. Unlike Sass, though, // comments in SCSS may appear anywhere and last only until the end of the line.

    For example:

    /* This comment is
     * several lines long.
     * since it uses the CSS comment syntax,
     * it will appear in the CSS output. */
    body { color: black; }
    
    // These comments are only one line long each.
    // They won't appear in the CSS output,
    // since they use the single-line comment syntax.
    a { color: green; }
    

    is compiled to:

    /* This comment is
     * several lines long.
     * since it uses the CSS comment syntax,
     * it will appear in the CSS output. */
    body {
      color: black; }
    
    a {
      color: green; }
    

    @import

    The @import directive in SCSS functions just like that in Sass, except that it takes a quoted string to import. For example, this Sass:

    @import themes/dark
    @import font.sass
    

    would be this SCSS:

    @import "themes/dark";
    @import "font.sass";
    展开全文
  • 从我读到的内容来看,sass是一种语言,它使css更强大,支持变量和数学。SCSS有什么区别?它应该是同一种语言吗?相似的?...SCSS和SASS之间的区别,SASS文档页面上的此文本应回答以下问题:Ther...

    从我读到的内容来看,sass是一种语言,它使css更强大,支持变量和数学。

    SCSS有什么区别?它应该是同一种语言吗?相似的?不同的?

    SASS是一个具有语法改进的CSS预处理器。高级语法中的样式表由程序处理,并转换为常规的CSS样式表。但是,它们并没有扩展CSS标准本身。

    支持CSS变量,可以使用,但不能使用预处理器变量。

    SCSS和SASS之间的区别,SASS文档页面上的此文本应回答以下问题:

    There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

    The second and older syntax, known as the indented syntax (or sometimes just"Sass"), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

    然而,所有这些只适用于SASS预编译器,它最终创建了CSS。它不是CSS标准本身的扩展。

    英语不是我的第一语言,在这件事上我不懂。.scss或.sass将来不会被支持?

    如果您想知道应该使用哪种语法?对此没有任何建议,这只是个人偏好。

    在选择语法时,请记住,只有scss允许从stackoverflow和浏览器的开发工具中复制和粘贴css,而在sass中,总是需要调整语法

    css3有变量:developer.mozilla.org/en-us/docs/web/css/using_css_variables

    @Fishbone你用这个警告拯救了很多开发者。夸奖!

    我是帮助创建SAS的开发人员之一。

    区别在于用户界面。在文本的外部,它们是相同的。这就是为什么sass和scss文件可以互相导入的原因。实际上,sass有四个语法分析器:scss、sass、css和less。所有这些都将不同的语法转换为抽象语法树,然后通过sass转换工具进一步处理为css输出,甚至转换为其他格式之一。

    使用您最喜欢的语法,这两种语法都是完全支持的,如果您改变主意,以后您可以在它们之间进行更改。

    请原谅我?我读的对吗?sass真的能导入更少的文件吗?混音器/变量之间有协同作用吗?

    在组环境中,与标准CSS的相似性可能更为重要,在组环境中,有些人需要阅读您的代码,但只是偶尔阅读,而且他们没有时间/兴趣学习一个全新的语法。

    "ui"是指"语言"吗?

    @是的,我对"ui"的解释是面向程序员的文件语法。如分号或不分号等。

    sass .sass文件与.scss文件在视觉上不同,例如example.sass-sass是较旧的语法

    $color: red

    =my-border($color)

    border: 1px solid $color

    body

    background: $color

    +my-border(green)

    example.scss-sassy css是sass 3之后的新语法

    $color: red;

    @mixin my-border($color) {

    border: 1px solid $color;

    }

    body {

    background: $color;

    @include my-border(green);

    }

    只要将扩展名从.css更改为.scss即可将任何有效的css文档转换为sassy css(scss)。

    @奴佛卡因+1,我同意。作为C++程序员,我更喜欢括号和分号。顺便问一下,我有一个问题,从.scss到.css的转换是否与.css到.scss的转换相同?

    我们可以在这里看到不同之处sass-lang.com/guide

    与上面的答案相比,我更关心的是…太懒了,看不懂;-)

    它的语法是不同的,这是主要的pro(或con,取决于您的观点)。

    我尽量不重复别人说的话,你可以很容易地用谷歌搜索,但相反,我想从我使用两者的经验中说几句话,有时甚至是在同一个项目中。

    萨斯斯普罗

    更干净——如果你来自于python、ruby(你甚至可以用类似符号的语法来编写props)甚至是coffeescript世界,那么对你来说,编写mixin、函数和一般来说,.sass中任何可重用的东西都比.scss中的东西(主观的)更"容易"和可读。

    萨斯斯康斯

    空白敏感(主观),我不介意它在其他语言,但在这里的CSS它只是困扰我(问题:复制,标签和空间战争等)。

    没有内线规则(这对我来说是个游戏破坏),你不能像在.scss EDOCX1[3]中那样做EDOCX1[2]

    进口其他供应商的东西,复制普通的CSS片段-不可能,但一段时间后非常无聊。解决方案是在项目中使用.scss文件(与.sass文件一起使用),或者将其转换为.sass文件。

    除此之外-他们做同样的工作。

    现在,我喜欢做的是在.sass中编写混合函数和变量,如果可能的话,还可以在.scss中编写实际编译为css的代码(即Visual Studio不支持.sass,但每当我处理Rails项目时,我通常会将它们中的两个组合在一起,而不是在一个ofc文件中)。

    最近,我考虑给Stylus一个机会(对于一个全职的CSS预处理器),因为它允许您在一个文件中组合两个语法(以及其他一些特性)。对于一个团队来说,这可能不是一个好的方向,但是当你单独维护它的时候——没关系。当语法有问题时,触笔实际上是最灵活的。

    最后将.scss与.sass语法比较:

    // SCSS

    @mixin cover {

    $color: red;

    @for $i from 1 through 5 {

    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }

    }

    }

    .wrapper { @include cover }

    // SASS

    =cover

    $color: red

    @for $i from 1 through 5

    &.bg-cover#{$i}

    background-color: adjust-hue($color, 15deg * $i)

    .wrapper

    +cover

    @Cimmanon的特点是利弊分明。这就是这个答案和其他答案的区别。我投了反对票,决定退出红色等级。我认为这是有用的,即使它有通常的维恩图的答案重叠,其他每一个这样的帖子。这对于在两条路径上做出选择的人来说可能更有用。我也认为它比公认的答案好一点,因为它实际上显示了语言的不同,而不是仅仅说"Sass是不同的,因为它不是SCSS",这对我来说是无用的。我可以不使用个人使用的东西,但是:)

    SASS(语法上很棒的样式表)有两种语法:

    更新的:scss(sassy css)

    还有一个旧的原始:缩进语法,它是原始的sass,也被称为sass。

    所以它们都是SASS预处理器的一部分,有两种不同的语法。

    SCSS和原始SASS之间最重要的区别:

    SCSS:

    语法类似于css(每个常规的有效css3也都是有效的scs,但是在另一个方向上的关系显然不会发生)

    使用大括号{}。

    使用分号;。

    转让标志为:。

    为了创建混音,它使用@mixin指令

    在它前面使用mixin和@include指令

    文件的扩展名为.scss。

    原始SASS:

    语法类似于Ruby

    无支架

    没有严格的缩进

    无半结肠

    转让标志为=,而不是:。

    为了创建一个mixin,它使用=符号

    在它前面使用mixin和+符号

    文件的扩展名为.sass。

    有些人喜欢sass,即原始语法——而另一些人喜欢scss。不管怎样,但值得注意的是,sass的缩进语法并没有被弃用,也不会被弃用。

    转换为sass转换:

    # Convert Sass to SCSS

    $ sass-convert style.sass style.scss

    # Convert SCSS to Sass

    $ sass-convert style.scss style.sass

    SASS参考文献

    奇怪的是,如此清晰简洁的回答比其他人的得票少得多。我一直在研究成堆的资料,以了解SASS和SCSS之间的区别,最后发现这一点立即启发了我。除了一些拼写/语法错误外,干得不错。

    @唐英谢谢你。我很高兴能帮助你。关于这一点,我非常确定,因为我回答得很晚——大约在提问6年后。请随时纠正我的拼写或语法错误。

    添加一个简单的例子来显示不同的语法,这个答案将是完美的。

    谢谢@hogan的建议。这周我会试试的。

    从语言的主页

    Sass has two syntaxes. The new main

    syntax (as of Sass 3) is known as

    "SCSS" (for"Sassy CSS"), and is a

    superset of CSS3’s syntax. This means

    that every valid CSS3 stylesheet is

    valid SCSS as well. SCSS files use the

    extension .scss.

    The second, older syntax is known as

    the indented syntax (or just"Sass").

    Inspired by Haml’s terseness, it’s

    intended for people who prefer

    conciseness over similarity to CSS.

    Instead of brackets and semicolons, it

    uses the indentation of lines to

    specify blocks. Although no longer the

    primary syntax, the indented syntax

    will continue to be supported. Files

    in the indented syntax use the

    extension .sass.

    sass是一种解释性语言,可以输出css。s a s s的结构看起来像css(远程),但在我看来,这种描述有点误导人;它不是css的替代品,也不是扩展。它是一个最终输出CSS的解释器,所以SASS仍然有普通CSS的局限性,但是它用简单的代码来屏蔽它们。

    基本的区别在于语法。虽然sass有一个松散的语法,没有空格和分号,但scss更像css。

    Sass是第一个,语法有点不同。例如,包括混音器:

    Sass: +mixinname()

    Scss: @include mixinname()

    Sass忽略了花括号和分号,把它们放在了嵌套上,我发现这更有用。

    原始的sass是类似于ruby、jade等的Ruby语法。

    在这些语法中,我们不使用{},而是使用空格,也不使用;。

    在scss中,语法更像CSS,但有更多的选择,如:嵌套、声明等,类似于less和其他预处理CSS…

    它们基本上都是一样的,但是我把每行中的几行放在一起看语法差异,看{}、;和spaces:

    萨斯:

    $width: 100px

    $color: green

    div

    width: $width

    background-color: $color

    SCSS:

    $width: 100px;

    $color: green;

    div {

    width: $width;

    background-color: $color;

    }

    SASS和SCSS的区别文章详细解释了这一区别。不要被sass和scss选项混淆,尽管我最初也是,.scss是sassy css,是.sass的下一代。

    如果这不合理,您可以看到下面代码的区别。

    /* SCSS */

    $blue: #3bbfce;

    $margin: 16px;

    .content-navigation {

    border-color: $blue;

    color: darken($blue, 9%);

    }

    .border {

    padding: $margin / 2; margin: $margin / 2; border-color: $blue;

    }

    在上面的代码中,我们使用;来分隔声明。我甚至将.border的所有声明都添加到一行中,以进一步说明这一点。相比之下,下面的sass代码必须在不同的行上进行缩进,并且不使用;。

    /* SASS */

    $blue: #3bbfce

    $margin: 16px

    .content-navigation

    border-color: $blue

    color: darken($blue, 9%)

    .border

    padding: $margin / 2

    margin: $margin / 2

    border-color: $blue

    从下面的CSS中可以看到,SCSS样式与常规的CSS比旧的SASS方法更相似。

    /* CSS */

    .content-navigation {

    border-color: #3bbfce;

    color: #2b9eab;

    }

    .border {

    padding: 8px;

    margin: 8px;

    border-color: #3bbfce;

    }

    我想现在大多数时候,如果有人提到他们正在使用sass,他们指的是在.scss中创作,而不是传统的.sass方式。

    SASS stands for Syntactically Awesome StyleSheets. It is an extension

    of CSS that adds power and elegance to the basic language. SASS is

    newly named as SCSS with some chages, but the old one SASS is also

    there. Before you use SCSS or SASS please see the below difference.

    一些scss和sass语法的示例

    SCSS

    $font-stack:    Helvetica, sans-serif;

    $primary-color: #333;

    body {

    font: 100% $font-stack;

    color: $primary-color;

    }

    //Mixins

    @mixin transform($property) {

    -webkit-transform: $property;

    -ms-transform: $property;

    transform: $property;

    }

    .box { @include transform(rotate(30deg)); }

    萨斯

    $font-stack:    Helvetica, sans-serif

    $primary-color: #333

    body

    font: 100% $font-stack

    color: $primary-color

    //Mixins

    =transform($property)

    -webkit-transform: $property

    -ms-transform:     $property

    transform:         $property

    .box

    +transform(rotate(30deg))

    编译后输出CSS(两者相同)

    body {

    font: 100% Helvetica, sans-serif;

    color: #333;

    }

    //Mixins

    .box {

    -webkit-transform: rotate(30deg);

    -ms-transform: rotate(30deg);

    transform: rotate(30deg);

    }

    更多信息请参考官方网站

    紧凑的回答:

    scss是指sass css预处理器支持的主要语法。

    以.scss结尾的文件表示sass支持的标准语法。SCSS是CSS的超集。

    以.sass结尾的文件表示源于Ruby世界的sass所支持的"旧"语法。

    展开全文
  • LESS SCSS 有什么区别

    千次阅读 2019-11-28 18:36:49
    LESS SCSS 都属于 CSS 预处理器的范畴,也就是 CSS 的超集,但是两者的语法、如何使用具体的功能实现还是有差异的。 下面我试着以代码示例的方式给大家演示一下两者的几个常见区别。 声明使用变量 LESS ...

    LESS 和 SCSS 的区别

    LESS 和 SCSS 都属于 CSS 预处理器的范畴,也就是 CSS 的超集,但是两者的语法、如何使用和具体的功能实现还是有差异的。

    下面我试着以代码示例的方式给大家演示一下两者的几个常见区别。

    声明和使用变量

    LESS 采用 @ 符号,SCSS 采用 $ 符号。

    在下面的示例中,我们首先在规则外声明了一个名为 link-color 的变量,然后在名为 #main 的规则内声明一个名为 width 的变量,接着把 width 变量赋值给了 CSS 的 width 属性。

    LESS:

    @link-color: #428bca;
    #main {
      @width: 5em;
      width: @width;
    }

    SCSS:

    $link-color: #428bca;
    #main {
      $width: 5em;
      width: $width;
    }

    变量插值(Variable Interpolation)

    LESS 采用 @{xxxx} 的形式,SCSS 采用 ${xxxx} 的形式。

    示例一:使用变量插值作为 CSS 选择器

    LESS:

    // Variables 
    @my-selector: banner;
    
    // Usage 
    .@{my-selector} {
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }

    SCSS:

    // Variables 
    $my-selector: banner;
    
    // Usage 
    .#{$my-selector} {
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }

    Mixins 的定义、使用及参数

    定义一个 Mixin

    LESS 使用 dot 符号(也就是句点)来定义一个 Mixin,并且可以把任意的 CSS 规则作为 Mixin 使用;SCSS 使用 @mixin 指令来定义一个 Mixin。

    示例 – 来自 BootStrap 的 alert-variant Mixin 的定义

    LESS:

    .alert-variant(@background; @border; @text-color) {
      background-color: @background;
      border-color: @border;
      color: @text-color;
    
      hr {
        border-top-color: darken(@border, 5%);
      }
      .alert-link {
        color: darken(@text-color, 10%);
      }
    }

    SCSS:

    @mixin alert-variant($background, $border, $text-color) {
      background-color: $background;
      border-color: $border;
      color: $text-color;
    
      hr {
        border-top-color: darken($border, 5%);
      }
      .alert-link {
        color: darken($text-color, 10%);
      }
    }

    使用 Mixin

    LESS 仍是使用 dot 符号(句点),如果 Mixin 没有参数的话可以省略后面的圆括号;SCSS 使用 @include 指令来引入一个 Mixin。

    示例 – 引入一个名为 center-block 的 Mixin。

    LESS:

    .center-block() {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    .a {
        .center-block;
    }

    SCSS:

    @mixin center-block() {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    .a {
        @include center-block;
    }

    参数形式

    如果存在多个参数的话,LESS 使用分号分隔;SCSS 使用逗号分隔。两者都支持为参数设置默认值。

    示例 – 来在 BootStrap 的 form-control-validation Mixin 的使用

    LESS:

    @state-success-text:             #3c763d;
    @state-success-bg:               #dff0d8;
    @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
    
    @state-info-text:                #31708f;
    @state-info-bg:                  #d9edf7;
    @state-info-border:              darken(spin(@state-info-bg, -10), 7%);
    
    @state-warning-text:             #8a6d3b;
    @state-warning-bg:               #fcf8e3;
    @state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
    
    @state-danger-text:              #a94442;
    @state-danger-bg:                #f2dede;
    @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
    
    .box-shadow(@shadow) {
      -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 
              box-shadow: @shadow;
    }
    
    .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
      // Color the label and help text 
      .help-block,
      .control-label,
      .radio,
      .checkbox,
      .radio-inline,
      .checkbox-inline,
      &.radio label,
      &.checkbox label,
      &.radio-inline label,
      &.checkbox-inline label  {
        color: @text-color;
      }
      // Set the border and box shadow on specific inputs to match 
      .form-control {
        border-color: @border-color;
        .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 
        &:focus {
          border-color: darken(@border-color, 10%);
          @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
          .box-shadow(@shadow);
        }
      }
      // Set validation states also for addons 
      .input-group-addon {
        color: @text-color;
        border-color: @border-color;
        background-color: @background-color;
      }
      // Optional feedback icon 
      .form-control-feedback {
        color: @text-color;
      }
    }
    
    // Feedback states 
    .has-success {
      .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
    }
    .has-warning {
      .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
    }
    .has-error {
      .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
    }

    SCSS:

    $state-success-text:             #3c763d;
    $state-success-bg:               #dff0d8;
    $state-success-border:           darken(adjust_hue($state-success-bg, -10), 5%);
    
    $state-info-text:                #31708f;
    $state-info-bg:                  #d9edf7;
    $state-info-border:              darken(adjust_hue($state-info-bg, -10), 7%);
    
    $state-warning-text:             #8a6d3b;
    $state-warning-bg:               #fcf8e3;
    $state-warning-border:           darken(adjust_hue($state-warning-bg, -10), 5%);
    
    $state-danger-text:              #a94442;
    $state-danger-bg:                #f2dede;
    $state-danger-border:            darken(adjust_hue($state-danger-bg, -10), 5%);
    
    @mixin box-shadow($shadow) {
      -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 
              box-shadow: $shadow;
    }
    
    @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
      // Color the label and help text 
      .help-block,
      .control-label,
      .radio,
      .checkbox,
      .radio-inline,
      .checkbox-inline,
      &.radio label,
      &.checkbox label,
      &.radio-inline label,
      &.checkbox-inline label  {
        color: $text-color;
      }
      // Set the border and box shadow on specific inputs to match 
      .form-control {
        border-color: $border-color;
        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 
        &:focus {
          border-color: darken($border-color, 10%);
          $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
          @include box-shadow($shadow);
        }
      }
      // Set validation states also for addons 
      .input-group-addon {
        color: $text-color;
        border-color: $border-color;
        background-color: $background-color;
      }
      // Optional feedback icon 
      .form-control-feedback {
        color: $text-color;
      }
    }
    
    // Feedback states 
    .has-success {
      @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
    }
    .has-warning {
      @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
    }
    .has-error {
      @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
    }

    函数的使用

    字符串函数

    LESS 使用 e 或者 ~”xxxx” 这种语法进行 CSS 转义;SCSS 本身并没有提供 CSS 转义的函数,中要达到相同的效果可以使用变量插值(Variable Interpolation)实现。

    示例 – CSS 转义

    LESS:

    @input-border-focus:             #66afe9;
    
    .box-shadow(@shadow) {
      -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 
      box-shadow: @shadow;
    }
    
    .form-control-focus(@color: @input-border-focus) {
      @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
      &:focus {
        border-color: @color;
        outline: 0;
        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
      }
    }
    
    .form-control {
      .form-control-focus();
    }

    SCSS:

    $input-border-focus:             #66afe9;
    
    @mixin box-shadow($shadow) {
      -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 
      box-shadow: $shadow;
    }
    
    @mixin form-control-focus($color: $input-border-focus) {
      $color-rgba: rgba(red($color), green($color), blue($color), .6);
      &:focus {
        border-color: $color;
        outline: 0;
        @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba});
      }
    }
    
    .form-control {
      @include form-control-focus();
    }

    颜色函数

    调节色相,LESS 使用名为 spin() 的函数;SCSS 使用名为 adjust_hue() 的函数。

    示例 – 调节色相

    LESS:

    @state-success-border:           darken(spin(@state-success-bg, -10), 5%);

    SCSS:

    $state-success-border:           darken(adjust_hue($state-success-bg, -10), 5%);

    数学函数

    LESS 提供了一些 SCSS 中并不具备的数学函数,在 SCSS 中只能通过自定义函数实现,然后通过 node-sass 的接口传递给编译器。

    示例 – 数学函数

    SCSS:

    // rotate for ie8 and blow
    @mixin ie-rotate($rotation) {
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
    }
    
    // rotate for ie8 and blow
    // degrees unit
    @mixin ie-rotate-via-degrees($degrees) {
      /* IE6-IE8 */
      $radians: parseInt("#{$degrees}") * PI() * 2 / 360;
      $costheta: cos("#{$radians}");
      $sintheta: sin("#{$radians}");
      $negsintheta: "#{$sintheta}" * -1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})";
      zoom: 1;
    
      :root & {
        filter: none;
      }
    }
    
    // support rotate for all browsers
    @mixin cross-rotate($degrees) {
      @include rotate($degrees);
      @include ie-rotate-via-degrees($degrees);
    }
    
    // Placeholder text
    @mixin placeholder($color: $input-placeholder-color) {
      // Firefox
      &::-moz-placeholder {
        color: $color;
        opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
      }
      // Internet Explorer 10+
      &:-ms-input-placeholder {
        color: $color;
      }
      // Safari and Chrome
      &::-webkit-input-placeholder {
        color: $color;
      }
    }

    上述 Math 实现所需的 JS 文件:

    module.exports = {
      'parseInt($str)': function (str) {
        return parseInt(str, 10);
      },
      'Math.sin($degree)': function (degree) {
        return Math.sin(degree);
      },
      'Math.cos($degree)': function (degree) {
        return Math.cos(degree);
      },
      'Math.PI': Math.PI
    }

    有关函数的区别还有:

    1. LESS 的 fade() 函数在 SCSS 中只能使用 rgba() 之类的实现,因为 SCSS 也没有这个函数。

    @import 的实现

    像 @media, @import 这些带 @ 符号的在 CSS 中都称为 At-rules。
    值的一提的是 LESS 和 SCSS 对@import 实现的区别。

    LESS 的 @import 对文件扩展名的处理:

    • 如果扩展名为 .css,将文件识别为 CSS 文件
    • 其他任何扩展名都将被作为 LESS 文件处理
    • 没有扩展名会被附加一个 .less 的扩展名并且作为 LESS 文件处理

    SCSS 的 @import 实现对文件扩展名的处理:

    • 默认情况下,SCSS 的 @import 实现会试图寻找一个 Sass 文件进行导入。
    • 但是在下列情况出现时,@import 会直接被编译为 CSS 的 @import at-rule
      • 文件扩展名是 .css
      • 文件以 http:// 开头
      • 文件名是一个 url()
      • @import 具有媒体查询
    • SCSS 按约定认为下划线开始的文件是内联文件,不会被编译为单独的 CSS 文件输出。

    示例 – 使用 @import

    LESS:

    @import "foo";
    @import "bar.less";
    @import "foo.php"; // 当成 LESS 文件处理
    @import "foo.css";

    SCSS:

    @import "foo";
    @import "foo.scss";

    都会导入 foo.scss 文件。

    其他区别

    引用父选择器 & 符号的使用

    LESS 和 SCSS 均使用 & 符号表示父选择器,但是 SCSS 的 & 符号只能出现在一个组合选择器的开始位置,LESS 则没有这个限制。

    示例 – & 选择器

    LESS:

    .bg-variant(@color) {
      background-color: @color;
      a&:hover,
      a&:focus {
        background-color: darken(@color, 10%);
      }
    }

    SCSS:

    a {
      font-weight: bold;
      text-decoration: none;
      &:hover { text-decoration: underline; }
      body.firefox & { font-weight: normal; }
    }

    SCSS 不支持 LESS 中的 CSS Guard 功能,比如 if, when …,在 SCSS 中需要换种方式实现。

    LESS 示例:

    .my-optional-style() when (@my-option = true) {
      button {
        color: white;
      }
    }
    .my-optional-style();

    Note:SCSS 需要换一种写法实现同样的功能。

    SCSS 支持 !default,一般是用在基础 Rule 的声明中,告诉使用者这是可以被覆盖的。

    SCSS 示例:

    $primary:       $blue !default;
    $secondary:     $gray-600 !default;

    有关 extend

    SCSS 不像 LESS 一样默认可以把 rule 作为 Mixin 使用,但是 SCSS 有类似的 @extend 指令;而 LESS 的 extend 语法看起来则像是伪类一样。

    示例:

    LESS:

    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }

    SCSS :

    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }

    集成 JavaScript 功能的方式

    LESS 使用 @functions 指令,可以把 js 代码直接放到 ~ xxx 中间即可;SCSS 可以把 JS 代码放到一个单独的文件中,然后使用 node-sass编译的时候指定参数传给 node-sass。

    LESS 示例: ant-design/tinyColor.less

    SCSS 示例:
    kant/Math.js

    编译命令: node-sass --output-style expanded --source-map true --precision 6 --functions components/style/custom.js components/button/style/index.scss components/button/style/index.css

    最后两个:

    1. LESS 支持 lazy evaluation,但是 SCSS 不支持,所以在 LESS 中可以先使用再定义,但是在 SCSS 中一定要先定义再使用。
    2. SCSS 是不支持 Mixin 重载的, 也就是说 LESS 可以有同名但是参数个数不同的几个 Mixins, SCSS 同样名字的 Mixin 只能有一个.
    展开全文
  • Sass/Scss和Less区别

    2015-01-03 21:39:37
    作者:zccst [size=large]一. Sass/Scss&Less是什么?[/size] Sass (Syntactically Awesome Style...Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。 Less一种动态样式语言....
  • Sass SCSS 有什么区别?Sass与Scss不同点Sass语法Scss语法 Sass与Scss不同点 SCSS是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。 Sass SCSS 其实是同一种东西,我们平时都称之为...
  • 传统的css可以直接被html引用,但是sassless由于使用了类似JavaScript的方式去书写,所以必须要经过编译生成css,而html引用只能引用编译之后的css文件,虽然过程多了一层,但是毕竟sass/less在书写的时候就方便很...
  • 1、描述CSS 指层叠样式表 (Cascading Style Sheets)Sass (Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和...
  • 随着前端开发的不断发展,CSS也逐渐延伸出了很多新的语言,lessSass就是其中两种,下面我们就一起来看看它们到底有何区别。 背景 CSS(层叠样式表)是一门非程序式语言,入门学习使用非常直观方便,但是对于...
  • sass的变量名可以与css中的属性名选择器名称相同,包括中划线下划线。这完全取决于个人的喜好 嵌套CSS 规则 嵌套CSS 规则 在规则块中嵌套规则块 #content { article { h1 { color: #333 } ...
  • css/sass/scss的使用和区别

    万次阅读 2018-05-14 09:35:04
    转载http://www.cnblogs.com/wangpenghui522/p/5467560.htmlsass/scss less的区别一. Sass/Scss、Less是什么?Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出...
  • Sass 官网上是这样描述 Sass 的: Sass 是一门高于 CSS 的元语言,它能用来清晰地、...Sass SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: 1.文件扩展名不同,Sass 是以“....
  • [css] 有用过scss和sass吗?说说它们之间的区别是什么? sass和scss其实是一样的css预处理语言,其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss。 两者是有...
  • sass/scss less的区别

    2020-05-16 16:50:04
    sass/scss less的区别 一. Sass/Scss、Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色...
  • Sass SCSS区别

    2017-02-25 19:05:03
    Sass SCSS 有什么区别SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。 Sass SCSS 其实是同一种...
  • 来源 |https://www.geeksforgeeks.org/what-is-the-difference-between-css-and-scss/?ref=leftbar-rightbar翻译 | web前端开发(ID:web_qdkf)介绍:CSS:级联样式表基本上是脚本语言。CSS用于设计网页。CSS是与HTML...
  • sass/scss和less的区别

    2021-03-11 10:10:51
    Sass/Scss、Less是什么?...Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}
  • 1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass!...下面看下sass与scss区别 用了很久css预编译器,但是一直不太清
  • 根据我的阅读,Sass是一种语言,它通过变量数学支持使CSS更加强大。 SCSS有什么区别? 是否应该使用相同的语言? 类似? 不同?
  • Sass/Scss Less的区别

    2020-02-22 14:05:29
    一. Sass/Scss、Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多...Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sa...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 269
精华内容 107
关键字:

scss和css区别