在 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. hdu 6050: Funny Function (2017 多校第二场 1006) 【找规律】

    题目链接 暴力打个表找下规律就好了,比赛时看出规律来了倒是,然而看这道题看得太晚了,而且高中的那些数列相关的技巧生疏了好多,然后推公式就比较慢..其实还是自身菜啊.. 公式是 #include< ...

  2. @ControllerAdvice全局数据预处理

    在传统项目的Controller的方法中传入参数,对象中的属性相同时,会出现以下错误         Book类和Author类     这是因为两个对象中的name相同,传参时分不清西游记和六小龄童 ...

  3. SpringBoot 在IDEA中实现热部署(实用版)

    转自https://www.jianshu.com/p/f658fed35786 具体步骤 一.开启IDEA的自动编译(静态) 具体步骤:打开顶部工具栏 File -> Settings -&g ...

  4. 历时小半年总结之JAVA

    一.JavaSE 1.多线程 (1).进程与线程的区别? 答:进程是所有线程的集合,每一个线程是进程中的一条执行路径,线程只是一条执行路径. (2).为什么要用多线程? 答:提高程序效率 (3).多线 ...

  5. hibernate插入中文字段时,无法插入数据库

    体现: hibernate插入数据时,一直报错: Caused by: java.sql.SQLException: Incorrect string value: '\xE5\xBC\xA0\xE4 ...

  6. 学习日记3、投机取巧使两个表的数据同时在一个treeGrid中显示

    不多说了直接上代码, $('#List').treegrid({ url: '@Url.Action("GetList")', width: $(window).width() - ...

  7. VMware Workstation 官方正式版及激活密钥

    热门虚拟机软件VMware Workstation Pro现已更新至14.1.2,14.0主要更新了诸多客户机操作系统版本,此外全面兼容Wind10创建者更新.12.0之后属于大型更新,专门为Win1 ...

  8. 用flask写一个简单的接口

    用falsk写一个简单的接口,这个接口的数据本来是爬虫爬取的数据,但是今天只写一个flask接口,数据就用测试数据好了. import random import re import time imp ...

  9. Android7.1后对于Toast类型窗口的限制

    在处理问题的时候,经常会遇到ANR,停止运行等问题,经过分析和验证,和如下的一行关键log有关 WindowManager: Adding more than one toast window for ...

  10. day32—CSS多列布局学习

    转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局   ...