• sass与less的区别?Stylus又是啥?


      

      现在写样式大家基本上都会用上CSS预处理器,而比较流行的预处理器就是这三位老哥了LessSassStylus

      在这之前,我们先了解一点,sass和scss有什么区别?

      SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。

      SCSS 和 Sass 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

        1、文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名

        2、语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

      后面的 Sass 代码会用被更多人接受的 SCSS 风格给出;

      OK,准备就绪,我们今天就从以下几点说说它们的区别,当然我们今天只说了一些比较常用的功能,它们本身是有着极其丰富的扩展特性:

      •   基本语法
      •   嵌套语法
      •   变量
      •   @import
      •   函数

      

      一、基本语法  

      Less & SCSS:

    .div{
        color: #000;
    }

      Stylus:

    .div
        color: #000

      区别:less和scss没有区别,stylus则是没有大括号({})和分号(;);

      二、嵌套语法

      Less & SCSS:

    .box {
      &.item {
        color: #000;
      }
    }

      Stylus:

    .box 
      &.item 
        color: #000

      区别:三者的嵌套语法都是一致的,甚至连引用父级选择器的标记 & 也相同。区别也只是大括号({})和分号(;);

      三、变量

      Less:

    @pink: #FFB6C1;
    .div
    { color: @pink; }

      Sass:

    $pink: #FFB6C1;
    
    .div {
      color: $pink;
    }

      Stylus:

    pink = #FFB6C1;
    
    .div 
      color: pink;

      区别:变量的设置和引用都很明显;

      、@import

      Less:

    @import (option) filename;
    optional:
    reference: 使用该less文件但是不输出它
    inline: 包括在源文件中输出,但是不作处理
    less: 将该文件视为less文件,无论其扩展名为什么
    css: 将文件视为css文件,无论扩展名为什么
    once: 该文件仅可导入一次 (默认)
    multiple: 该文件可以多次导入
    optional: 当没有发现文件时仍然编译

      Sass:

    @import  filename;

      Stylus:

    @import  filename;

      区别:三者形式上基本都没有太大区别,less多了选项,但是处理行为上却有一些不同。

         less扩展了原生的@import的语法,如果文件是.css的扩展名,将处理为CSS和@import语句保持原样,如果为其他的扩展名将处理为less导入;

         stylus与less类似,当使用@import没有.css扩展,会被认为是Stylus片段;

         sass则有点不同,它没有扩展语法,而是自己推断引入的方式,规则如下:

            默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:

          •  如果文件的扩展名是 .css。
          •  如果文件名以 http:// 开头。
          •  如果文件名是 url()。
          •  如果 @import 包含了任何媒体查询(media queries)。

            如果上述情况都没有出现,并且扩展名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名, Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。

     

      五、函数

      Less:

    .border-radius(@radius: 5px) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      border-radius: @radius;
    }
    
    .box{
        .border-radius(10px)
    }

      Sass:

    @mixin border-radius {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }
    
    .page-title {
      @include border-radius;
      padding: 4px;
      margin-top: 10px;
    }

    //含参数 @function widthFn($n) {   @return $n * 40px + ($n - 1) * 10px;
    } .leng {
      width
    : widthFn($n : 5); }

      Stylus:

    golden-ratio(n)
      n * 0.618
    
    .golden-box
       200px
      height: golden-ratio(@width)

      区别:sass区别较大,需要显示的使用关键字去调用,且非mixin时,需要return返回值;

      敲黑板时间到:

       我们今天说的只是一些平时比较常用的功能,且简单组合的方式,在样式预处理器这块,还有很大的内容需要大家去逐步了解;

  • 相关阅读:
    结对第一次—疫情统计可视化(原型设计)
    软工实践寒假作业(2/2)
    软工实践寒假作业(1/2)
    Luogu P3975 [TJOI2015]弦论
    【模板】后缀自动机 (SAM)
    停用FF新鲜事/FF新推荐
    模板汇总
    Luogu P4467 [SCOI2007]k短路(模板)
    【模板】 最短路
    Luogu P5960 【模板】差分约束算法
  • 原文地址:https://www.cnblogs.com/webcabana/p/11260203.html
Copyright © 2020-2023  润新知