CSS预处理器
发布日期:2022-02-22 16:04:50
浏览次数:25
分类:技术文章
本文共 2120 字,大约阅读时间需要 7 分钟。
CSS预处理器为CSS增加了编程的特性,如使用变量,简单的逻辑程序,函数等,再编译成css文件,供项目使用。好处:简洁,适应性强,可读性强,易于代码维护。
- Sass:两套语法规则:1. 用缩进作为分割符来区分代码块,可以省略{ } 和 ; 2. 用 { } 作为分隔符 (又称Scss)
- Less:使用{ } 样式嵌套。
- Stylus:主要用来给Node项目进行CSS预处理支持。Stylus同时支持缩进和CSS常规样式书写规则。
特性
变量
sass声明变量 $变量名:变量值
$mainColor:#943; //声明变量 color: $mainCOlor; // 使用变量
less声明变量 @变量名:变量值
@mainColor:#943; //声明变量 color: @mainCOlor; // 使用变量
stylus声明变量 变量名 = 变量值 $变量名 = 变量值;
$mainColor = #943; mainColor = #943; //声明变量 color: $mainCOlor; color: mainCOlor // 使用变量
注意:如果我们使用“@”符号开头来声明(0.22.4)变量,Stylus会进行编译,但其对应的值并不会赋值给变量。换句话说,在Stylus中不要使用“@”符号开头声明变量。
Mixins
Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用。Minxins被当做一个公认的选择器,还可以在Mixins中定义变量或者默认参数。
sass的Mixins
/*声明一个Mixin叫作“error”*/@mixin error($borderWidth:2px){ 参数$开头,:隔开 border:$borderWidth solid #f00; color: #f00;}/*使用 @include 调用error Mixins*/.generic-error { @include error();/*直接调用error mixins*/}.login-error { @include error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/}
less的Mixins
将mixins看成是一个类选择器/*声明一个Mixin叫作“error”*/.error(@borderWidth:2px){ 参数名以@开头,默认值为2px border:@borderWidth solid #f00; color: #f00;}/*调用error Mixins*/.generic-error { .error();/*直接调用error mixins*/}.login-error { .error(5px);/*调用error mixins,并将参数@borderWidth的值重定义为5px*/}
stylus的Mixins
不使用符号,直接声明/*声明一个Mixin叫作“error”*/error(borderWidth=2px){ 参数之间用 = border:borderWidth solid #f00; color: #f00;}/*调用error Mixins*/.generic-error { error();/*直接调用error mixins*/}.login-error { error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/}
预处理器的作用域:scoped
Sass中没有全局变量概念
stylus,less可以支持全局和局部变相,会向上级查找,找到根为止嵌套
通过选择器的嵌套来实现继承,减少代码量,增加可读性
{ } 嵌套 ,& 引用父选择器,继承
sass,stylus的继承:把一个选择器中的样式继承到另一个选择器上,使用@extend
.block { margin: 10px 5px;}p { @extend .block;/*继承.block选择器下所有样式*/ border: 1px solid #eee; }
less的继承
不是在选择器上继承,而是将Mixins中的样式嵌套到每个选择器里面。缺点:每个选择器中都会有重复的样式产生。.block { margin: 10px 5px; padding: 2px;}p { .block;/*继承.block选择器下所有样式*/ border: 1px solid #eee; }
运算
less:
@full_page: 960px;@half_page: @full_page / 2;
sass可以处理无法识别的度量单位,并将其输出
导入
CSS中 @import 导入样式会增加http请求
@import "reset.css"
持续更新中~
转载地址:https://blog.csdn.net/Conradine_Lian/article/details/109428141 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月04日 04时52分20秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
C# Monitor.TryEnter 源码跟踪
2019-04-21
Linux链接库四(多个库文件链接顺序问题)
2019-04-21
I - Supermarket
2019-04-21
python 内置函数 map filter reduce lambda
2019-04-21
self.navigationbar的设置总汇
2019-04-21
使用@AspectJ注解开发Spring AOP
2019-04-21
Open JDk 源码下载地址
2019-04-21
nyoj 三国志 (Dijkstra + 01背包)
2019-04-21
【BZOJ2870】—最长道路Tree(边分治)
2019-04-21
【BZOJ2594】【WC2010】—水管局长数据加强版(LCT维护最小生成树)
2019-04-21
【leetcode 简单】第四题 罗马数字转整数
2019-04-21
WPF:DropShadowEffect 生效
2019-04-21
工具--在一台电脑中安装两个jdk版本
2019-04-21
Javascript DIV菜单代替alert
2019-04-21
C++虚函数
2019-04-21
Git 标签管理
2019-04-21
MySQL 安装与配置
2019-04-21
Splash Lua 脚本
2019-04-21
决策树 绘图
2019-04-21