CSS预编译工具(SASS,LESS)

本文对比了SASS和LESS这两种CSS预处理语言的特点,详细介绍了SASS的使用方法,包括变量、混合器、继承等功能,并推荐了两种常用的编译工具。

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

  SASS和LESS都是专用于CSS的预编译语言,他们2者的功能,操作都是大同小异。LESS稍微简单一些,而SASS有一些比较成熟的框架(如compass),功能强大一些,其中的语法也比较符合一门编程语言的习惯,比如说函数,作用域,进程控制等等。所以,我也是选择的SASS来使用。
一、SASS中文官网
使用:
创建一个SCSS后缀的文件。
变量:
$name :       定义变量 
直接调用$name引用变量
嵌套的CSS规则:
导入:@import
处理.SASS文件和.SCSS文件的相互转换
sass和scss是SASS的两种不同的语法,我们一般使用scss语法
注释:
//      不会编译进css文件
/**/    会编译进css文件
混合器:
@mixin 
@include
编译复杂混合属性用(如:font,background)
继承:
@extend
占位选择符:

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %extreme;
}
编译为:

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}

注:继承最好不要继承被包含的子选择器,编译出来后会把包含关系交叉写的非常复杂,可读性很差。
流程控制:
@if
@if - @else
@if - @else if - @else
@for $var from <start> through <end>     ---- 包括开始与结束
@for $var from <start> to <end>     ---- 包括开始,不包括结束
@each $var in <list>
@while condition {statements;}
函数:
@function fn(args) {
// statements
@return exp;
}

二、Less中文文档



SASS和LESS都需要通过编译后成为CSS文件才能使用,编译工具有很多种,下面推荐2种我常用的:

1、Koala

一款可视化的前端预处理器语言图形编译工具,优点是操作比较简便,可以批量操作,轻松设置各种参数。

2、gulp插件

gulp插件是非常多且功能强大的,其中不乏SASS和LESS的编译工具。优点是不需要装新的软件,而且找起来很方便。缺点是需要自己手写参数。









  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值