一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$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. [译文]Casperjs1.1.0参考文档-快速开始

    快速开始 只要casperjs被正确安装,你就可以开始写你的第一个脚本,你可以使用javascript或者coffiescript编译脚本. 提示: 如果你对javascript不是很熟悉,最好先看专 ...

  2. 【智能算法】用模拟退火(SA, Simulated Annealing)算法解决旅行商问题 (TSP, Traveling Salesman Problem)

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 文章声明 此文章部分资料和代码整合自网上,来源太多已经无法查明出处,如侵犯您的权利,请联系我删除. 01 什么是旅行商问题(TS ...

  3. 简述ref与out区别

    1.相同点:两者都是按地址(引用)传递的,使用后都将改变原来参数的数值. 2.区别:ref可以把参数的数值传递进函数,但是out是要把参数清空(声明时不必显示初始化),就是说你无法把一个数值从out传 ...

  4. 加快npm包安装的方法

    一直以来都感觉使用npm安装包的速度特别的慢,但是由于npm上面的包比较齐全,所以一直在忍受这种安装依赖包的折磨. 不过这种折磨,到今天为止应该是可以结束了,在知乎看到一个这样的说法: 用npmins ...

  5. C#调用存储过程的ADO.Net

    using System.Data.SqlClient; //如果存储过程没有输入和输出参数,而且不返回查询结果 SqlCommand cmd = new SqlCommand("存储过程名 ...

  6. css和js带参数v或version

    1 <span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?versi ...

  7. MAC终端下常用Git命令

    送给新手的简单命令操作.远程Git和local的同步实现流程: 1.把git上的代码clone到本地 $ git clone http:xxxx(地址,可以http也可以ssh) 2.clone到本地 ...

  8. 什么是redis?Reids的特点是什么?Redis支持的数据类型有哪些?

    首先,分布式缓存框架 可以 看成是nosql的一种 (1)什么是redis? redis 是一个基于内存的高性能key-value数据库. (有空再补充,有理解错误或不足欢迎指正) (2)Reids的 ...

  9. Django-admin 的使用

    admin 组件的使用 Django 提供功能十分强大的后台管理组件 admin 来实现自动管理. admin 是一个组件,与 APP 一样,项目启动一开始就加载了.在 setting.py 中的 I ...

  10. COCI2017-2018#3 Dojave || 洛谷P4443

    题目传送门............................................................................................... ...