在 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. 【leetcode】1053. Previous Permutation With One Swap

    题目如下: Given an array A of positive integers (not necessarily distinct), return the lexicographically ...

  2. iOS----实现scrollView或者scrollView的子类下拉图片放大的效果

    代码是通过Tableview来说明的,用在其他情况下同样适用 - (void)viewDidLoad { [super viewDidLoad]; _imageview = [[UIImageView ...

  3. string 、char* 、 char []的转换

    1.string->char* (1)data string s = "goodbye"; const char* p=str.data(); (2)c_str() stri ...

  4. sqlserver备份和恢复-5

    视图备份和恢复 备份 1. 2. 恢复 1. 2. 3.勾选覆盖现有数据库. 4. bat备份恢复 原文: https://www.cnblogs.com/lonelyxmas/p/7958649.h ...

  5. sqlserver安装-1

    原文地址: https://blog.csdn.net/qq_41432123/article/details/79053486 下载:(免费使用安装dev版) ed2k://|file|cn_sql ...

  6. React准备工作

    一.环境准备 使用react官方推荐的脚手架create-react-app 1.安装nodejs 2.npm install -g create-react-app  //全局安装脚手架 3.cre ...

  7. centos7升级kernel之后,vmware无法打开

    12.57版本的vmware: https://my.vmware.com/group/vmware/details?downloadGroup=WKST-1257-LX&productId= ...

  8. MD5加密 及 防止重复提交

    1.JSP页面 <%@page import="cn.gs.ly.app2.MD5Util"%> <%@page import="java.util.U ...

  9. Altium Designer chapter2总结

    原理图开发环境这节中需要注意的如下: (1)电路图首先项设定中需注意的地方: 1.General:中经常用到的自动生成交叉节点.放置元件时自动增加选项.复合封装元件的字母数字后缀选项.默认电源对象名称 ...

  10. poj3253Fence Repair (Huffman)

    Huffman树:具有n个外部节点(叶子节点)的二叉树 每个外部节点都有一个对应的权值Wi 叶节点带权外部路径长度总和WPL=Wi*Li(i从1到n)最小(权越大的节点里根越进) 构造Huffman树 ...