一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$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. Python3之XML模块

    一.简介 xml是实现不同语言或程序之间进行数据交换的协议,可扩展标记语言,标准通用标记语言的子集.是一种用于标记电子文件使其具有结构性的标记语言.xml格式如下,是通过<>节点来区别数据 ...

  2. SDUT OJ 数据结构实验之图论六:村村通公路(最小生成树)

    数据结构实验之图论六:村村通公路 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...

  3. gitlab忘记管理员密码

    gitlab忘记密码后破解! gitlab-rails console production :> user = User.).first irb(main)::> user.passwo ...

  4. window 系统 cygwin swool 问题

    cygwin 终端乱码  端口占用 查看 tcp  端口: netstat -tno  或者 netstat -an | grep 端口 杀死进程号 : kill   进程号 --->  143 ...

  5. 一款不错的Linux终端颜色设置

    PS1="\[\e[37;40m\][\[\e[32;40m\]\u\[\e[37;40m\]@\h \[\e[36;40m\]\w\[\e[0m\]]\\$ " #步骤# vi ...

  6. 详解SimpleXML添加_修改_删除_遍历XML节点属性

    SimpleXML概述 要处理XML 文件,有两种传统的处理思路:SAX 和DOM.SAX 基于事件触发机制,对XML 文件进行一次扫描,完成要进行的处理:DOM 则将整个XML 文件构造为一棵DOM ...

  7. 在python3.5中pip安装scrapy,遇到 error: Microsoft Visual C++ 14.0 is required

    本来在python3.5中安装scrapy一路顺畅(pip install scrapy),中间遇到一个 error: Microsoft Visual C++ 14.0 is required. x ...

  8. Java打包成jar

    若要生成一个名为 cal.jar 的可执行jar文件:(文件名可以是任意合法名字)  (这是我认为简单实用的一种方法,还有很多别的方法在此就不介绍了)  第一 把程序生成的所有字节码文件(即.clas ...

  9. PIE SDK打开栅格数据

    1. 功能简介 GIS将地理空间数据表示为矢量数据和栅格数据.矢量数据模型使用点.线和多边形来表示具有清晰空间位置和边界的空间要素,如控制点.河流和宗地等,每个要素被赋予一个ID,以便与其属性相关联. ...

  10. PIE SDK矢量数据编辑的撤销和回退

    1.功能简介 在数据的编辑过程中难免会出现失误,撤销和回退可以更好的编辑,下面对矢量数据编辑的撤销和回退功能进行介绍. 2.功能实现说明 2.1. 实现思路及原理说明 第一步 调用UndoComman ...