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】380. Insert Delete GetRandom O(1) 解题报告(Python)
[LeetCode]380. Insert Delete GetRandom O(1) 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxu ...
- 使用 Eclipse 创建一个静态的登录页面
要求: 使用 Eclipse 创建一个静态的登录页面 实现步骤: 在 Eclipse 中,点击"File",显示菜单,选择"New" "Other&q ...
- Android物联网应用程序开发(智慧园区)—— 设置传感器阈值对话框界面
效果图: 自定义对话框布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...
- SpringBoot 之 Dao层模拟数据库操作
单表操作: # src/main/java/com/wu/dao/DepartmentDao .java @Repository public class DepartmentDao { privat ...
- [学习笔记] Oracle体系结构、下载安装、创建实例、客户端工具、网络服务名、服务管理
Oracle体系结构 实例: 一个操作系统只有一个 Oracle 数据库 一个 Oracle 数据库可以有多个 Oracle 实例(通常只安装一个实例) 一个实例对应着一系列的后台进程和内存结构 表空 ...
- CSS基础 CSS常见错误排错思路
- Ubuntu18.04升级内核后修改grub文件启动顺序
采坑:之前线上的服务器内核是4.15.0,后面有的服务跑不起来,说是要升级内核,于是就升级了,然后改了/etc/default/grub的启动顺序,改错了就启动不起来了,哈哈.后面多次尝试还是改成功了 ...
- 初识python 之 爬虫:爬取某电影网站信息
注:此代码仅用于个人爱好学习使用,不涉及任何商业行为! 话不多说,直接上代码: 1 #!/user/bin env python 2 # author:Simple-Sir 3 # time:201 ...
- Linux系统使用SSH登录之前如何显示横幅消息
OpenSSH有一个名为Banner的内置选项.在允许身份验证之前,将指定文件的内容发送给远程用户.如果Banner选项设置为none,那么在ssh登录时就不会显示任何Banner消息.默认情况下,不 ...
- sqlserver - 查出的结果集,集成为json串放在一个字段里
1.效果 2.sql SELECT top 20 (select [name] as [名字] from staffBasicInfo For JSON PATH,ROOT('第一级key')) k ...