scss function和mixin的区别

html-css024

scss function和mixin的区别,第1张

function

函数是有计算逻辑，返回计算的结果，不输出css块

mixin

mixin主要是计算根据计算结果输出css块

使用场景可以以下面为原则：

extend 继承：管理样式

mixin ：管理属性

function ：管理(计算)值

在 Less 中， 我们可以定义一种叫 “mixins” 的东西 —— 和编程语言中的函数有一点的相似。

在 Less 中， 它被用来灵活的组件化 CSS 中可重复使用的 class。 Mixin 允许你把一个 class 的所有属性嵌入到另外的一个 class 中 —— 就像它的一个属性一样， 仅仅通过简单的 include class 的名字。 它仅仅是一个变量，但是拥有一个 class 的属性。 任何的 CSS class 和 id 规则都可以混在里面。

.round-borders {

border-radius: 5px

-moz-border-radius: 5px

-webkit-border-radius: 5px

}

#menu {

color: gray

.round-borders

}

// 输出

.round-borders {

border-radius: 5px

-moz-border-radius: 5px

-webkit-border-radius: 5px

}

#menu {

color: gray

border-radius: 5px

-moz-border-radius: 5px

-webkit-border-radius: 5px

}