在 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. shell第一个脚本

    mkdir 创建目录touch 创建空文件 chmod +x ./test.sh  #使脚本具有执行权限

  2. iOS----收集的一些小技巧

    1,如何将试图置于最顶层 第一种方法 _myview.layer.zPosition =5; 第二种方法 [self.view insertSubview:_MyView atIndex:999]; ...

  3. flutter中的表单使用

    Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框.CheckBox.Radio.Switch.CheckboxListTile.RadioListTile ...

  4. 20180809-Java继承

    // A.java public class A{ private int i; protected int j; public void func(){ }} // B.javapublic cla ...

  5. idea2019.2 svn 忽略文件问题

    自己用的是idea2019.2最新版本,今天提交的时候Commit Changes Dialog local changes refresh一直再刷新 其他的方法都是老版本都不适合 解决办法 找到Se ...

  6. 不用print调试 xdebug ubuntu phpstorm 远程断点调试

    即使这会写php也遵守zebra大人的指示:不用print调试!!!!----环境ok  ---gan !!! w http://blog.csdn.net/ty_hf/article/details ...

  7. CSS-同一行的元素高度统一

    一:flex 大法 步骤 设置外部容器 display: flex; 设置内部容器 align-items: stretch; 原理 https://developer.mozilla.org/zh- ...

  8. 015-Spring Boot 定制和优化内嵌的Tomcat

    一.内嵌web容器 参看http://www.cnblogs.com/bjlhx/p/8372584.html 查看源码可知提供以下三种: 二.定制优化tomcat 2.1.配置文件配置 通过appl ...

  9. Python笔记(十三)_os模块和os.path模块

    os模块中关于文件/目录常用的函数使用方法 getcwd() 返回当前工作目录 chdir(path) 改变工作目录 listdir(path='.') 列举指定目录中的文件名('.'表示当前目录,' ...

  10. 编程语言-Ruby-问题整理

    安装 https://github.com/oneclick/rubyinstaller2/releases/tag/RubyInstaller-2.6.0-1