SASS的使用

前端开发规范

每个一个前端都会包含库类、jQuery插件以及很多的各种各样目的的JS、CSS文件,有效管理不同的技术、不同文档集中起来运行良好确实需要一个很好的得工作流。因此,我们需要遵循开发模式、开发约定、文件组织良好,以保持所有的文档结构清晰、便于管理。
每一个项目的根目录下有以下目录:

  • CSS
    —存放css文件,basic.css、font.css、color.css...
  • JS
    —存放所有的js文件,可以包括几个子文件夹
  • views
    —视图,每个显示文件对应一个视图
  • images
    —存放所有的图片。

为了提高项目的开发效率和质量,我们使用各种工具来管理css或者js。例如:

  1. 使用sass来管理前端的css文件。
  2. 使用coffeescript来管理js文件。

SASS

SASS是最早、最成熟的CSS预处理,它可以通过变量、嵌套、函数、继承等使CSS变得更强大,更优雅,而且完全兼容CSS的语法。
SASS可以帮助我们更好地组织大CSS文件,更加便捷地开发和运行CSS文件,在Compass等类库的帮助下,我们将更加如虎添翼。

SASS特性

  • 完全兼容CSS3
  • 诸如变量、嵌套、混合(Mixins)之类的语言扩展
  • 操作颜色和其他的巨量实用函数
  • 类型控制语句的强大特性
  • 可以自定义的、格式良好的输出
  • 整合Firebug

SASS语法

SASS允许有两种语法:

  • SASS
    —sass是Sass的最初语法格式,通过tab键控制缩进的一种语法规则,而且对缩进要求非常严格,不带有任何的分号和大括号。以".sass"为扩展名。
  • SCSS
    —scss是Sass的新语法格式,从外形上来判断他和CSS长得一样,代码都包裹在一对大括号里,并且末尾技术处都有一个分号。以".scss"为扩展名。
    //使用SCSS    
    $baseFontsize:14px;  
    $Largefontsize:16px;  
    body{  
        font-size:$baseFontsize;
        p{
            font-size:$Largefontsize;
        }
    }

    //使用SASS
    $baseFontsize:14px
    $Largefontsize:16px
    body
        font-size:$baseFontsize
        p
            font-size:$Largefontsize

命令编译

命令编译时指使用电脑中的命令终端,通过Sass指令来编译Sass。

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

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。

  • watch功能
    开启“watch”功能,对代码进行任何修改,都能自动检测代码的变化并直接编译
    sass --watch<要编译的Sass文件路径>/style.scss:<要输出的CSS文件路径>/style.css

输出方式

  1. 嵌套输出方式nested
    -编译时需带上参数“--style nested”
  2. 展开输出方式expanded
    -编译时需带上参数“--style expanded”
  3. 紧凑输出方式compact
    -编译时需带上参数“--style compact”
  4. 压缩输出方式compressed
    -编译时需带上参数“--style compressed”
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

针对上边的CSS文件,采用不同的编译方式:

  • 嵌套方式
nav ul {  
  margin: 0;  
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }
  • 展开方式
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

与nested方式类型,只是大括号在另起一行

  • 紧凑方式
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

类似于单行CSS样式格式

  • 压缩方式
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

压缩输出方式会去掉标准的Sass和CSS注释及空格。

SASS调试

浏览器支持“sourcemap”功能,可以实现在浏览器中直接调试sass文件。
如果不支持,需要在编译的时候添加“--sourecmap”参数:

sass --watch --scss --sourcemap style.scss:style.css

在Sass3.3版本之上,不需要添加这个参数也可以:

sass --watch style.scss:style.css

推荐阅读更多精彩内容