less & sass 函数定义和使用， 样式书写事半功倍

现在css原生的功能也越来越强大了，其实也建议慢慢使用css3中的一些变量定义方式，css样式书写也早不是之前的那个时代，很多样式库也渐渐使用了 如vue移动端ui库， vant组件库等等
举个小例子就是

:root {
	--theme-color: red;
}
// 使用的时候
div {
	background: var(--theme-color); // 比较方便 挺好的
}
1
2
3
4
5
6
7

但是今天的主题并不是这个，而是我们的less&sass 不管是react项目还是vue项目，我们选择css预处理 更多的无非是这两种，其实没必要两个都学，学一个即可，另外一个大同小异。好了废话不多说了，进入主题了。
sass 函数的定义和使用

其实我们在写项目的时候，有一个问题就是如果我们的图片放到cdn上的话，那么地址就是一个固定的地址，每次书写前缀是不是就很难受嗯。答案是肯定的了
这个时候我们就可以用函数就行包装 自动帮我们写好前缀，我们只用书写动态变化的那部分即可

sass这里可以有两种处理方式 一种是混入的方式 一种是自定义函数的方式进行处理

// 混入
@mixin backimage($image) {
  background: url("http://t14.baidu.com" + $image) no-repeat;
}

// 使用
div {
  @include backimage("/it/demo.png");
}

// 函数
@function demo1($color) {
  @return $color;
}

// 使用
div {
  color: demo1(red);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

哈哈哈 是不是很简单

less

这个也很简单

// 函数定义
.color(@color) {
    color: @color;
  }
// 使用
div {
    .color(red);
  }
1
2
3
4
5
6
7
8

是不是更简单。 哈哈哈哈哈

关注我。随缘持续更新前端知识