sass、less、stylus的区别

news/2024/10/31 1:33:24/

基本的写法区别
less: 标准的css语法 ,有花括号和冒号

h1 {color: #0982C1;
}

sass: 当然也可以写成上面那样 同时也可以不写花括号

h1color: #0982c1

stylus: 花括号和冒号都可以不写 比较自由

h1color #0982C1

变量上的差异
Less 变量都是用@开头

@maincolor : #092873;
@siteWidth : 1024px;
@borderStyle : dotted;
body {color: @maincolor;border: 1px @borderStyle @mainColor;max-width: @siteWidth;
}

sass变量必须是以$开头

$maincolor : #092873;
$siteWidth : 1024px;
$borderStyle : dotted;
body {color: $maincolor;border: 1px $borderStyle $mainColor;max-width: $siteWidth;
}

stylus的变量就没有那么多限制了 可以是 $,也可以是别的字符



嵌套写法相同
运算符也相同

body {margin: (14px/2);top: 50px + 100px;right: 80 * 10%;
}

继承extend
sass可通过@extend来实现代码组合声明

.message {border: 1px solid #ccc;padding: 10px;color: #333;
}
.success {@extend .message;border-color: green;
}

stylus同样也是通过@extend

.message {padding: 10px;border: 1px solid #eee;
}.warning {@extend .message;color: #E2E21E;
}

而 less里的继承更像是mixin写法

.message {border: 1px solid #ccc;padding: 10px;color: #333;
}
.success {.message;border-color: green;
}

混合mixin
sass的混合需要通过@include来实现

@mixin error($borderWidth: 2px) {border: $borderWidth solid #F00;color: #F00;
}
.generic-error {padding: 20px;margin: 4px;@ include error(); //这里调用默认 border: 2px solid #F00;
}

less的混合

.error(@borderWidth: 2px) {border: @borderWidth solid #F00;color: #F00;
}
.generic-error {padding: 20px;margin: 4px;.error(); //这里调用默认 border: 2px solid #F00;
}

stylus的混合

error(borderWidth= 2px) {border: borderWidth solid #F00;color: #F00;
}
.generic-error {padding: 20px;margin: 4px;error(); 
}

参考https://blog.csdn.net/pedrojuliet/article/details/72887490


http://www.ppmy.cn/news/307851.html

相关文章

3.1_7 JavaSE入门 P6 【面向对象】概述封装

相关链接 Excel目录 目录 Part6 【面向对象】概述&封装1 面向对象概述1.1 面向对象思想1.1.1 面向过程思想与面向对象思想1.1.2 面向过程特点与面向对象特点 1.2 类与对象概述 2 对象的内存图2.1 一个对象的内存图2.2 两个对象的内存图(共用方法区)2.3 两个对象的内存图(两…

转载:iPhone8重新设计发布延期,iPhone8或推迟上市时间

从事ios开发两年多,本人也算是苹果的伪粉吧,从去年都关注iPhone8的动态,到了今年就听说最新的苹果手机估计赶不上今年苹果十周年发布了,原因可能是苹果公司遇到一个技术问题,影响了iPhone8的如期推出。 今年是iPhone的…

7stars

<html><head><style><!--body, p, div,td,input {font:menu;line-height: 150%}.div { font-family: 宋体; font-size: 12px; line-height: 150% }--></style><title>7Stars</title></head><body><script language&q…

Java seven

今天学习了while循环和do while循环 进行了相应循环的简单练习 并从中掌握了一些重要的知识点 进行嵌套循环的学习 并合理的完成了菱形的代码编写 所接触的java与C语言有较大的的类似之处 public class Main { public static void main(String[] args) {for (int i 0;i < …

SCSS

一、Scss 1.语法 变量 使用$符号开头遵循css选择器 可以包含-,_。尽量见名知意 $jd_red: #f00; 颜色变量 $my-width: 20px; 数值变量 $normal-content: “见名知意”; $my-border-style:solid; 样式变量 $my_border: 1px solid $jd_red; 变量中引入其他变量 注意&#xff1a; 1…

SASS 和 SCSS 的区别

原文 Difference Between SASS and SCSS SASS&#xff08;Syntactically Awesome Style Sheets&#xff09;是一种由 Hampton Catlin 设计、Chris Eppstein 和 Natalie Weizenbaum 开发的样式表语言。 它是一种预处理器脚本语言&#xff0c;将被编译或解释为 CSS。 Sass Scri…

秒懂设计模式之装饰者模式(Decorator Pattern)

定义 装饰模式是在不必改变原类和使用继承的情况下&#xff0c;动态地扩展一个对象的功能。它是通过创建一个包装对象&#xff0c;也就是装饰来包裹真实的对象 使用场景 需要在运行时动态的给一个对象增加额外的职责时候需要给一个现有的类增加职责&#xff0c;但是又不想通过…

SSD7~

又搬来了一个适合嵌入式的框架哦 对计算和内存的高需求是将现有目标检测网络部署到嵌入式设备中的最大挑战。现有的轻量级目标检测器直接使用轻量级神经网络架构&#xff0c;如MobileNet或在大尺度分类数据集上预先训练&#xff0c;导致网络结构灵活性差&#xff0c;不适用于某…