sass 参考资源

CSS Sass 实例对比:

// CSS 实例
p { 
margin-bottom: 20px; 
font-size: 14px; 
line-height: 1.5; 
} 
footer { 
margin-bottom: 20px; 
font-size: 14px; 
line-height: 1.5; 
}


// Sass 实例
@mixin default-type { 
margin-bottom: 20px; 
font-size: 14px; 
line-height: 1.5; 
} 

p { @include default-type; } 

footer { @include default-type; }

Why SASS !!

Sass 其实是一种思维方式(不重复原则).

把那些共用的东西,规划成一个可重用块,只需要定义一次,然后引用到你需要的地方即可。

不重复原则: 我们只需写相同的代码段一次就够了,然后只需重用他们就行了。 这才是比较有效、容易维护代码的方法。

Sass 简介

Sass(Syntactically Awesome Stylesheets) 是一种 CSS文件的 预处理工具. 按照Sass语法写.sass文件.然后通过工具转为.css格式.

Sass语法 特别适合程序员的思维.

Sass 之类的CSS工具算是对原生Css缺憾的功能补充,加入变量,条件判断,循环控制,让CSS更像一种编程语言。这样一来很多重复性代码可以得到精简,代码更加简洁,可维护,大大节约我们的开发成本。

Sass 两种格式

.sass .scss (和原生css 比较相近)

它允许你写css代码不需要重复。这对于创造可维护的样式将是非常有效的。

Sass功能

变量:

可以让我们把公共的参数提取出来,比如字体颜色,主题颜色,统一实用一个变量,需要修改时,只需要去修改这个变量即可,不需要全局去搜索,替换。

层叠:

通过层级的写法建立命名空间,污染全局,特别是团队协作的时候,非常重要!

层叠实例

// Sass 文件
.foo {
.bar {
.baz {
color: red;
}
}
}


// CSS 文件
.foo .bar .baz {
  color: red;
}

模块化:

把相关代码隔按照作用,结构,模块,页面,主题等等分离开,需要的时候在产出文件中引入,让代码更加灵活。去年看到Hugo Giraudel写的 7-in-1 模式时的兴奋感还记忆犹新。

模块化实例

// Sass 文件
.bar {
color: red;
}

// foo.scss
@import "_bar";



// CSS 文件
.bar {
  color: red;
}

Mixins,

个人用的最多的一个feature,写过一篇文章。Mixins可以解决很多重复性工作,比如添加前缀,使用二倍图,使用精灵图,使用Rem单位等等。

@mixin animation-duration($duration) {
animation-duration: $duration;
-webkit-animation-duration: $duration;
}

.foo { 
  @include animation-duration(2s); 
}



.foo {
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

继承

.bar {
  color: red;
font-size: 12px;
line-height: 24px;
font-weight: bold;
}

.foo {
@extend .bar;
}



.bar, .foo {
  color: red;
  font-size: 12px;
  line-height: 24px;
  font-weight: bold;
}

运算

.bar {
  width: 1 / 3 * 100%;
}





.bar {
  width: 33.33333%;
}

Sass CSS 使用区别

你用sass 来写css. 然后 保存.scss 格式. 然后 用工具 输出 .css 格式.

看着多了一步. 其实让你写css 更轻松.

例: Gulp Sass

先安装 gulp-sass 环境

npm install gulp gulp-sass

jekyll Sass

参考资源 官网 CN 参考

jekyll默认支持scss.只要注意下文件放置位置就可以.

sass 和css 一样. 由于是模板.可以把一个main.sass 拆分成很多小的模板. 这个小的模板放在 _sass 文件夹.

而主要的main.sass (这个没要求)一般放在 css 文件夹下. 反正 .sass的小模板要放固定位置(因为要引入 和inclide 一样.).

  1. 只需要创建.sass/.scss 后缀的文件.
  2. 根目录创建 _sass 文件夹.
  3. 把.scss 文件放到上面的文件夹内.
  4. 文件 两行开头就可以


jekyll 会处理这个文件. 并输出到同一个目录.

.
| - _sass
  | - _typography.scss
  | - _layout.scss
  | - _colors.scss
| - stylesheets
  | - screen.scss
  | - print.scss

jekyll sass 实例.

  1. 先把 css 写好: /css/main.css
  2. 然后用 在线转换工具 把css 转为 sass CSS → SASS 在线转换工具

  3. 新建main.sass 文件 /css/main.sass. 把上面转换的内容 复制进去.
  4. main.sass 文件首部必须加两行—(参考我的文件就行),不然不会转成css
  5. 然后就可以删除或者重命名 main.css 因为用不到了. jekyll 会自动把main.sass 转为 main.css

然后就可以了.

  1. 接下来(可选)
  2. 把main.sass 分成多个小模块. 方便梳理结构. 比如 header.sass/cate.sass/tag.sass
    然后 main.sass 里用 @import ‘4-sidebar’ 来把小sass模块导入到 main.sass

导入示例 @import ‘1-animation’ @import ‘2-icon’ @import ‘3-base’ @import ‘4-sidebar’ @import ‘5-post’ @import ‘6-menu’ @import ‘7-nprogress’ @import ‘8-code’ @import ‘9-page’ @import ‘a-smallscreen’ @import ‘b-mobile’

反正jekyll 最后会帮你合并成一个文件的.

Sass 好处

终于可以用 // 来注释了 !!!!!!