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

2020-01-13 14:53:51

标准写法 

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


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

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


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


在scss里改为这样就行了



浏览器自己计算了



  • 2019-09-11 15:28:07

    Node 性能优化

    硬盘的 IO 开销是非常昂贵的,硬盘 IO 花费的 CPU 时钟周期是内存的 41000000/250 = 164000 倍。 所有在一般应用中,优化要首先考虑数磁盘 IO , 通常也就是数据层的优化,说到数据库优化,很多人第一时间会想到加索引,但是什么加了索引查询会变快呢?索引要怎么加才合适呢?

  • 2019-09-11 16:49:56

    flex布局详解,Flex 布局语法教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现

  • 2019-09-12 16:32:19

    JSLint,JSHint,ESLint的区别

    主流的JS Lint工具及介绍 JavaScript已经发展蛮长时间了,对应的Lint工具也是层出不穷,下面介绍一下比较主流的几个Lint工具(其实是我用过的几个XD)