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

4、局部安装gulp cnpm install gulp --save-dev

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

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

5、建立gulpfile.js文件

6、引入gulp

7、书写任务

8、运行任务 gulp 任务名称

Sass和gulp的简单了解

猜你喜欢