先附上链接
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;
}
}
咳咳,因为后面组长叫我先别看视频学了,所以还有一点点就没看了。其实到这里后面就完全可以看文档学习了。