SASS语法►基础

SASS语法--基础

项目创建

1
2
3
npm init
compass create --bare

or
compass create –bare –sass-dir “sass” –css-dir “css” –images-dir “img” –javascripts-dir “js”

自动化构建

在根目录下创建gulpfile.js

1
npm gulp gulp-compass browser-sync del run-sequence --save-dev

假如下载失败可修改：

1
2
3
npm config git registry
npm config set registry http://

安装compass-normalize、breakpoint、susy

1
gem install compass-normalize breakpoint susy

在config.rb里分别引入

1
2
3
4
5
require "compass-normalize"
# 响应式
require "breakpoint"
# 布局
require "susy"

main.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*! Vendor */
@import 
  "compass"
, "susy"
, "breakpoint"
, "normalize-version"  
, "normalize/base"
, "normalize/links"
, "normalize/html5"
;
/*! Helpers */
@import 
  "helpers/variables"
;
/*! Base*/
@import 
  "base/font"
;
/*! Layout */
@import 
  "layout/main"
;
/*! Components */ 
@import 
  "components/alerts"
, "components/pop-stripe"
, "components/banner"
, "components/page-header"
, "components/section-bottom"
, "components/contentinfo"
;
/*! Pages*/
@import 
  "pages/page-base"
, "pages/index"
, "pages/install"
, "pages/guide"
, "pages/community"
, "pages/libsass"
;