一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$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. 解决因为链表过长,sql查询慢的问题

    /** * 解决因为链表过长,sql查询慢的问题 * 使用分治算法,先切分链表,然后查询结果,最后合并结果 *  * @author lingpy * @since 1.0 */public clas ...

  2. gym 102082G BZOJ4240 贪心+树状数组

    4240: 有趣的家庭菜园 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 756  Solved: 349[Submit][Status][Discu ...

  3. 添加win10激活工具

    其实我们可以随便准备一个win10的激活密钥激活! 以管理员的身份进入到CMD下.. slmgr.vbs /upk                清除掉旧的slmgr /ipk W269N-WFGWX ...

  4. Qt 学习之路 2(74):线程和 QObject

    Home / Qt 学习之路 2 / Qt 学习之路 2(74):线程和 QObject Qt 学习之路 2(74):线程和 QObject  豆子  2013年12月3日  Qt 学习之路 2  2 ...

  5. C++_标准模板库STL概念介绍4-算法

    STL包含很多处理容器的非成员函数: sort() copy() find() random_shuffle() set_union() set_intersection() set_differen ...

  6. 石头剪刀布(2019Wannafly winter camp day3 i) 带权并查集+按秩合并 好题

    题目传送门 思路: 按照题意描述,所有y挑战x的关系最后会形成一棵树的结构,n个人的总方案数是 3n 种,假设一个人被挑战(主场作战)a次,挑战别人(客场)b次,那么这个人存活到最后的方案数就是3n* ...

  7. [转] 使用 JavaScript 创建并下载文件

    [From] https://gaohaoyang.github.io/2016/11/22/js-create-file-and-download/ 本文将介绍如何使用 JavaScript 创建文 ...

  8. 【网络】默认路由、RIPv2、OSPF、EIGRP配置(全网全通)

    1:默认路由 遇到问题:给r2配置向右的单项默认路由,通过PC1去ping主机PC2,一直显示Request timed out, 解决方法:r2配置如下: r2(config)#ip route 0 ...

  9. 安装软件或运行软件时提示缺少api-ms-win-crt-runtime库解决方法

    最近碰到一个问题,在我软件安装或运行时会提示缺少api-ms-win-crt-runtime-|1-1-0.dll 当然第一个想到的是运行库没有装,但是很清楚的是我的电脑是装过vc_redist_20 ...

  10. nginx优化项目

    隐藏版本信息 server_tokensSyntax:     server_tokens on | off | build | string;Default:     server_tokens o ...