CSS之 sass、less、stylus 预处理器的使用方式
更详细区别参考文档: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 预处理器的使用方式的更多相关文章
- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?
最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...
- Vue-cli 3.0 使用Sass Scss Less预处理器
项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less; 预处理器 你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus).如果当时没有选好, 内置的 w ...
- PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...
- C Primer Plus之C预处理器和C库
编译程序前,先由预处理器检查程序(因此称为预处理器).根据程序中使用的预处理器指令,预处理器用符号缩略语所代表的内容替换程序中的缩略语. 预处理器不能理解C,它一般是接受一些文件并将其转换成其他文本. ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- CSS 预处理器(框架)初探:Sass、LESS 和 Stylus
现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...
- 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
- 详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
[大伽说]如何运维千台云服务器 » CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.L ...
随机推荐
- 【LeetCode】223. Rectangle Area 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/rectangl ...
- 【LeetCode】113. Path Sum II 解题报告(Python)
[LeetCode]113. Path Sum II 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fu ...
- Exploration(hdu5222)
Exploration Accepts: 190 Submissions: 976 Time Limit: 30000/15000 MS (Java/Others) Memory Limit: ...
- 洛谷 P3431:[POI2005]AUT-The Bus(离散化+DP+树状数组)
题目描述 The streets of Byte City form a regular, chessboardlike network - they are either north-south o ...
- jquery控制元素的隐藏和显示的几种方法
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...
- Java面向对象程序设计笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 实践练习 Java面向对象作业目录(作业笔记) 第1章 Java面向对象笔记 • [第1章 面向对象] 第2章 Java面向对象笔记 • ...
- 年功序列c++游戏
题目描述 在虚拟国度里多了很多 Virtual oier,为了树立对后辈的威信,从第 11 个 Virtual oier 开始的 oier 们搞起了年功序列的制度. 虚拟国度的创始人 oier Cht ...
- RPC框架下实现文件上传到linux服务器
一.前端使用element -ui 的upload组件 :data 表示额外传递的参数, :header 表示设置请求头参数,如,token等, action表示后台api接口的地址 二. conto ...
- @RestController和@Controller的关系
@RestController注解,相当于@Controller+@ResponseBody两个注解的结合
- 图片上传,直接在网页中显示(支持IE,谷歌,火狐浏览器)
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...