由于scss具有编程语言的特点,那么运算符是必不可少的。

  下面就通过代码实例分别做一下介绍。

  一.赋值运算符:

  赋值运算符就是我们最为熟悉的冒号(:),用来给声明的变量赋值。

  代码实例如下:

  1. $highlight-color: #F90;

  二.算数运算符:

  在scss中,算数运算符包括加减乘程序和求余,分别用如下符号表示:

  1. +、-、*、/和%

  算数运算符只能够用于相同单位的数值运算。

  加法运算符的代码实例:

  1. div {
  2. /*单位不一致,编译报错*/
  3. font-size: 5px + 2em;
  4. /*7px,如果有一个操作数没有单位,则默认使用另一个操作数的单位。*/
  5. font-size: 5px + 2;
  6. }

  乘法运算符的代码实例:

  1. div {
  2. font-size: 5px * 2;
  3. /*具有相同单位的数值相乘会报错*/
  4. font-size: 5px * 2px;
  5. }

  除法运算符(/)需要特别注意一下,因为除法运算符本身也是css语法的一部分。

  代码实例如下:

  1. font: 16px / 24px Arial sans-serif;

  下面就来介绍一下在scss中,哪些情况会被认为是除法运算,哪些情况被认为是css原生语法。

  代码如下:

  1. div {
  2. /*不执行除法操作,原样输出*/
  3. font-size: 16px / 24px;
  4. /*使用插值语法之后,原样输出*/
  5. font-size: #{$base-size} / #{$line-height};
  6. /* 使用括号包裹之后,执行除法操作*/
  7. font-size: (16px / 24px);
  8. /* 使用变量,执行除法操作*/
  9. font-size: $base-size / $line-height;
  10. /* 调用函数,执行除法操作*/
  11. opacity: random(4) / 5;
  12. /* 使用算术操作符,执行除法操作*/
  13. padding-right: 2px / 4px + 3px;
  14. }

  scss中的算数运算符和普通算数运算符一样,也具有优先级概念:

  (1).乘除法的优先级要高于加减法。

  (2).小括号中的运算具有最高优先级。

scss-算术运算符的更多相关文章

  1. PHP中的运算符---算术运算符、逻辑运算符、赋值运算符、比较运算符

    1.算术运算符 常见的算术运算符 运算类型 运算符 举例 结果 取反运算 - -$a 返回$a的负值 加法运算 + $a + $b 返回$a与$b的和 减法运算 - $a - $b 返回$a与$b的差 ...

  2. java中的算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符

    一.算术运算符 算术运算符主要用于进行基本的算术运算,如加法.减法.乘法.除法等. Java 中常用的算术运算符: 其中,++ 和 -- 既可以出现在操作数的左边,也可以出现在右边,但结果是不同滴 例 ...

  3. javascript运算符——算术运算符

    × 目录 [1]一元加 [2]一元减 [3]递增[4]递减[5]加法[6]减法[7]乘法[8]除法[9]求余 前面的话 javascript中的算术操作主要通过算术运算符来实现,本文将介绍算术运算符的 ...

  4. javascript算术运算符详解

    算术运算符 +.-.*./.%.++.-- ++.--分为前缀形式和后缀形式 前缀形式先加减1在执行 后缀形式先执行再加减1 注意 +号用来连接两个字符串 只要+连接的操作数中有一个是字符串型,JS就 ...

  5. 慕课网-安卓工程师初养成-3-2 Java中的算术运算符

    来源:http://www.imooc.com/code/1279 算术运算符主要用于进行基本的算术运算,如加法.减法.乘法.除法等. Java 中常用的算术运算符: 其中,++ 和 -- 既可以出现 ...

  6. JAVA算术运算符、关系运算符和位运算符

    算术运算符 1.java的算数运算符包括+(加).-(减).*(乘)./(除).%(取余),在运算过程中出现的隐式转换原则和C语言一样:2. 高位数据向低位数据转化要使用强制转化: 关系运算符 1.j ...

  7. Java SE ---算术运算符

    算术运算符:(加)+,(减)-,(乘)*,(除)/,(求余)%,自增自减 一,算数运算符:当有若干个变量参与运算时,结果类型取决于这些变量中表示范围最大的那个变量类型.如果参加运算的变量中有整型int ...

  8. c语言学习之基础知识点介绍(四):算术运算符和逗号表达式

    本节主要介绍c语言中运算符. 运算符主要分为四类: 1.算术运算符 加(+),减(-),乘(*),除(/),取余(%,两数相除,得到余数) 2.关系运算符 3.逻辑运算符 4.换位运算符 下面将依次介 ...

  9. Python算术运算符

    Python 运算符 什么是运算符? 本章节主要说明Python的运算符.举个简单的例子 4 +5 = 9 . 例子中,4和5被称为操作数,"+"号为运算符. Python语言支持 ...

  10. java笔记2之算术运算符

    1运算符是什么呢 对常量和变量进行操作的运算符 2运算符分为哪些 算术运算符(+,-,*,/), 赋值运算符 比较运算符 逻辑运算符 位运算符 三目运算符 3运算符 A 算术运算符的注意事项 (1)整 ...

随机推荐

  1. linux系统安全及应用——PAM安全认证

    一.PAM认证模块介绍 PAM认证模块,叫做可插拔式的认证模块.一项重要的功能就是为了加强su命令的使用控制,可以借助于PAM认证模块,只允许极个别用户使用su命令进行切换.PAM提供了对所有服务进行 ...

  2. Python3之时间模块time & datetime & calendar

    一. 简介 python 提供很多方式处理日期与时间,转换日期格式是一个常见的功能. 时间元组:很多python函数用一个元组装起来的9组数字处理时间. python中时间日期格式化符号: %y 两位 ...

  3. 使用过多的递归出现错误,“System.StackOverflowException”类型的未经处理的异常在 mscorlib.dll 中发生

    class Program { static void Main(string[] args) { sub(0); }     private static void sub(int count) { ...

  4. jquery循环语句if-else if-else

    jquery循环语句if-else if-elsecallbackFun()函数,开始是写的if-if-else.结果是不管第一个if有没有匹配到,会再次判断, 如果匹配到第二个if,则第二个if中的 ...

  5. redis锁

    1.引入依赖: <!--使用redis客户端需要用到的包 --> <dependency> <groupId>redis.clients</groupId&g ...

  6. javascript JSON. 转换 注意事项

    JSON.stringify() 会舍弃 方法..只有属性才会转换成 json 字符串,所以 用 JSON.stringify()=='{}' 来判断对象是否为空 是错误的!!!! 正确的做法 是  ...

  7. 大佬的编码建议,让你的代码更pythonic

    大佬的编码建议,让你的代码更pythonic Raymond Hettinger是 Python 核心开发者,本文提到的许多特性都是他开发的. 若无例外,本文代码中出现的 colors names d ...

  8. 并排的两个div之间会有空隙

    两个并排的DIV会有如下图所示的空隙 是因为 代码中 两个DIV之前有个 ’回车‘ 这么写就OK了 可是为什么会有这种问题呢,是因为浏览器将 空格.回车.tab键等字符都当做一个空格处理,所以当你回车 ...

  9. JPEG 编码

    WIN8. DNJXJ-7XBW8-2378T-X22TX-BKG7J 模板:类的宏,泛型,甜饼切割机 类模板:泛型类: 函数模板:泛型函数 STL standard template Library ...

  10. [转] Spring Boot中Web应用的统一异常处理

    [From] http://blog.didispace.com/springbootexception/ 我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供 ...