动态样式语言 scss sass less

467 阅读4分钟

静态样式语言: 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 分支名;