静态样式语言: css,他作为一门语言并不称职,没有语言必须拥有基础概念:变量、运算、函数、分支、循环...等等语言所必备的基础概念都没有
缺点: 导致大型项目中进行开发和维护都非常的麻烦
动态样式语言:【在css的基础之上】添加了语言必备的概念
目的:简化css开发
市场上常用的动态样式语言:
1、sass/scss - 学习其中一个另一个也就会了
2、less - 会css基本就会了,学习其中一个另一个也就会了
3、stylus - 不学,和css语法区别较大
1、sass/scss编译:sass/scss=(编译)=>css
为什么:浏览器只认识css,不认识其他的动态样式语言,但是程序员书写动态样式语言又会减轻我们的负担,说白了
程序员写动态样式语言,但是要进行编译,页面上引入时引入的还是css
如何编译:
1、vscode的人员:安装插件easy sass;//自动编译,一旦保存xx.scss就会自动生成一个xx.css
2、HBuilder的人员:安装插件,//手动编译,对文件点击右键->编译
3、网上一大堆动态样式语言编译工具:koloa
一、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中的函数:
5.1、创建混合器
@mixin 混合器名($形参:默认值,...){
width:$形参;
}
5.2、调用混合器
@include 混合器名();
特殊:1、没有传入实参,使用默认值
2、如果传入实参,则使用实参
何时:先写代码,碰到重复多了时,则封装为一个函数
*特殊6:运算:尤其是颜色值可以进行运算
//#000000 - #ffffff
//黑(暗) 白(亮)
//0最小 - f最大
//乘以个1.x,一定会让此数字变大不断的靠近白色
//乘以个0.x,一定会让此数字变小不断的靠近黑色
特性7:分支和循环,不要用都是垃圾
二、Less:和Scss有两点不同:
1、变量:
@变量名:值; 需要区分中划线和下划线...
2、混合器: 创建: .混合器名(@形参:默认值,...){ width: @形参; ... }
使用:
div{
.混合器名();
}
其余全部一样
3、Bootstrap定制:
*1、直接写自己的覆盖它的 - 删除掉你覆盖的部分,不然会有一些无用的代码
2、在源代码6800行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、对着电脑任意位置右键: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 分支名;