Sass和gulp的简单了解

一、sass  less    css预处理器
        sass里面有2种语法  第一种语法是sass  后缀名必须是sass   第二种语法是scss  后缀名必须是scss
            //scss写法
            $width:300px;
            $height:400px;
            body{
                 width:$width;
                 height:$height;
            }
            //sass写法
            $with:100px;
            $height:100px;

body
                 width:$width
        sass的基本语法
            1、定义变量必须要用$
            2、变量拼接  #{变量}
            3、sass监听   sass --watch 文件名称:文件名称
            4、文件编译非风格
                * nested：嵌套缩进的css代码，它是默认值。
            　　* expanded：没有缩进的、扩展的css代码。
            　　* compact：简洁格式的css代码。
            　　* compressed：压缩后的css代码。
                sass --watch --style compact  文件名:文件名

5、sass里面的语法支持运算

6、sass语法支持嵌套形式但是最好不要超过3层

7、&代表父级

8、继承 @extend

9、混合宏当需要写一些重复的代码的时候我们可以把代码放在混合宏中

如何定义混合宏 @mixin 变量名(){}
如何调用混合宏 @include 变量名

10、引入公共文件  @import  文件的名称  不需要加_
                在建立文件的时候  _文件名称

            11、注释
                单行注释 //
                多行注释 /*  */

不能用中文

1        10    10
            12、@for 变量 from 值 through 值
                                1    10    9
                @for 变量 from 值 to 值

13、@if

14、@function

15、如果sass里面涉及到了运算的时候 - 两边一定要加空格

二、gulp:

1、开发阶段

src

html

css

lib

page

index

list

plug

sass

img

json

2、部署阶段

dist

html

css

img

gulp:自动化工具

002、gulp能干什么？

1 自动压缩JS文件

2 自动压缩CSS文件

3 自动合并文件

4 自动编译sass

5 自动压缩图片

6 自动刷新浏览器

1、全局安装gulp cnpm install gulp -g

2、gulp -v 版本

3、在当前文件的根目录下面 shift+右键打开命令行输入 npm init （把当前的一个文件变成一个node的包） npm init -y

　　//安装淘宝镜像：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

4、局部安装gulp依赖包--> cnpm install gulp --save-dev(或者 npm install gulp -D)

save:把当前的包放在node_modules文件夹下面

dev:会把当前的版本号存在的刚才那个json文件中

5、建立gulpfile.js文件

6、引入gulp

7、书写任务

//安装插件：npm install gulp -babel -D

8、运行任务 gulp 任务名称

巴特西

Sass和gulp的简单了解

最新文章

热门文章