zoukankan      html  css  js  c++  java
  • scss-算术运算符

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

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

      一.赋值运算符:

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

      代码实例如下:

    $highlight-color: #F90;

      二.算数运算符:

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

    +、-、*、/和%

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

      加法运算符的代码实例:

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

      乘法运算符的代码实例:

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

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

      代码实例如下:

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

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

      代码如下:

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

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

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

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

  • 相关阅读:
    php目录递归删除
    php嵌套数据
    HTML 标签
    枚举 递归
    传值传址 结构体
    去超市选择要购买的商品 将数组放入集合
    函数
    集合 ArrayList 类
    特殊集合 Stack Queue Hashtable
    二维数组,多维数组
  • 原文地址:https://www.cnblogs.com/ibabyli/p/9870678.html
Copyright © 2011-2022 走看看