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】865. Smallest Subtree with all the Deepest Nodes 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- Bristol大学密码学博士生的五十二个知识点
Bristol大学密码学博士生的五十二个知识点 这个系列,是Bristol大学的密码安全工作组为密码学和信息安全相关的博士准备了52个基本知识点. 原地址:http://bristolcrypto.b ...
- <学习opencv>图像、视频和数据文件
/*=========================================================================*/ // openCV中的函数 /*====== ...
- MA8621带SD读卡的USB 2.0高速3端口HUB方案芯片|MA8621中文规格书|USB 2.0方案
MA8621说明 MA8621是USB 2.0高速3端口集线器的高性能解决方案,带有SD卡控制器,完全符合通用串行总线规范2.0.控制器继承了先进的串行接口技术,当3个DS(下游)端口同时工作时,功耗 ...
- 【jvm】03-写了final就是常量池了么
[jvm]03-写了final就是常量池了么 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请顺手点 ...
- Linux下设置普通用户使用sudo命令
1.登录root用户 2.增加root用户对文件sudoers的写权限 chmod u+w /etc/sudoers 3.编辑sudoers,把用户mysql添加进去 vi /etc/sudoers ...
- linux 部署.net core 环境
Linux版本Ubuntu 16.04 .net core 下载地址:https://dotnet.microsoft.com/download/dotnet-core/2.1 虽然现在现在.net ...
- .NET 云原生架构师训练营(责任链模式)--学习笔记
目录 责任链模式 源码 责任链模式 职责链上的处理者负责处理请求,客户只需要将请求发送到职责链上即可,无需关心请求的处理细节和请求的传递,所以职责链将请求的发送者和请求的处理者解耦了 何时使用:在处理 ...
- Docker下安装Nacos
1:使用docker获取nacos服务镜像 docker pull nacos/nacos-server(不加版本号表示获取最新版本) 2:查看是否成功下载nacos镜像 docker images ...
- vue 在实现关键字远程搜索时出现数据不准确的原因
实现通过输入关键字查询项目, 页面搜索规则框部分 js部分 之前通过在data中定义一个变量,然后在methods中filterFn方法获取当时输入的值去后台请求数据,然后把请求的数据存放在state ...