先附上链接
CSS预处理器SASS从入门到高级进阶—完整视频课程【最新录制】_哔哩哔哩_bilibili
9.数字操作符
数字类型包括：纯数字，百分号，css部分单位（px，pt）
以下是sass的加运算
container{
/* +运算 */
width:50 + 20;
width:50 + 20%;
width:50% + 20%;
width:20 + 10px;
width:10px + 20px；
width：10px + 10pt(这里会默认对pt这个单位进行转换）；
width： 20% + 10px；百分号和px不能一起运算
}以上代码会转成
container{
/* +运算 */
width:70；
width:70%;
width:70%;
width:30px;
width:30px；
width：23.3333px；
/*dth： 20% + 10px；百分号和px不能一起运算*/
}减法与加法基本相同，其他单位与百分比进行运算的时候会报错
以下是乘运算
container{
/* *运算 */
width:10*20；
width:5*10%；
width:50% * 20%; /*出现了两个百分号*/
width:10px * 20px；/*出现了两个px单位*/
width：10px * 2；
}输出的结果是这样的
container{
/* *运算 */
width:200；
width:50%；
/*width:50% * 20%; 出现了两个百分号*/
/*width:10px * 20px；出现了两个px单位*/
width：20px；
}
可以看出，正确的乘法运算应该只有一项是有单位的
除运算
除法只有特殊情况下会变成除法，其余时间只会被认为是css里面的分割符
container{
/* /运算 */
width:10/5
}
//这个会被输出成
container{
/* /运算 */
width:10/5
}
可以使用 除 计算的特殊情况有
- 如果值或值的一部分。是变量或者函数的返回值
- 如果值被圆括号包裹时
- 如果值是算数表达式的一部分时
以下情况依次为
- 被圆括号包裹。
- 值的一部分是变量
- 值是算数表达式的一部分
container{
/* /运算 */
/*这个是个变量*/
$width:100px;
width：（10/5）;
width: $width / 10;
width：round（$number:50）/ 2;
width:10px / 2px + 3px;
}
最后输出的时候就会变成
container{
/* /运算 */
/*这个是个变量*/
width：2;
width: 10px;
width：25;
width:8px;
}%取模运算
代码如下
container{
/* %运算 */
width：10 % 3；
width：50 % 3px；
width: 50px % 3px；
width：50% % 7；
}
输出为
container{
/* %运算 */
width：1；
width：2px；/*余2*/
width：2px；
width：1%；
}可以看到，他们会自动填补式里面已知的单位，当没有任何单位的时候，才会直接输出数字，当取余的时候有pt这种单位时，或者说结果里面有一点误差，比如0.0001的时候。取余会省略掉
再简单总结一下：
纯数字与百分号或者单位运算时会自动1转换成相应的百分号或者单位值
字符串拼接的时候会有各种情况
container{
content："foo" +bar;
content： foo +"bar";
content: foo + bar;
content:"foo" + “bar”；
}全部没括号或者全部有括号就可以正常显示
如果左边有括号 右边没有的话 ，输出的结果是有括号的
如果左边没括号 右边有的话，结果是没有括号的
10.差值语句
需要呈现变量相互计算的这种情况的时候
比如
p{
font：12px/30px;
}（这个时候，/ 只是当做分隔符处理）
如果希望这两个值不是固定的，可以去设置变量
加入变量之后
$font-size:12px;
$line-height:30px;
p{
font:$font-size/$line-height
}但是这样写的话会有一个问题。当我们想输出的只有分割符的时候，因为式子里面已经有了变量，出来的结果必然就是计算的值，我们可能要处理一下，使得最终出来的结果也是分割符。
修改之后的代码如下
$font-size:12px;
$line-height:30px;
p{
font:#{$font-size} / #{$line-height}
}
加入了#{}这样的差值语句，两边就又是变量，/也又是分割符了
这个出来的结果就是这样的
p{
font：12px/30px
}这个就是差值语句
对于其他变量也可以这样插进来
比如想表示成这样
a.danger {
border-color:#f00;
}我们先创建两个变量
$class-name:danger;
$attr:color;之后的代码如下、
a.#{$class-name}{
border-#{$attr}:#f00;
}他的输出结果也是与第一种一样的。也就是变量原样输出
11.sass常见函数的使用
颜色函数
例如lighten（）与darken（）函数可用于调亮或调暗颜色，opacify（）函数可以使颜色透明度增加，nux（）函数可以混合两种颜色
示例代码如下
.p0{
background-color:#5c7a29;
}
.p1{
/*
让颜色变亮
lighten（$color,$amount）
$amount的值在0% - 100%之间
*/
background-color：lighten（#5c7a29,30%）;
}
.p2{
//让颜色变暗 通常使用color.scale()代替该方案
background-color:darken(#5c7a29,15%);
}
.p3{
//降低颜色透明度 通常使用color.scale()代替该方法
//background-color：opacify（#5c7a29,0.5）
}这些最终编译出来的时候，直接就会修改16进制颜色的值。
字符串函数
字符串添加引号quote（），获取字符串长度string-length() 将内容插入字符串指定位置 string-insert（）
如下代码的功能，从上往下是在p的后面加入字符串 这是里面的内容 第二个是让本来是字符串的#f00去掉引号 第三个是将一段文本的长短值用在z-index；里
p{
&：after{
content：quote（这是里面的内容）
}
background-color：unquote（$string:"#f00"）;
z-index:str-length("sass学习")
}这段代码编译结束后的结果如下
p{
background-color：#f00；
z-index：6；
}
p:after{
content:"这是里面的内容"
}
math数值函数
数值函数处理数值计算，例如：percntage（）将无单元的数值转换为百分比，round（）将数字四舍五入为最接近的整数，min()和max（）获取几个数字中的最小值
或最大值，random（）返回一个随机数
以下为部分使用案例
p{
z-index:abs($number: -15);
z-index:ceil(5.8);
z-index:max(5，1，6，8，3）;
opacity:random();
}输出的结果为
p{
z-index:15;
z-index:6;
z-index:8;
opacity:0.47457;
}就和js的内置方法一个意思
list函数
list函数操作list，length（）返回列表中的特定项，join（）将两个列表链接在一起，append（）在列表末尾添加一个值.
处理的是那些分割了的内容，逗号或者空格分割
以下为案例
p{
z-index:length（12px）;//这个长处就是1
z-index:length (12px 5px 8px）；//这个长度就是3
z-index:index(a b c d, c);//找c所处的位置，也就是第三个
padding:append(10px 20px,30px);//把最后这个值追加到list
color:nth($list:red blue green,$n:2);//找到list里面的某个值
}
编译出来的结果就是这样的
p{
z-index:1;
z-index:3;
z-index:3;
padding:10px 20px 30px;
color:blue;
}
map函数
map函数操作Map, map-get()根据键值获取map中的对应值，map-merge（）来将两个map合并成一个新的map，map-values（）映射中所有的值。
案例如下
先创造两个变量
$font-sizes:("small":12px,"normal":18px,"large":24px);
$padding:(top:10px,right:20px,bottom:10px,left:30px);
p{
font-size: map-get($font-sizes, "normal"); //翻译过来就是get了font-size里面normal的内容，也就是18px
@if map-has-key($padding,"right"){ //这句判断是判断$padding里面是否存在一个叫right的key存在就执行
padding-right: map-get($padding,"right"); //这句就是getright的值
}
&:after{
conter: map-keys($font-sizes) + " " + map-values($padding) + "";//取出所有的key 和所有的value
}
}
编译结束之后就是这样
p{
font-size：18px；
padding-right：20px；
}
p：after {
content：‘“small”，“normal”，“large”10px，20px，10px，30px
}
选择器函数
选择符相关函数可对css选择进行一些相应的操作，例如：selector-append（）可以把一个选择器附加到另一个选择符，selector-unify（）将两组选择器合成一个复合选择器
案例代码如下
.header{
background-color:#000;
content:selector-append(".a" , ".b" , ".c") + "";
content:selector-unify("a",".disabled") + '';
}编译结果如下
.header{
background-color:#000;
content:".a.b.c";
content:"a.disabled";
}
自检函数
自检相关函数，例如：feature-exists（）检查当前Sass版本是否存在某个特性，variable-exists（）
案例如下
$color:#f00;
@mixin padding($left:0, $top:0, $right:0, $bottom:0) {
padding：$top $right $bottom $left;
}
.container {
@if variable-exists(color){ // 如果这个color存在
color：$color;
}
@else{ //否则用这个样式
content:"$color不存在";
}
@if mixin-exists(padding){ //如果混入存在padding
@include padding($left:10px,$right:10px);
}
}编译结束之后是这样
.container{
color:#f00;
padding:0 10px 0 10px;
}
12.sass流程控制指令 @if
代码如下
$theme:"green";
.container{
@if $theme == "red" {
color: red;
}
@else if $theme == "blue"{
color:blue;
}@else if $theme == "green
color:green;
}@else {
color:darkgray;
}
}
因为最上面变量的值是green，在经过条件判断之后，最终的输出结果就是green
也可以使用混入
大概是这样
@mixin name （$di:top , $si:30px, $bo: black){
@if($di == top){
再输入实现的功能。
}
}13.sass流程控制指令 @for
@for指令可以在限制的范围内重复输出格式，每次按需求（变量的值）对输出结果做出变动，这个指令包含两种模式：@for ￥var from<start>through<end>,或者@for $var from<start>to<end>
这两种模式区别在于through与to的含义：
当使用through时，条件包含<start>与<end>的值
当使用to时条件范围只包含<start>的值不包含<end>的值
另外，$var可以是任何变量，比如$i;<start>和<end>必须是整数值
下面是示例代码
@for $i from 1 to 4{ //to的话不包含end 也就是说生成的$i 为1，2，3
.p#{$i}{
width:10px * $i;
height:30px;
background-color:red;
}
}编译之后的效果如下
.p1{
width：10px；
height：30px；
background-color：red；
}
.p1{
width：20px；
height：30px；
background-color：red；
}
.p1{
width：30px；
height：30px；
background-color：red；
}
这些一共是输出了三个,因为用的是to这个类型
另外一种 也就是through的时候，就会在循环的时候包含end的内容
代码如下
@for $i from 1 through 4{ //这个最后就是返回1，2，3，4四个值
.p#{$i}{
width:10px *$i;
height:30px;
background-color:red;
}
}咳咳，因为后面组长叫我先别看视频学了，所以还有一点点就没看了。其实到这里后面就完全可以看文档学习了。
2328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
