在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如:

$content: "Hello" + "" + "Sass!";
.box:before {
content: " #{$content} ";
}

编译出来的CSS:

.box:before {
content: " Hello Sass! ";
}

除了在变量中做字符连接运算之外,还可以直接通过 +,把字符连接在一起:

div {
cursor: e + -resize;
}

编译出来的CSS:

div {
cursor: e-resize;
}

注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 例如:

p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}

编译出来的 CSS:

p:before {
content: "Foo Bar";
font-family: sans-serif; }

Sass字符运算的更多相关文章

  1. CSS之运算,Sass 之运算(加、减、乘、除)

    1. 加减法 加减法不是重点,重点是在SassScript中用到的两种单位之间的转换:绝对单位:px, pt, pc, in, mm, cm...绝对单位都能运算:相对单位:ex, em, rem.. ...

  2. HDU 1015(字符运算 **)

    题意是在一段大写英文字符中找出 5 个字符通过代入公式运算得到目标值,如有多组字符满足题意,则输出字典序最大的一组,否则输出 no solution. 应该是用深搜做的,但是直接暴力也过了……(应该没 ...

  3. javascript 一些特殊的字符运算

    1.什么是 --> ? 这两个分开是很简单的两个运算符,比如--,一般表示自减,var i = 5;while(i){console.log(i--);},会打印出5,4,3,2,1: > ...

  4. [matlab] 5.字符运算与微积分

    首先介绍一下matlab里的符号计算 符号变量可以看成是数学中含参数 的表达式中的参数 matlab能进行像(a+b)(a-b)=a^2-b^2这样的计算 要进行符号计算首先要定义符号变量 定义符号对 ...

  5. Python中字符运算的优先级

    表1-2 运算符优先级 运算符 描述 lambda Lambda表达式 or 布尔“或” and 布尔“与” not x 布尔“非” in,not in 成员测试 is,is not 同一性测试 &l ...

  6. SCSS入门

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

  7. SCSS详解

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

  8. 再说scss

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

  9. vue入门文章

    本来想自己写一篇关于vue入门的文章.但是看到链接的文章后,觉得写得太详细了,实在有保存下来的必要.后面可能在这篇文章基础上,有所内容的增加. CSS预处理器 定义了一种新的专门的编程语言,编译后成正 ...

随机推荐

  1. animation transition transform

    animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...

  2. win8安装maven

    1.下载并解压maven F:\maven\apache-maven-3.5.2 2. 设置环境变量 3. Path路径中添加maven的可执行文件目录(bin目录) 4.验证maven是否安装成功: ...

  3. ajax传递对象到MVC控制器

    1.view层中ajax写法: function Add2() { var model = new Object(); model.UserName = $('#UserName').val(); m ...

  4. 未能加载文件或程序集 ICSharpCode.SharpZipLib

    Ui调用Webservice ,Webservice调用Bl BL中明明有那个dll文件 后来发现是webservice里面没有 在附加调试的时候,断点在bl层中

  5. vue项目适应不同屏幕做的适配器

    一般宽度是1920的,但是有的电脑屏幕很窄,导致页面样式错乱,那么可以设置app.vue以及主页面里的样式宽度为1920px,超过了就auto. 如下: (app.vue) (home.vue) 原效 ...

  6. [CSP-S模拟测试]:天空龙(模拟)

    题目描述 奥西里斯之天空龙很喜欢颜色,有一天他找到了三种颜色——红黄蓝.奥西里斯有$a$个红色,$b$个黄色,$c$个蓝色,他想用画出最好的画,可是需要至少$x$个红色,$y$个黄色和$z$个蓝色,似 ...

  7. css 实现div内显示两行或三行,超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  8. linux ( CentOS 7)下Tengine(nginx)的安装与配置

    TengineTengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.它的目的是打造一个高效.安全的Web平台. 使用root用户安装 ...

  9. 洛谷P2661 信息传递(最小环,并查集)

    洛谷P2661 信息传递 最小环求解采用并查集求最小环. 只适用于本题的情况.对于新加可以使得两个子树合并的边,总有其中一点为其中一棵子树的根. 复杂度 \(O(n)\) . #include< ...

  10. c#继承与构造函数的调用

    1.实例化父类时,可以通过new子类来实例化父类,执行构造函数的顺序为:先执行父类的构造函数,再执行子类的构造函数. 2.实例化子类时,只可以new子类,执行顺序同上. 3.父类实例化后,只能执行父类 ...