# gulp_css_grid

**Repository Path**: 1024335892/gulp_css_grid

## Basic Information

- **Project Name**: gulp_css_grid
- **Description**: 用gulp搭建scss的删格化的规范
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-27
- **Last Updated**: 2025-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# `package.json`和`gulp.js`参考master分支

# gulp的自动化工具通过scss编译为css

- 下载安装nodejs
- 在项目的目录中运行npm install来安装依赖
- cmd中**cd 项目路径** 
- npm install gulp -g
- gulp watch就进行事实的将scss编译为css文件了

# 参考bootstrap的栅格的

```
//小于768px
@media (max-width: 768px) {
   
}
//大于768px，小于992px  
@media (min-width: 768px) and (max-width: 992px ) {
    
}
//大于992px，小于1200px
@media (min-width: 992px) and (max-width: 1200px) {
    @import "index_gt_992";
}
//大于1200px
@media (min-width: 1200px) {
    @import "index_gt_1200";
}

```

# sass中的文件夹命名的解释

- 下划线**_**开头的scss文件不会自动编译，通过"@import"引入就一起进行编译了
- **_init.scss**是通用的元素初始化的样式
- **_variable.scss**是栅格化的的一个范围值,可以在依据实际情况多次删格
- 参考**index.scss**的规范进行文件的命名和引入,特意将样式给隔离开
- **_xx_lt_768.scss**是浏览器可视化区小于768px的显示样式,**_xx_gt_768.scss**是浏览器可视化区大于768px的显示样式,**_xx_gt_992.scss**是浏览器可视化区大于992px的显示样式,**_xx_gt_1200.scss**是浏览器可视化区大于1200px的显示样式
- 最后将逻辑到放到**_xx_lt_768.scss**,**_xx_gt_768.scss**,**_xx_gt_992.scss**,**_xx_gt_1200.scss**中了

# 规范化

- 如果创建模板为about.html(关于)，就在sass中创建about.scss(复制index.scss),然后创建**_about_lt_768.scss**,**_about_gt_768.scss**,**_about_gt_992.scss**,**_about_gt_1200.scss**,在about.scss中修改@media中的@import的引入的名字,这样就自动会编译到css文件夹下的about.css中
- 然后

    ```
    ## css的路径依据实际情况引入
    <link rel="stylesheet" href="./css/about.css">  
    ```

- 一个模板(html),一个css文件
- 最后只要模板，css文件，使用到的javascript的文件，其它的都是辅助工具




# scss的简单的使用

```
#html
<div class="a">
    <div id="b">
        <div class="d">
    
        </div>
    </div>
    <div class="c m"></div>
</div>
#scss  这种结构和html的结构类似的写法,仔细看 "&的符号地方"，其它的和之前写的css一样。不要考虑css3的语法前缀，该工具依据给处理好了，可以测试的时候看下可以随便举例看下就知道啥情况了
.a{
    color:red;
    #b{
        .d{
           font-size:14px;
        }
    }
    .c{
        color:blue;
        &.m{

        }
    }
}
```