明留

将何所持,将何所往?此刻惜之!

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
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配置

 

posted on 2016-09-18 15:06  明留  阅读(253)  评论(0编辑  收藏  举报