scss-#{}插值
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$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-#{}插值的更多相关文章
- sass基础篇
scss的语法非常简单: $color: red; div{ color: $color; } 这就是一个简单的scss代码. 但是,使用 Sass 进行开发,那么是不是直接通过“<link&g ...
- 你需要知道的Sass插值
你也许会不时地写写 Sass 玩玩,你也会很享受它带给你各种便利.但还有一件事,你并不一定完全了解:插值 (interpolation) - 将一个占位符,替换成一个值.好了,你们都很幸运,因为今天我 ...
- 前端之Sass/Scss实战笔记
简介 Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正 ...
- Scss预处理器的使用总结
变量 .嵌套.Mixin混合.function函数.插值 变量及文件导入 通过$定义变量 $white:#fff; $black:#000; 变量引用 .containner{ color:$blac ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- 记录cacl()函数中使用scss变量不生效的问题
问题 使用cacl()动态计算元素的高度,运算中包含一个scss变量.如下: height: calc(100% - $ws-header-height); 在浏览器中发现并没有达到预期效果,scss ...
- scss 使用
SCSS 常用功能 https://www.cnblogs.com/guangzan/p/10547335.html 定义变量$my-color: #666; //定义变量$my-heihgt: 10 ...
- Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome
Sass带来的变革 作者:大漠 日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...
- sass / scss
Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正确的C ...
- SCSS入门
1. CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多好处 ...
随机推荐
- 本文分享一下ehcache的使用心得,本文主要讲以广播的形式同步缓存。
本文分享一下ehcache的使用心得,本文主要讲以广播的形式同步缓存. 下面讲述主要分为两个部分,一个是配置文件,一个是Java代码. 1.准备jar包: slf4j-api-1.7.12.jar,e ...
- C# 注册Dll文件
有时会遇到dll在系统中不存在,需要程序自己去注册所需的dll文件. 注册dll 需要用到regsvr32命令,其用法为:"regsvr32 [/s] [/n] [/u] [/i[:cmdl ...
- SDUT OJ 数组计算机(线段树)
学长推荐了这个博客详细的介绍了线段树的建立.查找.更新: 数组计算机 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Prob ...
- Node.js的mysql执行多表联合查询
数据库(test)中的表结构(admin.user) //执行多表结合查询 var mysql = require('mysql'); var connection = mysql.createCon ...
- ubuntu下QtCreator启动无响应问题解决
打开Qt后就卡死. 解决方法:删除系统配置目录下的QtProject文件夹: find / -name QtProject 输出: /root/.config/QtProject 删除QtProjec ...
- tornado 10 长轮询和 websocket
tornado 10 长轮询和 websocket 一.长轮询 #在网页,我们经常扫码登录,那么问题来了,前端是如何知道用户在手机上扫码登录的呢 这里就需要用到长轮询 #长轮询 #客户端能够不断地向服 ...
- LightOJ - 1197 素数筛
深夜无事可干啊 #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+11; typedef long lon ...
- nodejs下载器,通过chrome代理下载http资源
var config={ //不想访问的东西,节约流量 "404":[ "http://qidian.qpic.cn/qdbimg" ], //奇数为需要下载的 ...
- <a>标签深入讲解
标签中 href 和 onclick 的区别,以及href="javascript:xxx(this);"与onclick="xxx(this);" 传递thi ...
- Docker 命令详解(run篇)
参考:https://www.cnblogs.com/yfalcon/p/9044246.html 命令格式:docker run [OPTIONS] IMAGE [COMMAND] [ARG...] ...