程序中的运算是常见的一件事情,但在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行。但在 Sass 中,运算只是其基本特性之一。在 Sass 中可以做各种数学计算

(一)、加法

加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算。如:

但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示:

编译的时候,编译器会报错:“Incompatible units: 'em' and ‘px'.”

SassScript中用到的两种单位之间的转换;
绝对单位:px, pt, pc, in, mm, cm...绝对单位都能运算;
相对单位:ex, em, rem...相对当前字体的都不能运算;

Sass-加法的更多相关文章

  1. SCSS入门

    1. CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多好处 ...

  2. SCSS详解

    SCSS入门 CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等 ...

  3. 再说scss

    1. CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多好处 ...

  4. vue入门文章

    本来想自己写一篇关于vue入门的文章.但是看到链接的文章后,觉得写得太详细了,实在有保存下来的必要.后面可能在这篇文章基础上,有所内容的增加. CSS预处理器 定义了一种新的专门的编程语言,编译后成正 ...

  5. Sass学习笔记之入门篇

    Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...

  6. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  7. Sass的学习

    第一章:Sass简介 一. 什么是CSS预处理器 定义:CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用 ...

  8. Sass的基本运算(转载)

    转载于:http://www.cnblogs.com/Medeor/p/4966952.html Sass中的基本运算 一.加法 在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.但在 ...

  9. Sass和Compass设计师指南

    注:配合查看:Sass 为什么使用Sass和Compass? 1.减少重复工作,加快开发进度 2.使用变量,便于记忆,变量使用$符号开头 3.自动转换RGBA颜色值 .color { color: $ ...

  10. Sass运算

    加法在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.在 Sass 中,运算只是其基本特性之一.在 Sass 中可以做各种数学计算.加法运算是 Sass 中运算中的一种,在变量或属性中 ...

随机推荐

  1. ActiveMQ点对点模式

    1.安装ActiveMQ服务器(略) 2.启动ActiveMQ,浏览器访问8161端口,默认账号admin/admin 3. 生产者代码 package test001; import org.apa ...

  2. 流氓软件修改IE主页的解决方法

    运行regedit HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main 修改以下url Default_Page_URL Firs ...

  3. 手动ubuntu 18.04修改登录锁屏界面效果(含登录背景修改)flat-remix

    前言 在ubuntu 18.04,可以通过修改/etc/alternatives/gdm3.css来进行修改 本来想直接使用flat-remix主题,但是只有这个登录界面没有达到作者演示的效果,所以手 ...

  4. [USACO17JAN]Balanced Photo平衡的照片 (树状数组)

    题目链接 Solution 先离散化,然后开一个大小为 \(100000\) 的树状数组记录前面出现过的数. 然后查询 \((h[i],n]\) 即可. 还要前后各做一遍. Code #include ...

  5. mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解

    文章来源:小青年原创发布时间:2016-05-29关键词:mui,html5+,XMLHttpRequest,ajax,懒加载转载需标注本文原始地址: http://zhaomenghuan.gith ...

  6. EZOJ #385 排列

    分析 对于第一问我们直接从上到下枚举所有横边 每一次交换两边的列标号即可 对于第二问我们发现答案就是最终序列的逆序对数量 代码 #include<bits/stdc++.h> using ...

  7. loj6259「CodePlus 2017 12 月赛」白金元首与独舞

    分析 我们将没连的点连向周围四个点 其余的按照给定的方向连 我们将所有连出去的位置统一连到0点上 再以0作为树根 于是就将问题转化为了有向图内向树计数 代码 #include<iostream& ...

  8. python tensorflow windows环境搭建体验

    1. 需先安装python3.7,anaconda包管理器(类似java的maven),tensorflow,pycharm开发工具.文末附件下载地址. 2. 安装tensorflow,开始-Anac ...

  9. shell脚本一一项目4

    主题:一键查看服务器使用率 cpu vmstat  suyu wa memery free disk  df -h  /dev tcp连接数 netstat cpu(){ used=$(vmstat ...

  10. Jmeter接口测试报告模板优化(续)

    在之前的基础上又优化了一下: 1.增加了对接口响应时间段的统计,如小于0.5s的请求有多少,0.5-1s的有多少,大于1s的有多少.可以自行修改.且不同范围内的时间字体颜色不一样,便于区分. < ...