美文网首页
十一、sass 函数指令 (Function Directive

十一、sass 函数指令 (Function Directive

作者: 柳暗花明又一匪 | 来源:发表于2018-01-25 15:30 被阅读0次

Sass 支持自定义函数,并能在任何属性值或 Sass script 中使用:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

比如html5开发,rem与设计图单位的换算

@function rem($n) {
    @return ($n/2/12);
}

.header{
  height: rem(90rem); //height:3.75rem;
}

与 mixin 相同,也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句,需要调用 @return 输出结果。

自定义的函数也可以使用关键词参数,上面的例子还可以这样写:

相关文章

  • 十一、sass 函数指令 (Function Directive

    Sass 支持自定义函数,并能在任何属性值或 Sass script 中使用: 比如html5开发,rem与设计图...

  • angularjs指令

    1.指令属性列表.directive('directivename', function(){ return { ...

  • angular-自定义指令-E

    angular自定义指令 (1)directive---restrict属性EACM (function() { ...

  • 指令——点击懒加载

    指令: //自定义加载框App.register.directive('loadmore', function()...

  • vue自定义指令 --directive

    1)Vue.directive('自定义指令的名字',{ inserted:function(el){...

  • AngularJS 自定义指令

    自定义指令需要用到模块对象的directive函数,以模块对象.directive('指令名称',[functio...

  • vue自定义全局指令

    Vue.directive('指令名',{ 钩子函数1(){}, 钩子函数2(){} }) -----------...

  • vue .directive

    即vue的自定义指令 全局定义 Vue.directive('focus', {inserted:function...

  • sass--基本指令

    介绍 指令我们在Sass函数的介绍中有提到过,并且在那一章提前学习了@function指令。今天我们就来看一下Sa...

  • Sass基本指令

    介绍 指令我们在Sass函数的介绍中有提到过,并且在那一章提前学习了@function指令。今天我们就来看一下Sa...

网友评论

      本文标题:十一、sass 函数指令 (Function Directive

      本文链接:https://www.haomeiwen.com/subject/uxmvaxtx.html