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%;
}
hbuilder 下scss保存预编译到指定目录下配置:
1、触发命令地址:D:\Ruby22\bin\scss.bat (这个是安装ruby的bin下)
2、命令参数:--sourcemap=none --no-cache %FileName% ../css/%FileBaseName%.css --style compact
一 搭建环境
首先安装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编译
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 包名 (查看某个包/模块的信息)