sass中使用calc计算表达式变量问题

2020-01-13 14:53:51

标准写法 

width: calc(#{$leftwidth} - 10px)


calc（）是css的一个函数，可用于元素计算长度，比如div宽度想要减去一个固定宽度后并自适应，可以写为calc(100% - 60px) 注意“-”两边有空格

sass已经是常用的预编译语言，允许使用变量等规则，如果上边写到60px是一个变量，这个表达怎么写呢


显然这样写是不行的，浏览器解析完是这样子的


在scss里改为这样就行了



浏览器自己计算了



  • 精彩推荐

  • 2018-03-07 14:35:32

    centos7下yum安装ffmpeg

    安装EPEL Release，因为安装需要使用其他的repo源，所以需要EPEL支持 yum install -y epel-release

  • 2018-03-08 09:44:12

    前端性能监控：window.performance

    Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能，包括 Navigation Timing API和高分辨率时间数据。

  • 2018-03-08 09:44:15

    前端性能监控：window.performance

    Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能，包括 Navigation Timing API和高分辨率时间数据。

  • 2018-03-08 09:47:14

    ES6，Array.fill()函数的用法

    ES6为Array增加了fill()函数，使用制定的元素填充数组，其实就是用默认内容初始化数组。

  • 2018-03-08 09:53:39

    document.readyState

    一个document 的 Document.readyState 属性描述了文档的加载状态。

  • 2018-03-09 02:09:23

    ArrayBuffer：类型化数组

    ArrayBuffer对象、TypedArray对象、DataView对象是JavaScript操作二进制数据的一个接口。这些对象早就存在，属于独立的规格，ES6将它们纳入了ECMAScript规格，并且增加了新的方法。

  • 2018-03-09 11:45:11

    SQL SELECT DISTINCT 语句

    如需从 Company" 列中仅选取唯一不同的值，我们需要使用 SELECT DISTINCT 语句：