比较Stylus,Scss,Less的异同

最新推荐文章于 2023-04-19 22:13:59 发布
最新推荐文章于 2023-04-19 22:13:59 发布
阅读量297 收藏
点赞数
文章标签： sass less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43900440/article/details/110546420
版权

Stylus

  1. 用法更像javascript,列如:变量声明,for循环等
  2. 运算符非常丰富
  3. Stylus有简略写法,但是对初学者来讲可能会不太适应
  4. 含有nib插件,可以简化Css写法

Sass

  1. 在指令前添加@,便于区分
  2. 与javascript写法接近

Less:

  1. 与javascript不同处很多,列如:条件判断使用when()等,学习成本较高
  2. 内置函数比较少

目录

  • 变量
    1.声明: 惰性加载(Less)/Sass命名问题/属性变量(Stylus/Less)
    2.插值
    3.类型: 颜色/数值/字符串/数组/对象/null
    4.作用域: 全局变量(Sass/!global)

  • 语法
    1.循环
    2.判断: 三目运算(Stylus)
    3.运算符: 除号/加号

  • 函数: 样式优先(Less/!important)/匹配模式(Less)
    1.生成类
    2.生成样式
    3.返回值

  • 嵌套
    1.父级: 嵌套层级(Stylus)/根目录(Sass)/属性嵌套(Sass)
    2.冒泡

  • 继承
    1.嵌套继承(Stylus/Less)
    2.占位符(Stylus/Sass)

  • Stylus扩展
    1.Stylus简写
    2.判断/循环后置
    3.nib插件

  • 资料来源网址
    1.Stylus: https://stylus.bootcss.com
    2.Sass: https://www.sasscss.com
    3.Less: https://less.bootcss.com

变量

1.声明

/* Stylus */
$color = red; // $可以省略
.color {
  color: $color;
}
// 或
color = red; 
.color {
  color: color;
}
/* Sass */
$color: red; // $是Sass的变量标识符
.color {
  color: $color;
}
/* Less*/
@color: red; // @是Less的变量标识符
.color{
  color: @color;
}
  • 惰性加载(Less): 可以先使用在声明
    .color {
  color: @color;
}
@color: red;
    当出现多个相同变量时,取有此变量最近作用域的最终值
    @color: yellow;
.color{
   @color: red;
   color: @color;
   @color: blue;
}
/* 生成 */
.color{
   color: blue;
}
  • Sass命名: -与_在Sass命名中等值
    $color-value: red;
.color {
  color: $color_value;
}
/* 生成 */
.color {
  color: red;
}
  • 属性变量(Less/Stylus): 可以将属性直接当成变量使用
    /* Stylus */
.number {
  width: 100px;
  height: @width;
}
/* Less */
.number {
  width: 100px;
  height: $width;
}
/* 生成 */
.number {
  width: 100px;
  height: 100px;
}

2.插值(用于字符串的拼接): 在Stylus和Sass中会删除字符串的引号

/* Stylus */
$color = red;
.{$color} {
   color: red;
}
/* Sass */
$color: red;
.#{$color} {
   color: red;
}
/* Less */
@color: red;
.@{color} {
   color: red;
}
/* 生成 */
.red {
  color: red;
}

3.类型: Stylus判断类型函数为typeof();Sass为type-of();Less暂无,只有判断某些固定类型的函数

  • 颜色:
    /* Stylus */
$color = #111111;
typeof($color)
// 返回 'rgba'

/* Sass */
$color: #111111;
type-of($color)
// 返回 color

/* Less */
@width: #111111;
iscolor(@color)
// 返回 true
  • 数值：
    /* Stylus */
$number = 10px;
typeof($number)
// 返回 'unit'

/* Sass */
$number: 10px;
type-of($number)
// 返回 number

/* Less */
@number: 10px;
isnumber(@number)
// 返回 true
  • 字符串: 字符串分为带有引号和未带引号两种
    /* Stylus */
$string = string;
typeof($string)
// 返回 'ident'
$string = "string";
typeof($string)
// 返回 'ident'

/* Sass */
$string: string;
type-of($string)
// 返回 string
$string: "string";
type-of($string)
// 返回 string

/* Less */
@string: "string"; 
isstring(@string)
// 返回 true
@string: string; 
isstring(@string)
// 返回 false
    去除引号
    /* Stylus */
$string = "string";
unquote($string)
/* Sass */
$string: "string";
unquote($string)
/* Less */
@string: "string";
e(@string)
// 返回 string
  • 数组: 使用空格或逗号隔开; Stylus和Less无法判断数组和对象的类型
    /* Stylus */
$list = "1",2,3,4;
// 或
$list = "1" 2 3 4;
typeof($list)
// 返回 'string'; 返回值为数组第一个元素的类型,判断对象也是一样的结果

/* Sass */
$list: 1,2,3,4;
// 或
$list: 1 2 3 4;
typeof($list)
// 返回 list

/* Less */
@list: 1,2,3,4;
// 或
@list: 1 2 3 4;
    下标: Stylus可以使用array[index]来显示数组的某个属性,并且Stylus下标从0开始,Less和Sass从1开始
    /* Stylus */ 
$content = 1 2 3;
$content[0]
// 返回 1
/* Sass */
$content: 2 3 4;
index($content,2) // 下标值: index(list,number) 
// 返回 1
/* Less */
@content: 2 3 4;
extract(@content,1); // 提取值: extract(list,index) 
// 返回 2
  • 对象: Less使用’分号‘分离,Stylus和Sass使用’逗号‘分离;Stylus和Less可以使用object[prop]写法
    /* Stylus */
$object = {
  name: "name",
  value: "value"
}
$object[name]
// 返回 "name"

/* Sass */
$object : (
  name: "name",
  value: "value"
)
typeof($object)
// 返回 'object'

/* Less */
@object : {
  name: "name";
  value: "value"
}
$object[name]
// 返回 "name"
  • Null: Less暂无此类型,会默认为字符串
    /* Stylus */
$content = null;
.stylus {
  content: typeof($content);    
}
// 返回 'null'
/* Sass */
$content: null;
.stylus {
  content: type-of($content);    
}
// 返回 null

4.作用域: 与javascript的作用域一致

.color{
  $color = red;
  color: $color;
}
// 或
$color = red;
.color{
  color: $color;
}
/* 生成 */
.color{
  color: red;
}
  • 全局变量(Sass): 在变量后添加!global可以设置为全局变量
    .var {
  $color: red !global;
}
.color {
  color: $color;
}
/* 生成 */
.color {
  color: red;
}

语法

1.循环

/* 循环对象 */
/* Stylus */
$color = {
  red: red,
  yellow: yellow
};
for $key,$value in $color {
  .{$key}{
	 color: $value;
  }
} 
   
/* Sass */
$color: (red: red, yellow: yellow);
@each $key,$value in $color {
  .#{$key} {
	color: $value;
  }
}

/* Less */
@color: {
  red: red;
  yellow: yellow
}
each(@color, {
  .@{key} {
    color: @value;
  }
})  
// 默认值@value,@key,@index
   
/* 生成 */
.red{
  color: red; 
}
.yellow{
  color: yellow;
}
 
/* 循环数字数组 */
/* Stylus */
for $index in range(1,2) {
  .ellipsis-{$index} {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $index;
	text-overflow: ellipsis;
	word-break: break-all;
  }
}
// 生成数组: range(start,end,step)
// 相同效果: range(1,2) == (1..2)

/* Sass */
@for $index from 1 through 2 { 
  .ellipsis-#{$index} {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $index;
	text-overflow: ellipsis;
	word-break: break-all;
  }
}
// @for $index from 1 through 2
// @for $index from 1 to 2
// through 包含2;to 不包含2

/* Less */
each(range(2), { 
  .ellipsis-@{index} {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: @index;
	text-overflow: ellipsis;
	word-break: break-all;
  }
})

/* 生成 */
.ellipsis-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  word-break: break-all;
}
.ellipsis-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-break: break-all;
}
  • Less中多次循环
    @padding:left,right;
@offset:10,20;
each(@padding,{
  each(@offset,.(@val){
	.padding-@{value}-@{val}{
	  padding-@{value}:@val*1px;
	}
  })
})
// 重新声明: each(list,.(@v,@k,@i){})
 
/* 生成 */
.padding-left-10 {
  padding-left: 10rpx;
}
.padding-left-20 {
  padding-left: 20rpx;
}
.padding-right-10 {
  padding-right: 10rpx;
}
.padding-right-20 {
  padding-right: 20rpx;
}

2.判断: Stylus和Sass使用if/else判断,Less使用when进行条件匹配

  • Less运算符: 或:or;非:not;与:and;等于:=(与Stylus和Sass的==不同),链接:https://less.bootcss.com/features/
  • Sass运算符: 在Less的基础上添加了部分javascript的运算符,链接:https://sass.bootcss.com/documentation/operators
  • Stylus运算符: 比Sass运算符更加丰富:https://stylus.bootcss.com/docs/operators.html
    /* Stylus */
$padding = {
  pd: top,
  pc: null,
  pm: null
}
$offset = 10,15;

for $key,$value in $padding {
  for $item in $offset {
    if($key==pc) {
	  .{$key}{$item}{
	    padding-top: $item * 1px;
		padding-bottom: $item * 1px;
	  }
    } else if($key==pm) {
	  .{$key}{$item}{
		padding-left: $item * 1px;
	    padding-right: $item * 1px;
	   }
	} else {
	   .{$key}{$item}{
		  padding{$value}: $item * 1px;
	   }
	}
  }
}
// *1px用于添加单位
 
/* Sass */
$padding:(pt,-top),(pc,null),(pm:null);
$offset:10,15;
@each $key,$value in $padding {
  @each $item in $offset {
	@if($key==pc){
	  .#{$key}#{$item}{
	  	padding-top:$item + px;
		padding-bottom:$item + px;
	  }
	} @else if($key==pm){
	  .#{$key}#{$item}{
		padding-left:$item + px;
	    padding-right:$item + px;
	  }
	} @else{
	  .#{$key}#{$item}{
	    padding#{$value}: $item + px;
	  }
	}
  }
}

/* Less */
@padding: {
  pt: '-top';
  pc: '';
  pm: '';
}
@offset: 10, 20, 30;
each(@padding, {
  @prop: e(@value);
  each(@offset, .(@val) {
	.@{key}@{val} when(@key=pc) {
	  padding-top:~'@{val}px';
	  padding-bottom:~'@{val}px';
	}
	.@{key}@{val} when(@key=pm) {
	  padding-left:~'@{val}px';
	  padding-right:~'@{val}px';
	}
	.@{key}@{val} when not(@key=pc) and not(@key=pm) {
	  padding@{prop}:~'@{val}px';
	}
  })
})
// ~'@{val}px'与ES6中的`${val}px`效果一致

/* 生成 */
.pt10{
  padding-top: 10rpx;
}
.pt20{
  padding-top: 20rpx;
}
.pt30{
  padding-top: 30rpx;
}
.pc10{
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}
.pc20{
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
.pc30{
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}
.pm10{
  padding-left: 10rpx;
  padding-right: 10rpx;
}
.pm20{
  padding-left: 20rpx;
  padding-right: 20rpx;
}
.pm30{
  padding-left: 30rpx;
  padding-right: 30rpx;
}
  • 三目运算(Stylus)
    /* Stylus */ 
$content = false;
.content {
  content: $content?10:20;
}
/* Less */ 
@content:false;
.content {
  content: if(@content,10,20);
}
/* 生成 */
.content {
  content: 20;
}
  • 除号/加号: Stylus和Sass在进行除法时需要添加()
    /* Stylus */
.content {
  content: (10/20px);  
}
/* Sass */
.content {
  content: (10/20px);  
}
/* Less */
.content {
  content: 10/20px;  
}
/* 生成 */
.content {
  content: 0.5px;  
}

/* Sass */
.content{
  content: 10+px;
}
// Sass可以实现字符串拼接,在Less和Stylus中可以使用10*1px实现
// Less可以实现拼接,但是拼接点会有空格生成

/* Less */
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}
/* 生成 */
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

函数

1.生成类

/* Stylus */
setContent($color=green, $font, args...) {
  .content {
	color: $color;
	font-size: $font;
	box-shadow: args;
  }
}
setContent(red, $font:20, 1px 1px 1px 1px)
   
/* Sass */
@mixin setContent($color:green,$font:10,$args...) {
  .content {
	color: $color;
	font-size: $font;
	box-shadow: $args;
  }
}
@include setContent(red,20,(1px 1px 1px 1px));

/* Less */
.setContent(@color:green,@font,@args...) {
  .content{
     color:@color;
	 font-size: @font;
	 box-shadow: @args;
  }
}
.setContent(red,20,1px 1px 1px 1px);
 	
/* 生成 */
.content {
  color: red;
  font-size: 20;
  -webkit-box-shadow: 1px 1px 1px 1px;
          box-shadow: 1px 1px 1px 1px;
}

2.生成样式

/* Stylus */
setContent($color=green, $font, args...) {
  color: $color;
  font-size: $font;
  box-shadow: args;
}
.content {
  setContent(red, $font: 20, 1px 1px 1px 1px)
}
// 或
setContent() {
   color: arguments[0]; // arguments为参数列表
   font-size: arguments[1];
   box-shadow: arguments[2];
}
.content {
   setContent: red,20,(1px 1px 1px 1px); 
}
// 执行函数: { 函数名: 参数 }
    
/* Sass */
@mixin setContent($color:green, $font:10, $args...) {
  color: $color;
  font-size: $font;
  box-shadow: $args;
}
.content {
  @include setContent(red, 20, (1px 1px 1px 1px));
}
	
/* Less */
.setContent(@color:green,@font,@args...) {
  color:@color;
  font-size: @font;
  box-shadow: @args
}
.content{
  .setContent(red,20,1px 1px 1px 1px);
}
  	
/* 生成 */
.content {
  color: red;
  font-size: 20;
  -webkit-box-shadow: 1px 1px 1px 1px;
          box-shadow: 1px 1px 1px 1px;
}

3.返回值

/* Stylus */
add($a, $b) {
  return $a+$b // return可以省略
}
.padding {
  padding: add(15px, 5);
}
/* Sass */
@function add($a, $b) {
  @return $a+$b
}
.padding {
  padding: add(15px, 5);
}
/* Less */
.add(@a, @b) {
  @c: @a+@b
}
.padding {
  padding: .add(15px, 5)[@c]
}
// 这里可以将返回值看成一个对象
/* 生成 */
.padding {
  padding: 20px;
}
  • 样式优先级(Less)
    .color() {
  .content {
    color:red;
    font-size:10px;
  }
}
.color() !important
/* 生成 */
.content{
  color:red !important;
  font-size:10px !important;
}
  • 匹配模式(Less): 函数名相同,通过参数来匹配对应函数
    /* 单个参数值不同 */
.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) { // @_表示所有情况都执行
  display: block;
}
@switch: light;
.class {
  .mixin(@switch; #888);
}
/* 生成 */
.class {
  color: #a2a2a2;
  display: block;
}
 
/* 参数数量不同 */
.mixin(@a) {
  color: @a;
}
.mixin(@a; @b) {
  color: fade(@a; @b);
}
.mixin(red)
/* 生成 */
color: red;

嵌套

body{
  font-size: 20px;
  .content{
    color: red;
  }
}
/* 生成 */
body{
  font-size: 20px;
}
body .content{
  color: red;
}

1.父级

.content{
   content: 10px;
   &:hover{
      content: 20px;
   }
}
/* 生成 */
.content{
  content: 10px;
}
.content:hover{
  content: 20px;
}
  • 嵌套层级(Stylus)
    .body {
  .content {
    .red {
	  ^[0]:hover { // ^[0] == ~/ == /.body
		color: red;
	  }
	  ^[-2]:hover { // ^[-2] == ../../
		color: red;
	  }
	  ^[0..1]:hover {
		color: red;
	  }
    }
  }
}
// ^[N]表示从第N层嵌套开始;-N时执行顺序相反;^[N..M]表示从第N层到第M层
// ~/表示最外层;../表示上一层;/表示根目录
/* 生成 */
.body:hover {
  color: #f00;
}
.body:hover {
  color: #f00;
}
.body .content:hover {
  color: #f00;
}
  • 根目录(Sass)
    .body {
   .content {
      @at-root .red {
		color:red;	
	  }
   }
}
/* 生成 */
.red{
  color:red;	
}
  • 属性嵌套(Sass)
    .content{
   font:{
	 size:10px;
	 weight:100; 
   }
}
/* 生成 */
.content {
  font-size: 10px;
  font-weight: 100;
}

2.冒泡: 自动编译到文件最外层

.body {
  @media (min-width: 1000px) {
	content: 2
  }
}
/* 生成 */
@media (min-width: 1000px) {
  .body {
	 content: 2;
  }
}

继承

/* Stylus/Sass */
.red {
  color: red;
}
.content {
  @extend .red;
  content: 10;
}
/* Less */
.red {
  color: red;
}
.content:extend(.red) {
  content: 10;
}
// 或
.red {
  color: red;
}
.content {
  .red;
  content: 10;
}
/* 生成 */
.red,.content {
  color: #f00;
}
.content {
  content: 10;
}
  • 占位符(Stylus/Sass): Stylus中使用$替换.或#;Sass中使用%:使用占位符可以不将样式输出到css文件
    /* Stylus */
$red {
  color: red;
}
.content {
  @extend $red;
  content: 10;
}
/* Stylus */
%red {
  color: red;
}
.content {
  @extend %red;
  content: 10;
}
/* 生成 */
.content {
  color: #f00;
}
.content {
  content: 10;
}
  • 嵌套继承(Stylus/Less)
    /* Stylus */ 
.body{
  .red{
	color:red;
   }
}
.content{
   @extend .body .red;
   font-size:20;
}
/* Less */
.body{
  .red{
	color:red;
   }
}
.content{
   .body .red;
   font-size: 20;
}
// 或
.content:extend(.body .red){
   font-size: 20;
}
/* 生成 */
.body .red,.content {
  color: #f00;
}
.content {
  font-size: 20;
}

Stylus扩展

var = 10
.content 
  content var 
// Stylus简化写法
// 变量省去$
// 样式省去 '缩进'替换'花括号'和'冒号'/'换行'替换'分号'
  • Sass
    $var: 10
.content 
  content: $var 
// Scss的初始版;'缩进'替换'花括号'/'换行'替换'分号' 
/* 生成 */
.content {
  content: 10;
}
  • 判断/循环后置
    first-even(nums)
  return n if n % 2 == 0 for n in nums
first-even(1 3 5 5 6 3 2)
// 返回 6
  • nib: Stylus的扩展插件
    链接:http://stylus.github.io/nib/
    // nib的positions.stylus源码
// 关于position的简略写法

-pos(type, args)
  i = 0
  position: unquote(type)
  for j in (1..4)
    if length(args) > i
      {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
    i += 1
fixed()
  -pos('fixed', arguments)
absolute()
  -pos('absolute', arguments)
relative()
  -pos('relative', arguments)

.content{
   fixed: right;
}
/" 生成 "/
.content {
  position: fixed;
  right: 0;
}
weixin_43900440
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS预处理器的对比 — Sass、Less和Stylus
weixin_30393907的博客
01-15 133
本文根据Johnathan Croom的《sass vs. less vs. stylus: Preprocessor Shootout》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-styl...
Vue进阶（幺柒捌）：延伸阅读Sass、Scss、Less与Stylus编程特性_stylus sass
2401_84411557的博客
04-29 257
h1 {color;border3pxsoliddarken/*边框颜色在$color的基础上变暗50%*//* 返回的颜色在@color基础上变亮10% *//* 返回的颜色在@color基础上变暗10%*//* 返回的颜色在@color基础上饱和度增加10% *//* 返回的颜色在@color基础上饱和度降低10%*//* 返回的颜色在@color基础上色调增加10 *//* 返回的颜色在@color基础上色调减少10 */
sass,less,stylus三者的比较
gkj1995的博客
09-24 1979
CSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。 1.什么是 CSS 预处理器 CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用...
Vue进阶（幺柒陆）：CSS 预编译语言 Sass、Scss、Less 和 Stylus
IT全栈 华强工作室
03-14 4251
CSS预处理器定义了一种新的语言，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。CSS 预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS 预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。...
CSS预处理器-Sass、Less和Stylus-介绍和使用
JackieDYH的博客
05-12 2766
发挥CSS预处器的作用是一种很有挑战性的事情。CSS预处器有不同的语言，有不同的语法和功能。 在这篇文章中,我们将介绍三种不同CSS预处器的蛮量、功能以及他们的好处——sass、less和stylus。 介绍 CSS预处理器是一种语言，用来编写一些CSS的特性,而且无需考虑浏览器兼容性的问题。他们通过编译的代码编写成一般的CSS,不要在停留在石器时代了。CSS预处器有成千上万的特性,在本文中我们将一一介绍。让我们开始。 语法 在使用CSS预处器之前最重要的是对语法的理解，幸运的是，这三种..
grunt-scss-less-stylus-css:Grunt 任务将 LESS 转换为 SCSS、CSS 和 Stylus，将 SCSS 转换为 LESS、Stylus 和 CSS，并将 Stylus 转换为 SCSS、LESS 和 CSS
06-17
grunt-scss-less-stylus-css Grunt 任务将 LESS 转换为 SCSS、CSS 和 Stylus，将 SCSS 转换为 LESS、Stylus 和 CSS，并将 Stylus 转换为 SCSS、LESS 和 CSS ＃＃安装 $ npm install --save-dev grunt-scss-less-...
stylus-converter::hammer_and_wrench::robot: A tool that converts a stylus into scss, or less, or other precompiled CSS. 一个将 stylus 转换为 scss 或 less 或其他预编译 CSS 的工具
05-11
一种将手写笔转换为scss（或更少）或其他预编译CSS的工具。 手写笔转换器配置 转换器选项 属性 描述 类型 接受值 默认 quote 转换字符串时要使用的引号类型 细绳 ' / " ' conver 转换类型，例如转换为scss语法 ...
django-static-precompiler：Django Static Precompiler提供了模板标签和过滤器，用于编译CoffeeScript，LiveScript，SASS SCSS，LESS，Stylus，Babel和Handlebars。 它适用于内联代码和外部文件
01-30
3. **SASS/SCSS**：CSS的预处理器，允许使用变量、嵌套规则、混合、函数等，提高了CSS的组织性和复用性。 4. **LESS**：类似SASS，也是CSS的预处理器，提供动态行为如变量、嵌套规则等。 5. **Stylus**：一个灵活...
alloy:CSS 预处理器的 Web API。 支持 SASS、SCSS、LessCSS 和 Stylus
05-30
它还需要安装 Node.js 和 NPM 才能编译 LessCSS 和 Stylus 代码。 最后，您需要安装 Java 1.4 或更高版本才能使用yui-compressor gem 压缩 CSS。 安装 要在本地运行 Alloy，您首先需要克隆这个 repo： git clone ...
Chrome插件分享-Stylus安装包
最新发布
06-14
**Stylus是一款强大的用户样式管理器，专为Chrome浏览器设计。它允许用户自定义网站的外观，通过编写CSS样式来改变网页的布局和颜色方案，以满足个人浏览习惯和需求。** **Stylus_1.5.46是这款插件的最新版本，提供...
sass、less、stylus的区别
onepunchmen00的博客
01-12 1118
基本的写法区别 less： 标准的css语法 ，有花括号和冒号 h1 { color: #0982C1; } sass： 当然也可以写成上面那样 同时也可以不写花括号 h1 color: #0982c1 stylus： 花括号和冒号都可以不写 比较自由 h1 color #0982C1 变量上的差异 Less 变量都是用@开头的 @maincolor : #092873; @s...
stylus/sass/less区别
笑望灬星辰
04-07 295
stylus/sass/less区别 均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性 Scss 和 less 语法较为严谨， less要求⼀定要使⽤⼤括号“{}”， Scss 和 Stylus 可 以通过缩进表示层次与嵌套关系 Scss ⽆全局变量的概念， less和 Stylus 有类似于其它语⾔的作⽤域概念 Sass 是基于 Ruby 语⾔的，⽽ less和 Stylus 可以基于 NodeJS NPM 下载相应库后 进⾏编译； ...
三种可编译型CSS语言Sass,Less,Stylus的使用感受
糯米糊糊的专栏
11-12 1万+
花了两天时间学习了 sass, less, stylus的基本语法和简单使用, 谈谈感受. 1.
style对象和less/scss互相转换，驼峰转中横线，支持嵌套转换
luck_lin
01-11 564
emotion style、Inline style对象和less/scss互相转换,支持格式化缩进，camelCase、kebab-case互相转换，支持嵌套。
saas(sccs)、less、stylus三者的区别
weixin_38680881的博客
04-23 1780
saas(sccs)、less、stylus三者的区别 在用css写样式的时候，我们可以发现css是存在着挺多的问题的，列举一二如下： 1、css语法不够强大，比如css的选择器无法进行嵌套，导致css中存在较多重复的选择器语句； 2、css无法定义变量以及没有合理的样式复用机制，导致整体css样式难以维护； 于是，css预处理器应运而生，目前较为常用的sass(scss)、stylus、less都是其中的佼佼者，我在项目中曾用过其中的scss和stylus,今天来总结一下它们的区别。 一、变量 Sass
css预处理器-stylus 很少人用
wangxinwang996的博客
04-19 380
每个CSS预处理器都以自己独特的方式完成给定的任务，使开发人员能够使用极其强大的工具以极快的速度编写干净的代码。另一方面，Stylus仍然是Node.JS开发人员的流行选择，因为它结合了Sass的广泛逻辑能力和LESS的简单性。如果你想了解更多关于CSS的信息，不妨报名参加Web前端培训，有理论和实践项目一起学习，学以致用，在项目中锻炼自己的思维能力和动手能力，获得快速成长。在index2.styl文件中编写的代码 会 自动编译，并将生成的css代码，放置在index2.css文件中。
详说css与预处理器（以及less、sass、stylus的区别）
热门推荐
ly2983068126的博客
08-31 4万+
CSS(Cascading Style Sheet)被译为级联样式表，做为一名前端从业人员来说，这个专业名词并不陌生，在行业中通常称之为“风格样式表（Style Sheet）”，它主要是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML（XHTML）中各标签的显示属性。可以使人更能有效的控制Web页面（或Web应用程序）外观，可以精确指定Web元素位置，外观以及创建特殊效果的能力。
scss和stylus
07-27
SCSS和Stylus都是CSS预处理器，它们可以帮助开发者更高效地编写和组织CSS代码。它们提供了一些功能和语法的扩展，使得CSS的编写更加简洁和灵活。 SCSS（Sassy CSS）是Sass的一种语法扩展，它兼容CSS的语法，并且提供了一些额外的功能，比如嵌套规则、变量、混合（mixin）、继承等。SCSS使用的是`.scss`文件扩展名。 Stylus是一种使用类似JavaScript的语法来编写CSS的预处理器。它具有简洁的语法和强大的功能，可以让开发者更自由地表达样式。Stylus使用的是`.styl`文件扩展名。 无论选择使用SCSS还是Stylus，它们都可以提高CSS编写的效率和可维护性。选择哪种预处理器取决于个人偏好和项目需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值