CSS预处理器

CSS预处理器如Sass, Less和Stylus为CSS引入了变量、Mixins、作用域等功能,提高了代码的可读性和维护性。Sass有两套语法规则,Less使用{ }进行样式嵌套,Stylus同时支持两种规则。预处理器允许变量声明、Mixins复用、作用域控制和嵌套选择器,减少了代码冗余。Sass和Stylus支持@extend实现继承,而Less通过Mixins实现类似功能,但可能导致样式重复。" 126175763,14995715,C++实现抽奖系统,"['C++', '数据结构', '编程算法']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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"

持续更新中~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值