一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用。

  例如:scss代码

$borderDirection:       top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
// 应用于 class 和属性
.border-#{$borderDirection} {
border-#{$borderDirection}: 1px solid #ccc;
}
// 应用于复杂的属性值
body {
font:#{$baseFontSize}/#{$baseLineHeight};
}

  编译后的css代码:

.border-top {
border-top:1px solid #ccc;
}
body {
font: 12px/1.5;
}

scss-#{}插值的更多相关文章

  1. sass基础篇

    scss的语法非常简单: $color: red; div{ color: $color; } 这就是一个简单的scss代码. 但是,使用 Sass 进行开发,那么是不是直接通过“<link&g ...

  2. 你需要知道的Sass插值

    你也许会不时地写写 Sass 玩玩,你也会很享受它带给你各种便利.但还有一件事,你并不一定完全了解:插值 (interpolation) - 将一个占位符,替换成一个值.好了,你们都很幸运,因为今天我 ...

  3. 前端之Sass/Scss实战笔记

    简介 Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正 ...

  4. Scss预处理器的使用总结

    变量 .嵌套.Mixin混合.function函数.插值 变量及文件导入 通过$定义变量 $white:#fff; $black:#000; 变量引用 .containner{ color:$blac ...

  5. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  6. 记录cacl()函数中使用scss变量不生效的问题

    问题 使用cacl()动态计算元素的高度,运算中包含一个scss变量.如下: height: calc(100% - $ws-header-height); 在浏览器中发现并没有达到预期效果,scss ...

  7. scss 使用

    SCSS 常用功能 https://www.cnblogs.com/guangzan/p/10547335.html 定义变量$my-color: #666; //定义变量$my-heihgt: 10 ...

  8. Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome

    Sass带来的变革 作者:大漠 日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...

  9. sass / scss

    Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正确的C ...

  10. SCSS入门

    1. CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多好处 ...

随机推荐

  1. THU 上机 最小邮票数 暴力枚举

    链接:https://www.nowcoder.com/questionTerminal/83800ae3292b4256b7349ded5f178dd1?toCommentId=2533792来源: ...

  2. Luogu P1273 有线电视网 树形DP

    又重构了一下...当然当初的题一看就看懂了QAQ 设f[i][j]表示以i为根的子树,有j个客户的最大收益 方程:f[u][j+k]=max(f[u][j+k],f[u][j]+f[v][k]-w(u ...

  3. Codeforces Round #549 (Div. 2) Solution

    传送门 A.The Doors 看懂题目就会写的题 给一个 $01$ 序列,找到最早的位置使得 $0$ 或 $1$ 已经全部出现 #include<iostream> #include&l ...

  4. webpack 打包css报错 Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

    是webpack4和extract-text-webpack-plugin的兼容性问题 执行命令:npm install extract-text-webpack-plugin@next --save ...

  5. Oracle中对XMLType的简单操作(extract、extractvalue)

    前几天一直在做Oracle对XMLType字段的操作,我还不是Oracle大拿,到网上找了很多资料,但是很多就是单一功能的介绍,不能很好的解决问题,现在在这里总结下. 1.下面先创建一个名未test. ...

  6. redis cluster 集群部署

    准备工作 1. 安装docker curl -s https://get.docker.com/ | sh 注:一键安装的事最新版docker.已安装docker可跳过此步骤 2. 获取基础镜像 do ...

  7. PIE SDK打开Micaps数据

    1. 功能简介 Micaps数据是气象信息处理和天气预报制作中的一种气象数据格式.其包含多种气象信息产品(地面常规气象观测数据产品.高空常规气象观测数据产品等),目前Micaps数据被Micaps软件 ...

  8. PIE SDK矢量自定义渲染

    1. 功能简介 PIE SDK中关于矢量渲染提供了多种方案,包括简单渲染.分级渲染.唯一值渲染,这几种渲染方式具有一定的通用性,可以满足用户绝大多数的需求. 当面对复杂的业务,当前渲染方案无法满足用户 ...

  9. .reverse ,join,split区分

    * 1:arrayObject.reverse() * 注意: 该方法会改变原来的数组,而不会创建新的数组. * 2:arrayObject.join() * 注意:join() 方法用于把数组中的所 ...

  10. android点击桌面App图标activity启动流程

    1.点击桌面App图标,Launcher进程采用Binder IPC向system_server进程发起startActivity请求:2.system_server进程接收到请求后,向zygote进 ...