stylus、sass、less区别

stylus、sass、less区别

一、变量

1、less:/*以“@”开头*/ ,@var: value

2、sass:/*以“$”开头*/,$var: value

3、stylus:/*可以以“$”开头,也可无前缀符号直接声明变量*/,var=10

二、后缀名

1、less:*.less

2、sass:*.scss

3、stylus:*.styl

三、混合(Mixins)

Mixins是CSS预处理器中语言中最强大的特性。Mixins可以将一部分需重用的样式抽出,只需定义一次,就可被很多选择器重复使用。

1、less:LESS中声明Mixins和CSS定义样式非常类似,可以将Mixins看成是一个选择器,当然Mixins也可以设置参数,并给参数设置默认值。不过设置参数的变量名是使用“@”开始,同样参数和默认参数值之间需要使用冒号(:)分开。

2、sass:在Sass定义Mixins和LESS、Stylus有所不同,在声明Mixins时需要使用“@mixin”开头,然后后面紧跟Mixins的名,他也可以定义参数,同时可以给这个参数设置一个默认值,但参数名是使用“$”符号开始,而且和参数值之间需要使用冒号(:)分开。另外在Sass中调用Mixins需要使用“@include”开头,然后在其后紧跟你要调用的Mixins名。

3、stylus:Stylus和前两者也略有不同,他可以不使用任何符号,就是直接定义Mixins名,然后在定义参数和默认值之间用等号(=)来连接。

例如

1、less:

  •  
  • 
    /*声明混合*/
    .setColor(@mainC:#000){
      color:@mainC;
    }
    /*直接以默认值调用混合*/
    .sBox{
      .setColor();
    }
    /*调用混合且传入自定义参数值*/
    .bBox{
      .setColor(#fff);
    }
    
    		
  • 2、sass:

  •  
  • 
    /*声明混合*/
    @mixin setColor($mainC:#000){
      color:$mainC;
    }
    /*直接以默认值调用混合*/
    .sBox{
      @include setColor();
    }
    /*调用混合且传入自定义参数值*/
    .bBox{
      @include setColor(#fff);
    }
    
    		
  • 3、stylus:

  •  
  • 
    /*声明混合*/
    setColor(mainC=#000){
      color:mainC;
    }
    /*直接以默认值调用混合*/
    .sBox{
      setColor();
    }
    /*调用混合且传入自定义参数值*/
    .bBox{
      setColor(#fff);
    }
    
    		
  • 四、嵌套实现后代选择器

    嵌套语法是相同的,可以通过大括号“{}”之间的层次关系实现嵌套。也可以使用“&”符号来引用父选择器。

    例如

  •  
  • 
    li{
      margin:10px 5px;
      a{
        color:red;
        &:hover{
          color:blue;
        }
      }
    }
    
    		
  • 编译后的CSS

  •  
  • 
    li{
      margin:10px 5px;
    }
    li a{
      color:red;
    }
    li a:hover{
      color:blue;
    }
    
    		
  • 五、继承

    当我们需要为多个元素定义相同样式的时候,我们可以考虑使用继承的做法。

    1、less:无需明确的前缀

    2、sass:使用“@extend”开始,后面紧跟被继承的选择器

    3、stylus:使用“@extend”开始,后面紧跟被继承的选择器

    例如

    1、在 sass 和 stylus 中:

  • 
    .block {
      margin: 10px 5px;
      padding: 2px;
    }
     
    p {
      @extend .block; /* Inherit styles from '.block' */
      border: 1px solid #EEE;
    }
    ul, ol {
      @extend .block; /* Inherit styles from '.block' */
      color: #333;
      text-transform: uppercase;
    }
    
    		
  • 编译后的CSS

  •  
  • 
    .block, p, ul, ol {
      margin: 10px 5px;
      padding: 2px;
    }
    p {
      border: 1px solid #EEE;
    }
    ul, ol {
      color: #333;
      text-transform: uppercase;
    }
    
    		
  • 2、在 Less 中:

  •  
  • 
    .block {
      margin: 10px 5px;
      padding: 2px;
    }
     
    p {
      .block; /* Inherit styles from '.block' */
      border: 1px solid #EEE;
    }
    ul, ol {
      .block; /* Inherit styles from '.block' */
      color: #333;
      text-transform: uppercase;
    }
    
    		
  • 编译后的CSS

  •  
  • 
    .block {
      margin: 10px 5px;
      padding: 2px;
    }
    p {
      margin: 10px 5px;
      padding: 2px;
      border: 1px solid #EEE;
    }
    ul,
    标签: