// 除法

// 当变量用数字连接时此时代表除法运算

// 当值被圆括号包裹起来是？

// 运算表达式里面q

// 当不想让变量运算时可以用插值表达式

p {$num1: 1000;$num2: 20;width: $num1/10;height: (100px/2);
}

案例1

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css/sass 运算符的使用.min.css">
</head><body><p></p>
</body></html>

scss

p {width: 500px;height: 500px;$num5: 300px;$num6: red;@if $num5<400px and $num6==red {background: orange;}@else {background: blue;}
}

案例2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css/sass函数.min.css">
</head><body><div><div class="div_1"></div><div class="div_2"></div><div class="div_3"></div></div>
</body></html>

scss

div {width: 200px;height: 100px;background: gainsboro
}.div_1 {@extend div;background: rgb(243, 56, 56)
}.div_2 {@extend div;background: lighten($color: rgb(243, 56, 56), $amount: 30);
}.div_3 {@extend div;background: darken($color: rgb(243, 56, 56), $amount: 30);
}

效果：

Sass 常见函数的基本使用

Color(颜色函数)

Sass包含很多操作颜色的函数。

lighten() 与 darken()函数可用于调亮或调暗颜色

opacify()函数使颜色透明度减少

transparent()函数使颜色透明度增加

mix()函数可用来混合两种颜色。

String（字符串函数）

Sass有许多处理字符串的函数。

向字符串添加引号的quote()

获取字符串长度的str-length()

将内容插入字符串给定位置的str-insert()

Math(数值函数)

数值函数处理数值计算。

percentage()将无单元的数值转换为百分比

round()将数字四舍五入为最接近的整数

min()和max()获取几个数字中的最小值或最大值

random()返回一个随机数。

List函数

List函数操作List。

length()返回列表长度

nth()返回列表中的特定项

join()将两个列表连接在一起

append()在列表末尾添加一个值。

Map函数

Map函数操作Map。

map-get()根据键值获取map中的对应值

map-merge()来将两个map合并成一个新的map

map-values()映射中的所有值。

selector选择器函数

选择符相关函数可对CSS选择进行一些相应的操作。

selector-append()可以把一个选择符附加到另一个选择符

selector-unify()将两组选择器合成一个复合选择器。

sass 运算符的使用和常见的基本函数相关推荐

小白终是踏上了这条不归路----小文的mysql学习笔记（4）----常见的基本函数
** 小白终是踏上了这条不归路----小文的mysql学习笔记(1) 小白终是踏上了这条不归路----小文的mysql学习笔记(2)----条件查询小白终是踏上了这条不归路----小文的mysql学 ...
Sass运算符、函数
一.运算符首先我们要知道Sass的数据类型数字 :1.2.3.10px 字符串:有引号的字符串:"foot".'bar' 没有引号的字符串:baz 颜色:blue,#9999 ...
位运算符取反_Java常见的运算符——位运算
位运算符 <<左移先说左移运算符,它的符号表示是<< 举个例子,先定义一个int类型的数,十进制的value = 733183670,转换成二进制在计算机中的表示如下(int ...
零基础学习 Python 之运算符
写在之前截止到昨天我已经写完了 Python 的基本对象类型,在了解了这些戏本的对象类型以后,我们就可以用 Python 的语句来使用它们,语句的作用就是用某些逻辑组合操作某些对象,所以接下来的一段 ...
iOS c语言基本运算符
2019独角兽企业重金招聘Python工程师标准>>> iOS_06_基本运算符一.算术运算 c语言一共有34种运算符,包括了常见的加减乘除 1.加法运算+ # 除了能做加法运算, ...
java 自定义运算符_Java中集合的自定义运算符
java 自定义运算符总览操作员重载有多种语言可用. Java对String类型的+运算符的支持对运算符的重载非常有限. 我们可以利用其他语言支持运算符的不同方式,但是我们可以在Java中实现一个 ...
Java中集合的自定义运算符
总览操作员重载有多种语言可用. Java对String类型的+运算符的支持对运算符的重载非常有限. 我们可以利用其他语言支持运算符的不同方式,但是可以在Java中实现一个使用Java已经使用的约定的 ...
有意思的C语言运算符
在C语言中,运算符用于执行程序代码运算,会针对两个或者两个以上操作数进行运算.比如:5 - 2,它的操作数是 5 和 2,而运算符则是 "-".常见的运算符可大致分为 4 种类型: ...
php中常用的运算符和表达式有哪几种,php 运算符与表达式详细介绍
php 运算符与表达式一.运算符的分类 1.按操作数分类 1.!true // 一元运算符 2.$a+$b // 二元运算符 3.true ? 1:0 // 三元运算符 2.按操功能分类 (1)算术 ...
52道常见Python面试题，你都能答对吗？
52道常见Python面试题,你都能答对吗? 最近有很多人找小编询问python求职面试的一些情况,python岗位众多,面试官的个性也千人千面,其实是没有固定的套路的.还是一句老话,要成功拿下一个重 ...

sass 运算符的使用和常见的基本函数

案例1

案例2

Sass 常见函数的基本使用

sass 运算符的使用和常见的基本函数相关推荐

最新文章

热门文章

sass 运算符的使用 和常见的基本函数

案例1

案例2

Sass 常见函数的基本使用

sass 运算符的使用 和常见的基本函数相关推荐

最新文章

热门文章

sass 运算符的使用和常见的基本函数

sass 运算符的使用和常见的基本函数相关推荐