Sass的一点小用法

本人小菜鸟一枚，三月中旬来到这家公司实习，一来就开始项目，来到公司也就短短二十多天，说实话，这么短的时间让我知道了许多不足的地方，也学到了很多东西，期间，感觉最让我激动的就是接触到了sass。这是我对sass的一点用法理解，欢迎指正不足1。首先安装环境，我是用gulp的，gulp又是基于node，所以安装之前得先安装node，node安装网上很多教程，我就不敲上去了。安装完成之后打开cmd，输入node -v，检测是否安装成功，成功就会直接在下方显示版本号。2.全局安装gulp 在cmd下输入 npm install -g gulp 如果安装不成功就得使用代理了，npm install cnpm -g --registry=https://registry.npm.taobao.org把上面得一串字符复制到cmd里，安装完成之后也是用-v检测它的版本号，如果出现版本号，就意味着安装成功，然后用法呢，其实很简单，就是把npm换成cnpm 其他得都不变，如  cnpm install -g gulp ，gulp'完成之后就可以开始下一步了3.创建一个项目，我是用Hbuilder的，直接新建一个项目，打开文件目录，返回上一级，cmd里找到项目所在的目录，如我本地在D盘model文件夹下，输入D：就进入d盘，cd model ，就进入model文件夹下，然后输入 cnpm init来创建一个package 文件，这个文件呢是用来存放与项目有关的东西，如版本号（当其他同事与你做同一个项目时，就可以从这里获取到相关的东西，），想填就填，也可以一路回车4.上一步完成之后呢，还有本地安装一次gulp，在第二个步骤里面已经安装过了gulp，这一次为什么还要安装，因为第一步是安装环境，没有环境就没有后来了，这一次安装就可以调用关于gulp里面的插件了，npm install gulp --save-dev 这个 save 呢就是把项目需要的配置信息保存到package里面dev呢，因为我们是开发者模式，所以dev就需要了5.本地安装完成之后就可以安装sass插件了cnpm install gulp-sass --save-dev   回车 然后在项目里面，也就是index所在的文件夹下新建gulpfile.js， 这个是配置gulp sass的    var gulp = require('gulp');

var sass = require(‘gulp-sass’);

gulp.task(‘sass’,function() {
return gulp.src(‘sass/.‘).pipe(sass()).pipe(gulp.dest(‘css’));
})
gulp.task(‘default’,[‘sass’,’watch’]);
gulp.task(‘watch’,function(){
return gulp.watch(‘sass/.‘,[‘sass’]);
})

  6.上一步完成之后，就可以运行gulp了，先在index所在的文件夹新建一个sass文件夹，这里就是放sass的地方了，新建一个文件，注意，后缀名是scss，不是sass，因为sass比较严格，所以新建scss
7.运行sass 输入gulp sass即可
  然后尝试修改scss里面的东西，保存，你会发现css文件下出现一个一样名称的文件，只 是后缀名不一样。
                如              
               

<div class='box'>    <div>我是div<span>1</span>    </div>    <h2>我是h2<em>2</em></h2> </div>

在scss文件里就可以这样写
       

.box{    div{        width:94%;        padding:10px     3%;        span{                color:red;            }     }     h2{        width:94%;        padding:10px     3%;        em{            color:yellow;            }    } }

保存看下结果，sass避免了权重问题，而且写法非常简便，同时也不用费劲脑汁的去想类名
         sass还有其他的用法，常见的如
         自定义方法或属性

$blue : #1875e7;　　　div {　　　color : $blue;　　}    $blue可以全局使用    

　@function double($n) {　　　　@return $n * 2;　　}　　#sidebar {　　　　width: double(5px);　　}sidebar的大小就会变为10px

这个也是我比较喜欢的，因为我是做移动端的，ui给我的psd图大小总是偏大，用了这个之后，sass会自动计算,敲起来就会很方便。
这是我的一点小结，欢迎指正