• Scss基本运算-------数字运算


    在Sass中,共有4种数字运算:

     1.加法:在Sass中,做加法运算时,数值可以带单位,但是需要运算单位相同。如果不相同就会报错,编译不通过。

      实例:

            $sidebar-220px;

      $content-720px;
      $gap-20px;
      .container
      {
         ($sidebar-width + $content-width + $gap-width)
        margin: 0 auto;
      }
    编译出来的css代码是:
      .container
      {
        width:960px;
        margin:0 auto;
      }
    2.减法:跟Sass加法是一样的,做减法运算时,数值可以带单位,但是需要运算单位相同。如果不相同就会报错,编译不通过。
     需要注意的是:如果是做减法运算是“变量”而不是“数值”的时候,我们要注意减号“-”前后一定要有空格。不过对于Sass中的加法,则不需要考虑这一点。
    3.乘法:做乘法运算时,只能有一个数值带单位,另外一个数值只能是不带单位的数字。如果两个都是带单位的数字,则Sass会报错而编译不通过。
    4.除法:“/”在CSS中已经作为一种符号来使用了,例如我们常见的字体属性缩写“font:Arial 12px/1.5em”。因此在Sass中做除法运算的时候,如果我们直接使用“/”符号作为除号,将不会生效。因此在Sass中,如果我们想要做除法运算,我们需要在外面添加一个“小括号()”。
        实例:
        $100px;
        div
        {
          ($width/2);
        }
       编译出来的css代码:
        div
        {
          width:50px;
        }
      在Sass中,如果做除法运算中是“变量”而不是“数值”时,“/”会被自动识别为除法,不需要在外面添加小括号。
    注意:在使用Sass的过程中,“/”这个符号被当做除法运算时有以下3种情况
              (1)数值被小括号()包含;

       (2)数值是另外一个数学表达式的一部分;

       (3)数值或它的任意部分存储在一个变量中或者函数的返回值;

        举例:
         $height:100px;
        div
        {
        font:20px/10px;               //纯CSS,不是除法运算
        (20px/10px);             //使用了小括号,是除法运算,符合第1点
        height:$height/2;              //使用了变量,是除法运算,符合第3点
        line-height:round(1.5)/2;       //使用了函数,是除法运算,符合第3点
        margin-left:10px + 10px/2px;      //使用了加号,是除法运算,符合第2点
        }
    编译出来的css代码如下:
        div
        {
        font: 20px/10px;
        width: 2;
        height: 50px;
        line-height: 1;
        margin-left: 15px;
        }
    但是注意:在实际开发中,不管是加法、减法,还是乘法、除法运算建议在外面加上小括号。这种书写方式,能够使得代码一目了然,也方便维护
          
  • 相关阅读:
    SQL server中自定义排序
    安装nodejs版本模块报错notsup Unsupported platform for n
    vue项目中一些标签直接放在<template>下会报错Failed to compile with 1 errors
    vue中使用element-ui出现Couldn't find preset "es2015" relative to directory
    解决两个相邻的span,或者input和button中间有间隙,在css中还看不到
    VsCode中代码折叠快捷键
    npm 操作代码
    vue项目打包成html,在本地点击直接能打开
    地图只显示部分区域,其他地区不显示
    vs里颜色显示块怎样显示
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11634062.html
Copyright © 2020-2023  润新知