其他分享
首页 > 其他分享> > day33 sass和git

day33 sass和git

作者:互联网

sass

概述:

sass属于对应的预编译css(这个东西会被编译为css)他相对是css扩展(简化css代码)(less、stylus)

sass的环境支持

1.sass需要ruby语言支持(之前)

2.需要python语言支持(node其中其实有python的环境)

主要是用sass进行编译的css(而不是直接使用sass)之后当我们的项目是通过node来构建的时候 我们就可以使用sass

解析的方式

1.使用node 来安装对应的sass

npm i sass -g

sass 对应的sass文件:编译的文件

2.使用的vscode自带的插件来解析

主要使用easy sass

 

 

 扩展设置

 

 

 后缀(建议采用scss)

sass的相关内容

变量声明

$a:20px;
$b:red;
.box{
height: $a;
color: $b;
}

生成的css

.box {
height: 20px;
color: red;
}

嵌套(子父关系)

$a:20px;
$b:red;
.box{
height: $a;
color: $b;
div{
color:$b;
}
}

生成的css

.box {
height: 20px;
color: red;
}
.box div {
color: red;
}

支持群组嵌套

.box{
height: $a;
color: $b;
a,b,del,p{
height: $a;
}
}

生成的css

.box a, .box b, .box del, .box p {
height: 20px;
}

对应的&符号(表示当前父类)

.example {
color: red;
& div{
width: 100px;
}
}

生成的css

.example div {
width: 100px;
}
.example div a {
width: 100px;
}

支持运算符(+ - * / %)

$a:20px;
$b:red;
$w:300px;
.box{
height: $a/2*5;
color: $b;
width:300-20+px;
div{
color:$b;
}
a,b,del,p{
height: $a;
}
}

支持判断

@if $b==red {
background-color: blue;
}

支持循环

@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}

混入器

@mixin hi{
border:1px;
color:red;
}
div{
@include hi()
}

解析的css

div {
border: 1px;
color: red;
}

复杂混入器

@mixin test($a,$b,$c) {
border: $a solid $b;
color: $b;
background-color: $c;
}
p{
@include test(1px, red, yellow)
}

解析

p {
border: 1px solid red;
color: red;
background-color: yellow;
}

支持默认参数

@mixin test($a:2px,$b:green,$c:black) {
border: $a solid $b;
color: $b;
background-color: $c;
}
li{
@include test()
}

解析

li {
border: 2px solid green;
color: green;
background-color: black;
}

包含

@import "example";

注释

注释 /* */ 与 //

继承

.abc{
@extend p
}
p, .abc {
border: 1px solid red;
color: red;
background-color: yellow;
}

GIT

GIT概述

GIT是一个分布式版本管理工具(主要是用于管理对应的项目的版本 分支) (迭代式开发 (自研公司的主项目 外包公司的大项目也是迭代式开发) SVN(单机的版本管理工具 全部一个分支上干 )Git 是一个免费和开源的 分布式版本控制系统,旨在以速度和效率处理从小型到大型项目的所有内容。

GIT环境安装

下载工具

 

 

 

 

 

 

 安装工具

按照对应的指引一步一步向下走(最好不好更改默认路径)

 

 

 测试是否安装

点击对应的

git BashHere进入里面输入对应的命令

git --version

 

 

 

Git入门

如何将对应的项目交给我们的git管理

我们有一个对应的文件夹project在这个文件夹内容 点击右键打开的对应git bash here(命令行)

git init

就是会产生一个新的文件夹(这个文件夹就是对应的git本地仓库 如果你删除了这个文件夹那么对应的那么这个仓库就没有 对应的里面管理的所有的数据也就没有了)

 

 

 当我们这个里面有了.git这个文件夹后 我们的这个project就可以让对应的git来进行管理(这个文件夹是隐藏文件)

git的工作流程

git分三个区

工作区(实际操作代码的代码)

暂存区(暂存保存对应的工作区提交的内容)

版本库(历史区) (保存从暂存区提交过来的内容 版本库拥有最终解释权(多个版本))

 

 

从工作区到对应的暂存区

 将对应的hello.txt添加到暂存区

git add hello.txt

查看对应的状态(查看对应的暂存区及相关历史区的内容)

git status

 

 

 加入文件夹

git add ./hello

对应的空的文件夹 不允许加到git中 

 

 

 

 不是空文件夹 不允许加到git中  

 

 

 

 将对应的所有的内容加入  

git add --all
git add .

从暂存区撤回(不会影响工作区)

撤回文件

git reset HEAD -- hello.txt

 

 

 撤回文件夹

git reset HEAD -- ./hello

 

 

 撤回所有的内容 

git reset HEAD -- .
git reset HEAD -- *

从暂存区到版本库(提交了暂存区就没有了)

将文件从对应的暂存区到对应的版本库

git commit hello.txt

 

 

 作者不知道(到版本库需要告诉他你是谁 你的名字和邮箱 --global填写了以后这个项目的提交就不需要再填 如果没写每次都要填)

配置对应的用户信息

git config --global user.name ""
git config --global user.email ""

git这个命令行 相对于是一个Linux的命令 (支持所有的linnux命令) 当你提交完会进入到对应的vi编辑器(vim)

vi编辑器有三种模式

阅读模式 (只能读 不能操作 默认进去就是阅读模式)
插入模式 (进行对应的值的填写和修改 i a 等进入对应的插入模式 按对应esc键就会到对应的阅读模
式)
命令行模式 (执行对应的保存退出等操作 通过阅读模式进入对应的命令行模式 :填写指令 :wq 保存后
退出)

 

 

 查看对应的提交日志

git log

简写方式

git commit 文件名 -m "提交信息"

 

 

 去版本库拿数据

--hard会影响工作区和对应的暂存区

git reset --hard 版本号

拿最新的数据(最新版本)

git rset --hard HEAD

 

 

 分支

分支相当于模块 一个功能就开一个功能分支 一个大的模块分支(细化对应的每个功能以及相关的模块)

我们当前的主分支master(不能直接在上面做对应的`代码开发 而是在底下开一个deelop的分支(工作分支)

分支命名必须遵从对应的规范

git分支为集成分支,功能分支和修复分支,命名分支为master,feature和fix,均为单数,不可使用feature,future,hotfixes,hotfixs等错误名,

master(主分支,永远是可用的稳定版本,不能直接在该分支上开发)master_check(未上线前的开发分支,该分支只做只合并操作,不能直接在该分支上开发,前期开发完成后将feature分支合并到此分支)

online(线上分支,由发版人员确认测试没问题后,将online_check分支合并到此分支)
online_check(开发主分支,所有新功能以这个分支来创建自己的开发分支,该分支只做只合并操
作,不能直接在该分支上开发)
feature-xxx(功能开发分支,在develop上创建分支,以自己开发功能模块命名,功能测试正常后
合并到develop分支,开发完成后合并到online_check分支上)

feature/siliwu_querySchdule (新功能/吴思里_查询课表)

fix-xxx(修改bug分支,在master分支上创建,修复完成后合并到 online_check)

注意事项:

  一个分支尽量开发一个功能模块,不要多个功能模块在一个分支上开发.

  feature分支在申请合并之前,最好是先pull一下master_check分支下来,看一下有没有冲      突,如果有就先解决冲突后再申请合并.

2.git提交记录规范

每个git commit记录都需要按照固定格式提交,具体格式为:

第一行:功能模块名称

第二行:提交描述,中英文皆可

分支的开辟

git branch 分支名

查看当前分支(*当前所在分支)

git branch

 

 进入分支

git checkout 分支名

删除分支

git branch -d 分支名

 

 合并分支(合并到当前)

git merge 分支名

衍和分支

git rebase 分支名

远程仓库

标签:git,sass,color,day33,对应,red,分支
来源: https://www.cnblogs.com/he-maoke/p/16444714.html