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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:CSS拾遗篇之定位体系和包含块 & html,body 的探究
下一篇:JS拾遗篇之parseInt

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月04日 04时52分20秒