[SCSS] Write Custom Functions with the SCSS @function Directive
Writing SCSS @functions is similar to writing functions in other programming languages; they can accept arguments and have return statements. SCSS provides a ton of great features, but sometimes we need to roll our own function. We can do that too! They’re useful when the desired functionality isn’t available from the built in SCSS functions and a mixin just won’t do. In this lesson, we learn how and when to use SCSS function directives.
- @function font-scale($exponent, $base-font-size: 14px, $ratio: 1.2) {
- $value:;
- @for $i from 1 through $exponent {
- $value: $value * $ratio;
- @debug $value;
- }
- @return if($exponent > 0, $base-font-size * $value, $base-font-size);
- }
- .stuff { font-size: font-scale(4); }
- .things { font-size: font-scale(2); }
- @for $i from 1 through 6 {
- $exponent: 7 - $i;
- h#{$i} { font-size: font-scale($exponent, $ratio: 1.5); }
- }
Notice, we using '@debug' directive, it can help to print out the value in console
We get:
- .stuff {
- font-size: 29.0304px; }
- .things {
- font-size: 20.16px; }
- h1 {
- font-size: 159.46875px; }
- h2 {
- font-size: 106.3125px; }
- h3 {
- font-size: 70.875px; }
- h4 {
- font-size: 47.25px; }
- h5 {
- font-size: 31.5px; }
- h6 {
- font-size: 21px; }
[SCSS] Write Custom Functions with the SCSS @function Directive的更多相关文章
- [翻译] Using Custom Functions in a Report 在报表中使用自己义函数
Using Custom Functions in a Report 在报表中使用自己义函数 FastReport has a large number of built-in standard ...
- Adding New Functions to MySQL(User-Defined Function Interface UDF、Native Function)
catalog . How to Add New Functions to MySQL . Features of the User-Defined Function Interface . User ...
- SQL Fundamentals || Single-Row Functions || 转换函数 Conversion function
SQL Fundamentals || Oracle SQL语言 SQL Fundamentals: Using Single-Row Functions to Customize Output使 ...
- graphite custom functions
尊重作者的劳动,转载请注明作者及原文地址 http://www.cnblogs.com/txwsqk/p/6522854.html 参考 https://graphite.readthedocs.io ...
- vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...
- Functions that return a function
javascript学习中,经常会遇到闭包的问题,然后闭包的很多例子中又会遇到很多返回函数的闭包的例子程序.因为对闭包的理解还不够透彻,然后对于Functions rerurn a function产 ...
- [SCSS] Loop Over Data with the SCSS @each Control Directive
The SCSS @for directive is great when we know how many iterations are required and we only need 1 va ...
- [SCSS] Write similar classes with the SCSS @for Control Directive
Writing similar classes with minor variations, like utility classes, can be a pain to write and upda ...
- 在vue-cli中安装scss,且可以全局引入scss的步骤
简历魔板__个人简历模板在线生成 在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知 ...
随机推荐
- error while loading shared libraries: libpcre.so.0的解决办法
error while loading shared libraries: libpcre.so.0的解决办法 http://blog.csdn.net/xjkwq1qq/article/detail ...
- FragMent-通过Arguments方法 跟activity通信
今天主要学习下通过Arguments,实现activity 给fragment传递数据.这个方法也是通过参数bundle来进行数据传输的 直接看如下代码 一,定义一个fragment,在oncreat ...
- thinkphp事务处理以及无效时的解决方案(整理)
thinkphp事务处理以及无效时的解决方案(整理) 一.总结 一句话总结:要程序里面支持事务,首先连接的数据库和数据表必须支持事务 mysql 1.InnoDB和MyISAM对事务的支持怎么样? I ...
- springMVC注解用法:@modelattribute的用法
在Spring MVC里,@ModelAttribute通常使用在Controller方法的参数注解中,用于解释model entity,但同时,也可以放在方法注解里. 如果把@ModelAttrib ...
- session应用二
从session中获取mapper对象,利用mapper对象进行增删改查 Date now = new Date(); SqlSession session = this.yangchebaoDbMa ...
- 几个经常使用的cmd命令
compmgmt.msc 计算机管理 devmgmt.msc 设备管理器 diskmgmt.msc 磁盘管理工具 dfrg.msc 磁盘碎片整理 eventvwr.msc 事件查看器 fsm ...
- 使用Microsoft.Office.Interop.Excel时,64位问题
前不久,碰到一个问题. 曾经用的好好的Microsoft.Office.Interop.Excel实现的导出Excel,迁移至64位server后,就出现: 检索 COM 类工厂中 CLSID 为 { ...
- code-代码平台服务器路径
下面记录的是各个平台的服务器路径(va使用) ("repo init -u ssh://vanzo/platform_89/manifest.git") ("repo i ...
- Matrix学习——基础知识
以前在线性代数中学习了矩阵,对矩阵的基本运算有一些了解,前段时间在使用GDI+的时候再次学习如何使用矩阵来变化图像,看了之后在这里总结说明. 首先大家看看下面这个3 x 3的矩阵,这个矩阵被分割成4部 ...
- TTL和RS232之间的详细对比
[背景] 之前就听过TTL,一直没搞懂其和RS232的区别. 最近,打算去买个USB转RS232的芯片,结果找到此产品: 六合一多功能USB转UART串口模块CP2102 usb TTL485 232 ...