Scss开发临时学习过程||webpack、npm、gulp配置

SCSS语法：
    假设变量申明带有!default，那么如果在此申明之前没有这个变量的申明，则用这个值，反之如果之前有申明，则用申明的值。

    ‘...’传递多个参数：
    @mixin box-shadow($shadow...){
        -webkit-box-shadow:$shadow;
        -moz-box-shadow:$shadow;
        box-shadow:$shadow;
    }

    用在属性或者选择器上，就得以#{}包裹

    多个变量值一起申明：
    $linkColor: red blue !default;
    a{
        color:nth($linkColor,1);
        &:hover{
            color:nth($linkColor,2);
        }
    }

    定义变量:$名字
    引用方式:$变量名
    颜色：
    $linkColor: #08c;
    a {
        text-decoration:none;
        color:$linkColor;
        /***&代表其上级***/
        &:hover{
          color:darken($linkColor,10%);
        }
    }

    嵌套：f1{
        f2{
            f3{}
        }
    }

    导入：@import '具体的路径/文件名' 

    方法定义：@mixin box-sizing ($sizing) {
        -webkit-box-sizing:$sizing;
           -moz-box-sizing:$sizing;
                box-sizing:$sizing;
    }
    .box-border{
        border:1px solid #ccc;
        /****此处为调用*****/
        @include box-sizing(border-box);
    }

    扩展（继承）：
    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }

    .success {
      @extend .message;
      border-color: green;
    }

    .error {
      @extend .message;
      border-color: red;
    }

    .warning {
      @extend .message;
      border-color: yellow;
    }

    运算：
    .container { width: 100%; }
    article[role="main"] {
      float: left;
      width: 600px / 960px * 100%;
    }
    aside[role="complimentary"] {
      float: right;
      width: 300px / 960px * 100%;
    }

SCSS语法初级

hbuilder 下scss保存预编译到指定目录下配置：
1、触发命令地址：D:\Ruby22\bin\scss.bat （这个是安装ruby的bin下）
2、命令参数：--sourcemap=none --no-cache %FileName%  ../css/%FileBaseName%.css  --style compact 

HBuilder Scss预编译配置

一 搭建环境

首先安装ruby环境,不然会编译失败，在这里下载ruby ，安装的时候选择第二项

在cmd中输入gem -v 显示版本号说明ruby安装成功

待ruby安装成功后，在cmd中输入 gem install sass  来安装sass，如图

如果sass安装失败需要设置淘宝镜像

gem sources --remove https://rubygems.org/

gem sources -a https://ruby.taobao.org/

二 在sublime中安装插件

1）在sublime中安装插件：Sass和SASS Build；

2）创建sass文件并保存为.scss格式；

3）Ctrl+B，选择SASS编译

sublime、scss环境搭建

1、task:
    作用：定义一个任务
格式：gulp.task(name[, deps], fn)
    说明：
name，表示任务的名字，使用字符串，不能使用空格。
deps，包含任务列表的数组，先于当前任务而执行。
fn，任务要执行的一些操作。

2、作用：指定需要处理的源文件的路径，返回当前文件流至可用插件。
    格式：gulp.src(globs[, options])
    说明：
globs：需要处理的源文件匹配符路径，字符串或字符串数组。可以使用类似正则的方式来进行文件的匹配。常见的用法有：
“src/a.js"，指定具体某个文件
“*”, 匹配某个文件夹下的所有文件，如src/*.js，
“**”， 匹配0个或多个子文件夹，如src/**/*.js，
“{ }”，匹配多个属性，如src/{a,b}.js ，包含a.js和b.js，再如 src/*.{ jpg, png, gif } 表示src所有的jpg/png/gif文件
“！”，排除文件，如 ！src/a.js，不包含src下的a.js文件

3、作用：指定处理完后文件的输出路径
    格式：gulp.dest(path[, options])
    说明：
path：字符串或函数，如果是字符串，直接指定文件输出路径，如果是函数，需要在函数中返回输出路径。

4、gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入。
一般都是用在 src 方法和 dest方法 之间。

5、作用：watch方法用于监听文件变化，文件一修改就会执行特定的任务。
    格式：gulp.watch(glob[, opts], tasks)
    说明：
glob：需要处理的源文件匹配符路径，用来指定具体监控哪些文件的变动，和src中的一致。
tasks：需要执行的任务的名称数组

--------------------------------------------------------------------------------

npm install [-g] 包名[,...][|包名@版本]  --save|--save-dev
npm uninstall|update 包名 (本地卸载|更新)
npm uninstall|update -g 包名 (全局卸载|更新)
本地查看 npm ls
全局查看 npm ls -g
查看顶层的包。可以使用npm ls --depth=0
npm info 包名 （查看某个包/模块的信息）

npm、gulp配置