Boot(重点SCSS☆☆☆☆☆)(day03)

10.媒体对象
div.media    弹性,主轴x,交叉轴start>img+div.media-body  flex:1;
11.焦点轮播图
1.最外层大包裹
div.carousel   事件  data-ride="carousel"
①轮播的图片>div.carousel-inner>div.carousel-item   其中一个写.active>img.w-100
②左右箭头
a.carousel-control-prev/next>span.carousel-control-prev/next-icon
注意,按照我们的需求,需要重写样式
.carousel-control-prev,
.carousel-control-next{width:4%;height:20%;background-color:#aaa;border-radius: .25rem;top:40%;
}
.carousel-control-prev{left:0.25rem;
}
.carousel-control-next{right:0.25rem;
}
③轮播指示器
ul.carousel-indicators>li   一个li.active
事件 li  data-slide-to="n" data-target="#demo"
根据自己的需求,重写样式
//中屏以上
@media (min-width:768px) { .carousel-indicators li{width:0.8rem;height:0.8rem;border-radius: 50%;background:#fff;margin-left:0.4rem;margin-right: 0.4rem;}
}
//小屏以下
@media (max-width:767px) {.carousel-indicators li{width:0.4rem;height:0.4rem;border-radius: 50%;background:#fff;margin-left:0.2rem;margin-right: 0.2rem;}}.carousel-indicators li.active{background:#0aa1ed;}12.模态框
div.modal>div.modal-dialog>di.modal-content>div.modal-header+div.modal-body+div.modal-footer 七.其它组件
1.徽章
.badge   基本类
.badge-danger/warning...
.badge-pill 胶囊徽章2.巨幕
. jumbotron  巨大的内边距3.面包屑导航
面包屑导航的本意,有递进关系的导航
ul.breadcrumb>li.breadcrumb-item
修改li之间的连接符号
.breadcrumb-item + .breadcrumb-item::before{content:">";
}4.分页
ul.pagination>li.page-item>a.page-link5.进度条
div.progress>div.progress-bar  .w-75  .bg-danger
progress-bar-striped 带条纹的进度条
progress-bar-animated八.SCSS（BOOT的重点  手写媒体查询+栅格布局+scss）
1.css的不足
语法不够强大,
没有合理的样式复用机制
导致难以维护,难以管理
我们需要使用动态的语言,赋予css新的特性
提高样式语言的可维护性,可管理性
常见的动态样式语言
1.scss/sass (scss兼容sass ,scss更接近css语法)
2.stylus
3.less2.scss是什么
SCSS 是一款强化css的辅助工具
它和css语法十分相似,
在css的基础上,添加了变量,嵌套,混合,导入,函数等高级功能
这些拓展命令,让scss写css更加的强大与优雅3.scss的使用
scss在服务器端使用
32的scss要求nodejs解释器8.11
64的scss要求nodejs 10.1
1.在线安装 npm install -g node-sass
2.离线安装 把文件中解压好的文件复制进nodejs安装包中
在cmd中执行 node-sass –v 提示版本号就是成功4.把scss文件转换成css
1.单文件转换
node-sass scss文件路径和名称 css文件路径和名称
2.多文件转换
node-sass scss文件夹 –o  css文件夹
3.单文件监听
node-sass –w 文件路径和名称 css文件路径和名称
4.多文件监听
node-sass –w scss文件夹 –o  css文件夹
九.scss的语法
1.变量
声明变量,以$开头
可以使用字母,数字 - _  ,不要以数字开头,不要用关键字
尽量见名知意
变量值:颜色,数值,字符串,关键字,引用其他变量变量的作用域,在离得最近的{}内使用
定义在{}外的变量,大家都能用
!default规则:如果此变量在之前声明了,那么就是用之前声明的值之前没声明,使用现在的值2.嵌套
#content{border:1px solid #f00;p{background:#00f;a{text-decratioin:none;}b{text-style:normal;}}div{background:#00f;ul{list-style:none;li{border:0;a{text-decoration:none;}img{outline:0;}}}}
}
注意:1.有可能选择器会发生冲突,因为只能生产后代选择器2.出现伪类选择器,会有问题,需要加&符号占位群组嵌套
div,p,h3{a{color:red;&:hover{color:blue;}}
}属性嵌套
div{border:{width:100px;style:solid;color:#f00;}
}3.导入
以_开头的scss文件,叫做局部scss文件
局部scss不会被转换成css文件
把许多局部scss导入到一个正常scss中
直接转换这个正常的scss文件为css
那么所有导入的局部scss代码都会在这个css中出现@import "局部scss名称"  不带下滑线,不带后缀
eg: @import "abc"
局部文件被导入后,局部文件中的代码会在全局文件中生成
局部文件的变量可以在全局文件中使用4.混合器
把一段经常被使用的样式封装成混合器
哪里需要使用,就调用混合器,实现代码的重用
定义混合器
@mixin 混合器名称(参数1,参数2){样式}
调用混合器 @include 混合器名称(实参1,实参2);5.继承
一个选择器可以继承另外一个选择器所有的样式
@extend 选择器名称;
继承效果,两个选择器,形成群组选择器6.运算 +  -   /
相对单位不能转换,绝对单位可以自动转换
①加法
字符串拼接的时候
如果使用带双引号的字符串+不带双引号的字符串,结果带双引号
如果使用不带双引号的字符串+带双引号的字符串,结果不带双引号
②减法
由于变量声明的时候,可以使用-
系统分不清楚,- 是变量名称还是减法
我们写的时候在-前后添加空格.告诉系统,我是减号
width:$my-width - $my-width1;
③除法
scss中 /,除了解析成除法外,还被看成分割符
视为除法的几种情况
1.如果运算式两边的数字,是变量或者方法的返回值
2.运算式被()包裹
3.除法运算式,是其它运算式的一部分
④scss字符串中的插值操作
content:"liangCheng ate #{50+100} baozis";
⑤颜色的计算
分段计算    r+r  g+g  b+b 如果超过255,或者ff.就取ff或者255
rgb(11,22,33)+#162c42
rgba的计算,需要a的值,相同,才可以计算7.函数
①scss中定义了很多函数,有些函数直接在css中使用
rgba
hsl(hue,saturation,lightness)
hue:色调  0~360
saturation:饱和度  0.0%~100%
lightness:亮度 0.0%~100%
background:hsl(120,100%,50%);
②数学函数
round($val) 四舍五入
ceil($val); 向上取整
floor($val); 向下取整
min($v1,$v2.......)
max($v1,$v2.......)
random() 随机数
③字符串函数
unquote($str) $str去掉引号
quote($str) $str加上引号
to_upper_case($str) $str转成大写
to_lower_case($str) $str转成小写
④自定义函数
@function 方法名称($v1,$v2....){逻辑@return 返回值;
}8.指令
@if(){}@else if(){}@else{}

Boot(重点SCSS☆☆☆☆☆)(day03)相关推荐

Debian的GRUB开机画面和好看的命令行
网上文章一大堆,不过总觉得让人摸不着头脑.在同事Alex的帮助下,总算搞清楚了这些琐琐碎碎.随写下来,备忘~ --------------------------------------------- ...
二、Linxu的目录结构
文章目录 1.基本介绍 2.目录结构的具体介绍 3.Linux目录总结 1.基本介绍 linux 的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录"/",然后在此 ...
【基础篇】Linux的目录结构
●基本介绍 linux 的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录"/",然后在此目录下再创建其他的目录. ●目录结构的具体介绍 ●/bin[重点] (/ ...
linux 学习笔记
linux流程: 记住一句经典的话: 在Linux世界里,一切皆文件. 基本目录结构 /bin[重点] 是Binary的缩写,这个目录存放着最经常使用的命令 /home[重点] 存放普通用户的主目录, ...
Linux的文件目录结构
前言由于Linux的根目录只有一个 / ,不想在使用windows的时候有多个盘符来管理,而且在使用的时候,对于文件的存放位置有着很大的讲究,并非随便存放,这样对于文件的管理也十分的方便. 结构树 ...
Linux学习笔记（自用）
Linux学习笔记(自用) 该笔记由尚硅谷的"3天上手LInux"视频整理而成,若有侵权,请联系作者删除文章目录 Linux学习笔记(自用) 1. 概述 2. 下载 3.文件与目 ...
Linux的学习笔记（学习于尚硅谷）
当前的IT行业,各个企业的应用服务都是跑在服务器上的,服务器其实就是一种特殊的电脑,服务器的操作系统目前绝大多数都是Linux,不管哪个行业,只要和服务器打交道,就必须了解Linux. 笔记内容: 入 ...
3、Linux文件与目录结构
文章目录 3.Linux文件与目录结构 3.1 Linux文件 3.1.1 文件系统 3.1.2 挂载点 3.2 Linux目录结构尚硅谷2022版Linux教程-讲师:武晟然壁立千仞无欲则刚 ...
详解 Linux操作系统的目录结构
详解 Linux操作系统的目录结构 1 基本介绍 2 目录结构的具体介绍 3 Linux 目录总结 1 基本介绍 linux 的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录" ...

Boot(重点SCSS☆☆☆☆☆)(day03)

Boot(重点SCSS☆☆☆☆☆)(day03)相关推荐

最新文章

热门文章