stylus、sass、less区别

时间：2017-3-15类别：Web前端

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,
标签：css

stylus、sass、less区别

stylus、sass、less区别

猜您喜欢

热门推荐