更详细区别参考文档:https://blog.csdn.net/pedrojuliet/article/details/72887490

使用变量:

  sass:  使用 $ 符号定义变量,如: $base_color: #efefef

   less: 使用 @ 符号定义变量,如:@base_font_size: 16px

  stylus: 对变量没有任何设定(变量不能以@符号开头),变量之间可以使用 “=”, “空格”或者 “:”,如:  base_font_color: red,   borderwidth=1px,  borderColor #cacaca

导入操作(@import):

  如:

base  css文件
/* file.{type} */
body {
background: #000;
} xxx css文件
@ import "1.css";
@ import "file.{type}";
p {
background: #092873;
} 结果
@ import "1.css";
body {
background: #000;
}
p {
background: #092873;
}

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

  sass继承:通过 @extend来实现代码组合声明(stylus也可以使用此方法实现继承)

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

  less继承

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

混入(Mixins):有点像函数或者宏,当某段css经常要在多个元素中使用时,可以为这些共用的css定义一个Mixin,然后在需要的地方引入该Mixin即可

  sass语法:

/* 定义一个混入语法,接受一个变量,默认值为2px,可选 */
@mixin err($borderWidth:2px){
border:$borderWidth solid #cacaca
color: #cacaca
} .generic-error {
padding: 20px;
margin: 4px;
@include error(5px); /* 调用混入语法,传入一个参数得到 border:5px solid #cacaca*/
}

  stylus语法

error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;/* 调用混入语法,传入一个参数得到 border:5px solid #cacaca*/、
error();
}

  

怎能让着不停燃烧的心,就这样耗尽消失在平庸里

CSS之 sass、less、stylus 预处理器的使用方式的更多相关文章

  1. CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?

    最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...

  2. Vue-cli 3.0 使用Sass Scss Less预处理器

    项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less; 预处理器 你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus).如果当时没有选好, 内置的 w ...

  3. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

  4. C Primer Plus之C预处理器和C库

    编译程序前,先由预处理器检查程序(因此称为预处理器).根据程序中使用的预处理器指令,预处理器用符号缩略语所代表的内容替换程序中的缩略语. 预处理器不能理解C,它一般是接受一些文件并将其转换成其他文本. ...

  5. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  6. CSS 预处理器(框架)初探:Sass、LESS 和 Stylus

    现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...

  7. 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  8. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

  9. 详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    [大伽说]如何运维千台云服务器 »   CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.L ...

随机推荐

  1. 【LeetCode】223. Rectangle Area 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/rectangl ...

  2. 【LeetCode】113. Path Sum II 解题报告(Python)

    [LeetCode]113. Path Sum II 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fu ...

  3. Exploration(hdu5222)

    Exploration  Accepts: 190  Submissions: 976  Time Limit: 30000/15000 MS (Java/Others)  Memory Limit: ...

  4. 洛谷 P3431:[POI2005]AUT-The Bus(离散化+DP+树状数组)

    题目描述 The streets of Byte City form a regular, chessboardlike network - they are either north-south o ...

  5. jquery控制元素的隐藏和显示的几种方法

    使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...

  6. Java面向对象程序设计笔记 • 【目录】

    持续更新中- 我的大学笔记>>> 章节 内容 实践练习 Java面向对象作业目录(作业笔记) 第1章 Java面向对象笔记 • [第1章 面向对象] 第2章 Java面向对象笔记 • ...

  7. 年功序列c++游戏

    题目描述 在虚拟国度里多了很多 Virtual oier,为了树立对后辈的威信,从第 11 个 Virtual oier 开始的 oier 们搞起了年功序列的制度. 虚拟国度的创始人 oier Cht ...

  8. RPC框架下实现文件上传到linux服务器

    一.前端使用element -ui 的upload组件 :data 表示额外传递的参数, :header 表示设置请求头参数,如,token等, action表示后台api接口的地址 二. conto ...

  9. @RestController和@Controller的关系

    @RestController注解,相当于@Controller+@ResponseBody两个注解的结合

  10. 图片上传,直接在网页中显示(支持IE,谷歌,火狐浏览器)

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...