Web前端之BootStrap4

一.Scss
1.语法
1.变量
使用$开头
变量名称命名规范遵循css选择器的命名规范
可以包含-,_。尽量见名知意
ex
$jd_red:#f00; //颜色变量
$my-width:20px;
$normal-content:“grean person said”; //数值变量
$my-border-style:solid; //样式变量
$my_border:1$myb​order:1my-width $my-border-style $jd_red; //变量中引用其他变量
注意：1.声明变量时，变量定义在{}规则块外部，整个样式文件都可以该变量，如果定义在{}规则块里面，则只能在当前规则块中使用
2.声明变量时，变量值可以引用其他变量
3.声明重复的变量，后声明的变量会覆盖签名的变量
!default规则
如果变量已经声明赋值了，就使用这个声明的值
如果变量没有声明赋值，使用默认值
$jd_red:#f10215;
KaTeX parse error: Expected 'EOF', got '#' at position 8: jd_red:#̲00f !default; …jd_red就为#f10215
如果前面没赋值，就使用KaTeX parse error: Expected 'EOF', got '#' at position 8: jd_red:#̲00f 2.嵌套规则 #con…jd_red;}
p{background:$jd_red;}
}
div.middle{border:1px solid KaTeX parse error: Expected 'EOF', got '}' at position 8: jd_red;}̲ } 生成的css如下 #co…width/2;
2.被圆括号包裹height:(KaTeX parse error: Expected 'EOF', got '#' at position 64: …; 4.在有引号的字符串中使用#̲{}插值语句可以动态的添加值 …value) 四舍五入
ceil($value) 向上取整 floor($value)向上取整floor(value) 向下取整
min($v1,$v1,v2…)
max($v1,$v1,v2…)
random()随机数
3.字符串函数
unquote($str) 删除字符串的引号 quote($str)删除字符串的引号quote(str)给字符串添加引号
to_upper_case($str) 将字符串小写字母变成大写字母 to_lower_case($str)将字符串小写字母变成大写字母tol​owerc​ase(str) 将字符串大写变小写
2.自定义函数
@function get_width($n){
$w1:200px;
$w2:500px; @return ($w2:500px;@return(w2 - $w1)*$w1)∗n;
}
div{
width:get_width(2);
}
使用@function定义函数，使用@return定义返回值
@function 函数名称(参数){
@return 返回值;
}
练习
定义一个带参数的函数 get_width($n)
函数体中定义两个变量分别60px和10px
函数最终返回 $n乘以最大值 加上 $n-1 乘以最小值
并将结果赋值给div元素的width属性
3.控制指令
当@if的表达式返回值不是false或者null
表达式成立
表达式可以不加小括号
KaTeX parse error: Expected '}', got 'EOF' at end of input: …on; div{ @if(typesun){
background:#f00;
}@else if(KaTeX parse error: Expected '}', got '#' at position 29: … background:#̲0ff; }@else i…typemars){
background:#ff0;
}@else {background:#000;}
}
练习
声明一个函数，在函数中判断如果参数大于1，返回200px
如果等于1返回100px,否则返回0
并测试函数返回结果

项目：学子商城
1.首页的头部

作业：
1.完成header，顶部+主导航

2.完成footer

原文地址：https://blog.csdn.net/lb569484787/article/details/100622301