css预处理器scss/sass

一、css预处理器sass的诞生

众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作,仅仅只能用来编写网站样式,如此一来代码就会百年的臃肿难以维护。为了解决css的不足,开发者们想到了编写一种对css进行预处理的“中间语言”,可以实现一些“编程”语言才有的功能,然后自动编译成css供浏览识别,这样既一定程度上弥补了css的不足,也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言sass就应运而生了。

二、sass与scss

sass是采用的Ruby语言编写的一款css预处理语言,是最早成熟css预处理语言,有比less更为强大的功能。最初它是为了配合html而设计的,因此有着和html一样的缩进式风格。

sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,只是用{}取代了原来的缩进,这一代的sass也被称为scss

 三、sass/scss、less、stylus对比

1.sass/scss

(1)工作原理

通过sass包将我们开发写的scss文件编译成为浏览器支持的原生css文件,相当于在浏览器中运行的还是css文件

(2)安装使用

npm install sass -D

(3)语法特点

  •  变量:可以使用 $ 来定义变量,存储颜色、字体大小等常用值。
$primary-color: #3498db;
body {
  background-color: $primary-color;
}
  •  嵌套:允许嵌套选择器,使代码结构更清晰。
nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
}
  •  混入(Mixins):可复用的代码块,支持参数。
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
.box { @include border-radius(10px); }
  •  继承:可以继承其他选择器的样式。
.button { color: red; }
.btn { @extend .button; }

2.less

(1)安装使用

npm install -g less

(2)语法特点

  •  变量:使用 @ 符号定义变量。
@primary-color: #3498db;
body {
  background-color: @primary-color;
}
  •  嵌套:与 Sass 类似,Less 也支持嵌套选择器。
nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
}
  •  混入(Mixins):与 Sass 相似,支持带参数的混入。’
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.box { .border-radius(10px); }
  •  运算:支持基本的数学运算,例如加法、减法、乘法等。
@width: 10px;
.box { width: @width + 5px; }

3.stylus

(1)安装使用

npm install stylus --save-dev

(2)语法特点

  • 变量:使用 = 来定义变量。
primary-color = #3498db
body
  background-color primary-color
  • 嵌套:同样支持嵌套,语法更加简洁。
nav
  ul
    list-style none
  li
    display inline-block
  • 混入(Mixins):支持无参数或带参数的混入,且可以嵌套。
border-radius(radius)
  -webkit-border-radius radius
  -moz-border-radius radius
  border-radius radius
.box
  border-radius(10px)
  • 条件语句和循环:Stylus 提供强大的条件判断和循环功能。
if x > y
  background-color red
  • 函数和运算:支持更复杂的运算和自定义函数。

总结:

不管是Sass,还是Less或者stylus,都可以视为一种基于CSS之上的高级语言,其目的是使得CSS开发更灵活、强大,Sass、stylus的功能比Less强大,基本可以说是一种真正的编程语言了,Less则相对清晰明了,易于上手,对编译环境要求比较宽松。个人在实际开发中更倾向于选择Sass。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值