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配置

Scss开发临时学习过程的更多相关文章

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

    SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...

  2. 优龙FS2410开发板学习过程遇到问题总结

    以下的问题及其解决办法是基于优龙FS2410开发板,不定期更新 ============================================================= 开发学习环境 ...

  3. Web前端开发的学习过程

    2018年 5月27日 开始在MDN上学习HTML/CSS/JavaScript.——6月18日 基本学完MDN的“学习Web开发”的HTML/CSS/JavaScript部分. 6月9日 开始在IF ...

  4. Vue使用SCSS进行模块化开发

    原文地址:http://www.cnblogs.com/JimmyBright/p/7761531.html 个人认为scss最大的好处就是能将css属性设置为变量,这样让css一键更换主题成为可能. ...

  5. ArcGIS Engine开发之地图基本操作(4)

    ArcGIS Engine开发中数据库的加载 1.加载个人地理数据库数据 个人地理数据库(Personal Geodatabase)使用Miscrosoft Access文件(*.mdb)进行空间数据 ...

  6. Java开发常用的在线工具

    原文出处: hollischuang(@Hollis_Chuang) 作为一个Java开发人员,经常要和各种各样的工具打交道,除了我们常用的IDE工具以外,其实还有很多工具是我们在日常开发及学习过程中 ...

  7. [开发工具]Java开发常用的在线工具

    注明: 本文转自http://www.hollischuang.com/archives/1459.作为一个Java开发人员,经常要和各种各样的工具打交道,除了我们常用的IDE工具以外,其实还有很多工 ...

  8. 【读书笔记《Android游戏编程之从零开始》】9.游戏开发基础(如何快速的进入 Android 游戏开发)

    1.不可盲目看API文档很多人在接触学习一门新的平台语言时,总喜欢先去探究一番API文档.先不说成效如何,至少编者认为这种方式不适合大部分人来效仿,主要原因在于 API 领域广泛,牵涉到的知识点太多, ...

  9. android手电筒开发

    最近学习android开发,记录学习过程,分享一写小案例 一. 如下先设置好布局文件 <TextView android:id="@+id/textView1" androi ...

随机推荐

  1. mantis邮箱配置

    1.修改/var/www/html/mantisbt-1.3.3/config下config_inc.php配置文件 以163邮箱为例 # --- Email Configuration --- $g ...

  2. (转)如何处理iOS中照片的方向

    如何处理iOS中照片的方向 31 May 2015 • 7 min. read • Comments 使用过iPhone或者iPad的朋友在拍照时不知是否遇到过这样的问题,将设备中的照片导出到Wind ...

  3. iOS 线性滚动

    在这里,给大家带来简单的滚动实现,首先看一下实现效果. 通过观察不难发现,有很多地方并不是那么容易想出来的,对于篇随笔,感兴趣可以查查相关资料,我就不尽行过多说明,(主要是开考文字,不好说明

  4. Linux系统上通知网关更新arp

    经常会有在线更换Linux服务器IP的操作,该操作带来的一个问题是: 我们已经执行了修改IP的操作,但由于网络上(网关)的ARP缓存暂未更新,导致在某一段时间内,该服务器会有网络不通的情况存在. 因此 ...

  5. (实用篇)php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)

    微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中.内容有:微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI <?php class ...

  6. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

  7. python 3 字符串转 json

    from json import *; JSONDecoder().decode('str')

  8. 手把手教你配置UltraEdit对Oracle的PLSQL着色

    http://hi.baidu.com/kingbridge/blog/item/94e225ad5fad4b194b36d60d.html   UltraEdit-32 12.1版本配置默认文件显示 ...

  9. mysql 完整性约束

    mysql 完整性约束 数据的完整性概述根据完整性实施的方法将完整性约束分为四类:1.实体完整性 实体完整性的实现:通过在表中设置主键约束.唯一约束或标识列来实现 主键约束:应用于表列的一个约束 用法 ...

  10. jstl 标签库的使用

    JSTL 核心标签库 使用   JSTL 核心标签库标签共有13个,功能上分为4类: 1.表达式控制标签:out.set.remove.catch 2.流程控制标签:if.choose.when.ot ...