1.静态样式语言和动态样式语言
静态样式语言:
css,他作为一门语言并不称职,没有语言必须拥有基础概念:变量、运算、函数、分支、循环...等等语言所必备的基础概念都没有
导致大型项目中进行开发和维护都非常的麻烦
动态样式语言:【在css的基础之上】添加了语言必备的概念 - 会css基本就会了
目的:简化css开发
市场上常用的动态样式语言:
1、sass/scss - 会css基本就会了,学习其中一个另一个也就会了
2、less - 会css基本就会了,学习其中一个另一个也就会了
3、stylus - 不学,和css语法区别较大
1、sass/scss编译:sass/scss=(编译)=>css
为什么:浏览器只认识css,不认识其他的动态样式语言,但是程序员书写动态样式语言又会减轻我们的负担,说白了
程序员写动态样式语言,但是要进行编译,页面上引入时引入的还是css
如何编译:
1、vscode的人员:安装插件easy sass;
2、HBuilder的人员:安装插件,
3、网上一大堆动态样式语言编译工具:koloa
2、scss带来的新特性:
*特性1:变量:
语法:$变量名: 值;
特殊:
1、使用时:$不能省略
2、可以创建局部变量,选择器{$局部变量名: 值;}
3、不区分中划线和下划线,都可以
***特性2:嵌套:- 很大一部分人学了动态样式语言的目的就是为了学习这一个知识点
.d1{
d1的样式
.d2{d2的样式
&:hover{hover样式}
}
>.d3{d3的样式}
}
编译后:
.d1{d1的样式}
.d1 .d2{d2的样式}
.d1 .d2:hover{hover样式}
.d1>.d3{d3的样式}
特殊:
1、层级选择器不写的话,默认使用后代选择器(空格)
2、&:类似于javascript中的this,&包含在那个大括号里面就代表是谁
特性3:导入:
@import:css也有,但是绝对不要再css使用,因为引入html后,js无法操作样式
但是scss可用
语法:@import "文件名"
为什么不推荐:因为自己的页面只需要自己的css,不需要别人的,一般只有开发框架的人才会使用此特性
*特性4:注释:提示自己或别人
不要使用单行注释
要使用多行注释才可以
特性5:混合器:类似于javascript中的函数:
1、创建混合器
@mixin 混合器名($形参:默认值,...){
width:$形参;
}
2、调用混合器
@include 混合器名();
特殊:1、没有传入实参,使用默认值
2、如果传入实参,则使用实参
何时:先写代码,碰到重复多了时,则封装为一个函数
*特殊6:运算:尤其是颜色值可以进行运算
特性7:分支和循环,不要用都是垃圾
2、Less:和Scss有两点不同:
1、变量:@变量名:值; 需要区分中划线和下划线...
2、混合器:
创建:
.混合器名(@形参:默认值,...){
width: @形参;
...
}
使用:
div{
.混合器名();
}
其余全部一样
3、Bootstrap定制:
*1、直接写自己的覆盖它的 - 删除掉你覆盖的部分,不然会有一些无用的代码
2、在源代码css中进行修改 - 找起来麻烦
3、作者们对推荐你:操作源代码 - 我不推荐,因为源代码找起来也恼火
4、git/svn工具:代码托管平台 - 大家一起合作开发
git(9+):分布式版本管理控制工具
优点:人人都是客户端,人人都是服务器端(云端)
缺点:黑客大佬,可能会破解你的项目
svn(1-):集中式版本管理控制工具
优点:所有的代码都保存在项目经理处(服务器端)
缺点:服务器端一旦电脑坏了,完蛋
一般都是一些老公司或者要是项目保密强的公司
1、git:如何使用:
1、安装:
先安装:Git-2.18.0-64-bit.exe - 命令行方式
在安装:TortoiseGit-2.6.0.0-64bit - 小乌龟(提示功能)
重启电脑
2、分职位做操作:
1、项目经理:
1、打开gitee网站:注册/登录
2、创建项目仓库:选择开源/私有(仓库成员才能访问)
3、将仓库地址私发给对应的开发人员
4、监督项目流程、进度
2、开发人员:
1、对着电脑任意位置右键:git bash here
2、将项目仓库拉到本地:git clone 仓库地址
3、做你该做的项目开发
4、今天下班之前:传到云端:在项目中再次右键重新打开git bash here
1、git add . - 将新增的或者修改的文件添加到本地git(蓝色+号)
2、git commit -m"必须写日志" - 将新增的或者修改的文件提交到本地git服务器
3、推送到云端:git push origin master
5、第二早上一来:先更新仓库:- 第二天来了可以更新看看后端有没有做好什么接口,我今天可以使用
git pull origin master
6、特殊用法:分支:分工合作
1、查看分支:git branch - master主分支
2、创建分支:git branch 分支名
3、切换分支:git checkout 分支名
4、合并分支:git merge 分支名
5、删除分支:git branch -d 分支名