动态样式语言 sass/less git/svn工具

130 阅读4分钟

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;//自动编译,一旦保存xx.scss就会自动生成一个xx.css
	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:运算:尤其是颜色值可以进行运算
	//#000000 - #ffffff
	//黑(暗)      白(亮)
	//0最小 - f最大
	//乘以个1.x,一定会让此数字变大不断的靠近白色
	//乘以个0.x,一定会让此数字变小不断的靠近黑色

特性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 分支名;