首页 > 代码库 > Sass基础(一)

Sass基础(一)

一、Sass语法规范

  1、Sass老版本:通过tab键严格控制缩进;不带有任何分号和大括号;以“.sass”为扩展名。

  2、Sass新语法格式(Scss):外形和css无差,以“.scss”为扩展名。

二、Sass编译

  1、命令编译

    在命令终端输入sass指令,是最直接最简单的编译方式。

    单文件编译指令: sass <要编译的sass文件路径>/style.scss : <要输出的css文件路径>/style.css

    多文件编译: sass sass/:css/ (将项目中sass文件夹下的所有文件进行编译,输出到css文件夹下)

    缺点:只能一次性编译,每次个性保存“.scss”文件就得重新执行一次命令

    解决方法: 开启“watch”功能,指令如下:

      sass --watch <要编译的sass文件路径>/style.scss : <要输出的css文件路径>/style.css    

  2、GUI工具编译

    推荐:Koala CodeKit

  3、自动化编译

    grunt  gulp

三、Sass不同样式风格的输出方法

  1、嵌套输出方式 -- nested

    指令: sass --watch test.scss:test.css --style nested

    Example:

    技术分享

  2、展开输出式 -- expanded

    指令: sass --watch test.scss:test.css --style expanded

    Example:

    技术分享

  3、紧凑输出式 -- compact

     指令: sass --watch test.scss:test.css --style compact

      Example:

    技术分享

  4、压缩输出式 -- compressed

    指令: sass --watch test.scss:test.css --style compressed

    Example:

    技术分享

 

四、Sass变量

  1、Sass变量的声明

    声明Sass变量,一共有三个部分: a) 声明变量的符号: $   b)变量名称   c)赋予变量的值

    技术分享

  2、普通变量和默认变量

    技术分享

  3、变量的调用

    技术分享

 

  4、全局变量和局部变量    技术分享

  5、变量声明的条件(什么时候声明变量)

    a) 该值至少出现了两次

    b) 该值至少可能会被更新一次

    c) 该值所有的表现都与变量有关(非巧合)

 

Sass基础(一)