用Sass重新整理自己的博客主题样式

Sass

远远关注Sass很久了,今天终于鼓起勇气写了我的第一个Sass文件

Sass简介

一种CSS的预处理程序,基于Ruby运行。安装过程和相关的准备工作非常简单:

  1. 当然首先要安装Ruby
  2. gem install ruby,必要的环境下需要在命令前加上sudo
  3. 进入我的博客主题文件夹,运行sass-convert style.css style.sass,把我的css文件先转换成sass文件
  4. 运行sass --watch style.sass:style.css,使得程序自动把style.sass文件接下来的任何改动自动同步转换到style.css

这时,新的Sass文件就创建完毕了!^_^ 去碎觉……

呵呵,开个玩笑。其实这样的Sass文件虽然格式上没有任何问题,但和直接撰写CSS几乎没区别。而Sass除了可以让我们少写几个花括号和分号之外,其实还有很多实用的特性是我们真正需要的。

无论如何,现在的这个Sass文件是一个整理的基础,接下来,我们就来一步一步整理这个文件,同时也一步一步熟悉Sass的特性。

Variables: 变量与计算

我把CSS文件中通用的字体、颜色等等属性值归纳了出来,并找到其中的相关性,比如文本框的边框颜色始终比链接的文字颜色亮一些,即:

a {
  color: #0c0;
}

input:not([type]),
input[type="text"],
input[type="password"] {
  border: 2px lime solid;
}

在Sass中将其改写为:

$color-link: #0c0

a
  color: $color-link

input:not([type]),
input[type="text"],
input[type="password"]
  border: 2px lighten($color-link, 10%) solid

即可,输出的结果不变。

Nesting:选择器嵌套

把嵌套着的选择器添加不同的缩进,同时把重复表达的外层选择器去掉。如:

h2 {
  margin: 0.75em 0;
  padding: 0.25em 0.5em;
  background-color: rgba(0, 204, 0, 0.4);
  color: #339933;
}

h2 strong {
  color: white;
}

h2 a {
  color: #009900;
}

h2 a:hover {
  background: yellow;
  color: black;
}

可以转换为:

h2
  margin: 0.75em 0
  padding: 0.25em 0.5em
  background-color: rgba($color-link, 0.4) // 链接颜色,透明度40%
  color: desaturate($color-link, 50%) // 链接颜色,饱和度减少50%

  strong
    color: white

  a
    color: darken($color-link, 10%) // 链接颜色,变暗10%

    &:hover
      background: $color-mark // 特殊标记的颜色
      color: black

Mixin:将可重用的CSS属性值混入不同的CSS规则当中

这个特性是我花最多时间整理的,整理过后发现整个文件结构真的清晰很多。

提取出成套的样式

比如我的博客主题中,3D的标题和按钮就是两套集成度重用性都很高的样式,我创建了@mixin title-3d@mixin button-3d两个大的属性集合:

@mixin title-3d
  ...
  &::before,
  &::after
    ...
  ...

@mixin button-3d
  ...
  &::before,
  &::after
    ...
  &:hover::before
    ...
  &:hover::after
    ...
  ...

随后我把这些属性集合应用到了标题和按钮上:

h2
  @include title-3d

button,
input[type="button"],
input[type="submit"],
.button-3d
  @include button-3d

继续归纳和抽象

整理完上面这两个大的集合之后,我发现,其实3d的标题和按钮样式上其实也有很多想通的地方,于是我进一步抽象出了一些3d模型的通用集合:

@mixin short-transform
  -webkit-transition: -webkit-transform 0.3s

@mixin transform-origin-0
  -webkit-transform-origin: 50% 50%
@mixin transform-origin-1
  left: 0
  top: 0
  -webkit-transform-origin: 0% 0%
@mixin transform-origin-2
  right: 0
  top: 0
  -webkit-transform-origin: 100% 0%
@mixin transform-origin-3
  right: 0
  bottom: 0
  -webkit-transform-origin: 100% 100%
@mixin transform-origin-4
  left: 0
  bottom: 0
  -webkit-transform-origin: 0% 100%

@mixin init-3d
  @include short-transform
  @include transform-origin-0
  -webkit-transform-style: preserve-3d

@mixin p-element
  position: absolute
  content: ""

然后到之前的集合把这些通用集合抽象出来:

@mixin title-3d
  @include init-3d
  ...

  &::after,
  &::before
    @include p-element
    @include short-transform
    background-color: lighten($color-text, 30%)

  &::before
    height: 100%
    width: $button-3d-height*2
    @include transform-origin-1
    ...

  &::after
    height: 100%
    width: $button-3d-height*2
    @include transform-origin-2
    ...

统一封装不同浏览器的CSS前缀

@mixin box-sizing($sizing: border-box)
  -moz-box-sizing: $sizing
  box-sizing: $sizing

@mixin transform($value...)
  -webkit-transform: $value
  transform: $value

@mixin transform-origin($value)
  -webkit-transform-origin: $value
  transform-origin: $value

@mixin transform-3d($value: preserve-3d)
  -webkit-transform-style: $value
  transform-style: $value

@mixin transform-perspective($value: 350px)
  -webkit-perspective: $value
  perspective: $value

@mixin transition($value...)
  -webkit-transition: $value
  transition: $value

@mixin transition-transform($duration: 0.3s)
  -webkit-transition: -webkit-transform $duration
  transition: transform $duration

...

Extend:选择器的继承

其实这个特性和mixin很多时候可以二选一使用,比如这里的.button-3d选择器可以不必和buttoninput[type="button"]input[type="submit"]写在一起,可以写成:

.button-3d
  ...

button,
input[type="button"],
input[type="submit"]
  @extend .button-3d

不过我这里这样写的必要性不太大,所以就没有实际的例子可以分享了。

结语

最终我的第一个Sass文件就这样整理完毕了。(p.s.当然这个文件未来可能还是会有改动,届时可能会和本篇文章描述的内容不符)

经过上面这几轮代码的整理,这个Sass文件才真的很Sass了。回顾这次整理的过程,先后用到了变量、运算、嵌套、重用属性等Sass的特性,简单明了,而且sass --watch命令、sass-convert命令可以方便的对文件进行监听和格式转换。我几乎在感觉不到学习成本的情况下提高了开发效率。这里也推荐大家试试看。

已有 6 条评论 »

  1. 修远兮 修远兮

    一直没用过了,回头也试试~~

  2. Sass/LESS让写css也有编程式的体验,非常棒。
    随便做个广告,大家要是觉得命令行麻烦,推荐使用这个工具帮你自动编译: http://koala-app.com/index-zh.html

    1. @Ethan Lai
      支持!我昨天刚跟部门同事分享了你的这个工具哦~

  3. 9527 9527

    感觉除了在包含与一些CSS3的书写上有些优势,和直接写CSS差别不是很大,前期工程花费要更大。

  4. 没想到锦江兄也玩SASS,讲解的很详细,学习了。我最近也在学习SASS:http://www.w3cplus.com/sassguide/

  5. 用Sass重新整理自己的博客主题样式 - 囧克斯

添加新评论 »

(请至少包含一个汉字,且汉字不能比日本字少)