数据类型

在sass里有数字、字符串、列表、颜色等类型

在cmd里 输入

sass -i

就会进入到交互模式,输入的计算可以马上得到结果

type-of()可以用来得到数据类型,如:

type-of(5) -> number

注意数字类型的可以包含单位,如:

type-of(5px) -> number

字符串类型:

type-of(hello) -> string

type-of('hello') -> string

list类型:

type-of(1px solid red) -> list

type-of(5px 10px) -> list

颜色:

type-of(red)  -> color
type-of(rgb(255,0,0) -> color
type-of(#333) -> color

number 计算

2+9 -》10
2*8 -》16
(8/2) ->4 //除法要写括号

也可以包含单位

5px + 5px -> 10px
5px -2 ->3px
5px *2 ->10px 5px * 2px ->10px*px //这样就不对了哟 (10px/2px) -> 5//除法单位取消 3+2*5px->13px

好吧,都是一些小学的数学题,很简单对吧

处理数字的函数

绝对值

abs(10) -> 10;
abs(10px) -> 10px;
abs(-10px) -> 10px;

四舍五入相关

round(3.4)->3  //四舍五入
round(3.6)->4 ceil(3.2)->4 //向上取整
ceil(3.6)->4 floor(3.2)->3 //向下取整
floor(3.9)->3 percentage(600px/1000px) ->65% //百分之 min(1,2,3) -> 1 //最小值 max(2,3,4,5) -> 5 //最大值

字符串相关

//带引号和不带引号的字符串想加为带引号的字符串

"a" + b ->"ab"
a + "b" ->"ab" //字符串+数字
"ab" + 1 ->"ab1" //字符串 - 和 / 字符串
"a" - b ->"a-b"
"a" / b ->"a/b" //注意字符串不能相乘

字符串函数

大写:

$word:"hello";
to-upper-case($word) -> "HELLO"

小写:

$word:"Hello";
to-lower-case($word) -> "hello"

得到length:

$word:"Hello";
str-length($word) -> 5

得到字符串在字符串里的位置:

$word:"Hello";
str-index($word,"el") -> 2

字符串中插入字符串:

$word:"Hello";
str-insert($word,"aa",2) -> "Haaello"

颜色相关

在sass里除了关键字、十六进制、rgb和rgba之外还有一种颜色是HSL

分别表示的是 色相 0-360(deg) 饱和度 0-100% 明度 0-100%

例如:

body {
background-color:hsl(0,100%,50%);
} -》 body {
background-color: red;
}
body {
background-color:hsl(60,100%,50%);
} -》 body {
background-color: yellow;
}

也可以有透明哟

body {
background-color:hsl(60,100%,50%,0.5);
} -》 body {
background-color: rgba(255,255,0,0.5);
}

颜色函数

lighten函数和darken函数可以把颜色加深或减淡,即调整明度,第一个参数为颜色,第二个参数为百分比,例如:

$color:#ff0000;

$light-color:lighten($color,30%);

$dark-color:darken($color,30%);

.a{
color:$color;
background:$light-color;
border-color:$dark-color;
}

---》

.a {
color: #ff0000;
background: #ff9999;
border-color: #660000;
}

saturate和desaturate函数可以调整颜色的纯度

$color:hsl(0,50%,50%);

$saturate-color:saturate($color,50%);

$desaturate-color:desaturate($color,30%);

.a{
color:$color;
background:$saturate-color;
border-color:$desaturate-color;
}

--》

.a {
color: #bf4040;
background: red;
border-color: #996666;
}

用transparentize来让颜色更透明

用opatify来让颜色更不透明

$color:rgba(255,0,0,0.5);

$opacify-color:opacify($color,0.3);

$transparentize-color:transparentize($color,0.3);

.a{
color:$color;
background:$opacify-color;
border-color:$transparentize-color;
}

---》

.a {
color: rgba(255, 0, 0, 0.5);
background: rgba(255, 0, 0, 0.8);
border-color: rgba(255, 0, 0, 0.2);
}

列表类型

在sass里,用空格或者逗号隔开的值就是列表类型

如:

1px solid red

Courier,microsoft yahei

列表函数

sass里的列表类似与数组

获取列表的长度
length(5px 10x) 2 获取列表中的第几个元素
nth(5px 10px,2) 10px 获取一个元素在一个列表里的下标
index(1px solid red,solid) 2 给列表里加入新的元素
append(5px 10px,5px) 5px 10px 5px 连接两个列表
join(5px 10px,5px 0) 5px 10px 5px 0

map类型

sass里的map类型类似与js里的object

$map:(key1:value1,key2:value2,key3:value3);

map 函数

//定义一个map
$color:(light:#ffffff,dark:#000000); //获取map 的length
length($color) ->2 //得到map里key对应的值
map-get($color,dark) ->#000000 获取map里的所有键的列表
map-keys($color) ->("light","dark") //列表类型 获取map里的所有值的列表
map-values($color) -> ("#ffffff","#000000") //列表类型 判断map里是否含有这个key
map-has-key($color,light) ->true 给map里添加键值对
map-merge($color,(light-gray:#cccccc)) ->(light:#ffffff,dark:#000000,light-gray:#cccccc) 移除map里的某个键值对
map-remove($colors,light) ->(dark:#000000,light-gray:#cccccc)

boolean类型

在sass里通过> < 比较得到的值就是布尔值 true 和false

5px>3px -> true

5px<2px -> false

在sass里也可以有或 且 非

且:

(5px > 3px) and (5px < 2px) -> false
(5px > 3px) and (5px > 2px) -> true

或:

(5px > 3px) or (5px < 2px) -> true
(5px < 3px) and (5px > 2px) -> false

非:

not(5px>3px) -> false

interpolation

在sass里可以通过interpolation的方式来在变量名和属性名上拼接变量值,例如

$name:"info";
$attr:"border"; .alert-#{$name}{
#{$attr}-color:red;
}

---->

.alert-info {
border-color: red;
}

3.sass的数据类型与函数的更多相关文章

  1. SqlServer中日期和时间数据类型及函数 【转】

    来源:http://blog.csdn.net/royalwzy/article/details/6446075 日期和时间数据类型 下表列出了 Transact-SQL 的日期和时间数据类型. 数据 ...

  2. Sass中常用的函数

    字符串函数 To-upper-case() 函数将字符串小写字母转换成大写字母 To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母 数字函数 S ...

  3. Oracle数据类型,函数与存储过程

    字符串类型    固定长度:char nchar    n 表示Unicode编码    可变长度: varchar2 nvarchar2 数字类型:number(P,S)P:整数位数,S小数位数   ...

  4. 小白学 Python(17):基础数据类型(函数)(下)

    人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...

  5. Lua 学习之基础篇二<Lua 数据类型以及函数库 汇总>

    引言 前面讲了运算符,这里主要对Lua的数据处理相关的数据类型和函数库进行总结归纳,后面会再接着单独分开讲解具体使用. 首先因为Lua 是动态类型语言,变量不要类型定义,只需要为变量赋值. 值可以存储 ...

  6. Sass基本数据类型和各类型的原生方法

    数据类型: 数字:1,2,3,11,10px (可以带单位) 字符串:"asd",'asd',asd (有引号和无引号都是字符串类型) 如 $name : zhang san ; ...

  7. scala基础语法(变量,数据类型,函数)

    一:常量与变量 1.常量 2.两种变量定义方式(严格与不严格) 3.Float注意点 3.注意点 变量名后加上: 类型首字母是大写 4.占位符_ 但是需要制定类型 5.scala数据类型 6.其他类型 ...

  8. 读javascript高级程序设计01-基本概念、数据类型、函数

    一. javascript构成 1.javascript实现由三部分组成: ECMAScript:核心语言功能 DOM:文档对象模型,提供访问和操作网页内容的方法和接口 BOM:浏览器对象模型,提供与 ...

  9. MySQL中关于日期、时间的数据类型和函数

    一.日期相关的数据类型 1.datetime 占用8字节,既显示了日期,又显示了时间.其表示的日期范围为“1000-01-01 00:00:00”到“9999-12-31 23:59:59” 2.da ...

随机推荐

  1. 安装apache

    1.安装依赖软件 pcre gcc expat apr(Apache portable Run-time libraries,Apache可移植运行库) apr-util [root@localhos ...

  2. Android开发之漫漫长途 番外篇——内存泄漏分析与解决

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  3. zzuli 2131 Can Win dinic+链式前向星(难点:抽象出网络模型+建边)

    2131: Can Win Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 431  Solved: 50 SubmitStatusWeb Board ...

  4. Linux下编译memecaced

        安装memecached的时候要先把依赖的软件全部的安装上! 第一步: 在limux编译memcached需要 :yum install gcc make libtool autoconf 着 ...

  5. Vux配置指南

    流程 Vux是Vue.js的一个ui库,官网在这里,官方文档的配置指南侧重于技术的罗列,我这里简化一下Vux的配置流程. 1. 安装vux npm install vux --save 2. 安装le ...

  6. python内置函数(四)

    python内部提供了非常多内建函数. 以下让我们从a-z開始学习python的内建函数 1.1 id(object) 返回对象的id(身份),返回的这个是一个整数(integer)是唯一的,在这个对 ...

  7. SSH2——filter过滤器

    概述: 过滤器是Servlet2.3以上新添加的一个功能,其技术也是很强大的.通过Filter技术能够对WEBserver的文件进行拦截,从而实现一些特殊的功能. 在JSP开发应用中也是必备的技能之中 ...

  8. hibernate学习笔记之中的一个(JDBC回想-ORM规范)

    JDBC回想-ORM规范 JDBC操作步骤 注冊数据库驱动 Class.forName("JDBCDriverClass") 数据库 驱动程序类 来源 Access sun.jdb ...

  9. habase单机版安装及基本功能演示

    本文所使用的Linux发行版本为:CentOS Linux release 7.4.1708 (Core) 准备工作 创建用户 useradd -m hadoop passwd hadoop 下载安装 ...

  10. python 金融网贷数据,pandas进行数据分析并可视化系列 (词频统计,基本操作)

    需求: 某某金融大亨想涉足金融网贷,想给网贷平台取一个名字,那么取什么名字,名字里面包含哪些关键字,在行业内的曝光率会相比较高一些呢? 可以理解为: 你负责某某网贷平台的网络推广工作,如何进一步优化各 ...