Sass预处理语言

本文介绍了Sass作为一种CSS预处理器的特点及其如何扩展CSS3的功能,包括变量、混合、选择器嵌套等内容,并详细解释了如何使用Sass进行样式管理。

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

一种CSS的预处理器。
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。

Sass 生成良好格式化的 CSS 代码,易于组织和维护。

sass的变量定义格式
$变量名:属性值;
默认变量
sass的默认变量仅需要在值后面加上!default即可。
特殊变量
如果变量作为属性则必须要以#{$variables}形式使用。
全局变量
在变量值后面加上!global即为全局变量。

选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。
在选择器嵌套中,可以使用&表示父元素选择器
属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头

sass中使用@mixin声明混合
可以传递参数,参数名以$符号开始
多个参数以逗号分开,也可以给参数设置默认值。
声明的@mixin通过@include来调用。
传参时需要传入对应参数名与参数值(键值对方式传参)


基础继承
使用关键词@extend,后面紧跟需要继承的选择器

运算
数值型的Value (如:数字、颜色、变量等)可进行加减乘除四则运算
注意运算符前后请留一个空格,不然会出错。
@if判断
@if可一个条件单独使用,也可以和@else结合多条件使用



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值