JustQyx

大道至简

Sass Learning (Revised)

| Comments

为什么写?

第一次用 Sass 时,应该是今年一月份的时候, 那时候对 Sass 的认识很简单,仅仅将其理解为CSS的几个框架之一, 作用在于给我们提供一些有用的方法,可以帮我们快速方便地书写 CSS,并且解决了一些浏览器兼容的问题。

而最近,随着使用越来越多,发现自己写的 CSS 代码很糟糕。 虽然用着 Sass,可是使用的方式,其实与最开始随便写 CSS 代码一样的逻辑,并没有质的变化。

我深刻地意识到这一点,于是决心改变,原因很简单,我的代码代表了我自己,怎样的代码就代表怎样的我。

什么是 Sass ? 因何而生 ?

Sass 是 CSS 的一种方言,通过编译器实现将其转化为 CSS。

1. 什么是方言?

其实很好理解,就如汇编是机器代码的一种方言,C 是汇编语言的一种方言。

汇编可通过自己的编译器将其转换为二进制代码,而 C 可通过自己的编译器转换为汇编语言。

我是这么去理解“方言”这二字的。

2. 为何出现方言?

我觉得,在计算机的世界里,“方言”的出现无非就是为了解决我们软件开发的几大问题:

  1. 代码重用
  2. 易于维护

额,我暂时也就想到这两个,请原谅我这低水平的攻城师。

于是,从上面看来,Sass 的出现也必定是为了解决 CSS 出现的一些问题。

3. Sass 等 CSS 方言(这里也可理解为框架)为何出现?

上面已经说了,Sass 的出现,是为了解决 CSS 的一些问题,而这些问题是什么呢?

从这里摘了一句话

LESS 和 Sass(或者类似方案)从三个方面解决了 CSS 存在的问题:分离,抽象和层叠

我在我自己写 CSS 的过程中发现代码十分混乱,我觉得我自己到现在为止,经历了两个过程:

  1. 按设计,一点一点写 CSS,几乎没有结构性,没有代码复用,维护困难
  2. 将公用的放在 public.css 文件里,然后每个页面一个 page.css,按布局相关的代码放在最上面,内容样式的代码按照一块一块放在布局的下面

这是我自己摸索着前进的一个过程,后来接触了 Sass,由于没有理解其意义所在, 于是也只是用新的一种 CSS 方言然后按照以前的方式继续写样式。

即使得益与方言本身的特点,代码有所改善,但是我觉得,这是一种死板的思维。

说到这里,也许你会发现,我没在讲为何会出现 Sass,而是在讲我自己学 CSS 的一个过程,其实我遇到的问题, 很多人已经遇到了,而我想,这也应该是 Sass 出现的原因之某些吧。

[分离] 将内容和样式进行分离,并且,分离的程度有多高

[抽象] 混合类、变量、继承,是实现抽象的基础,抽象,使得我们可以将很多共性的样式抽出出来,并统一放在某个文件夹下, 在我们需要的时候,我们直接引进来即可

[层叠]层叠的复杂性最高,我自己也不是很清楚,大概就是同一个样式在多个地方出现,如

1
2
3
4
5
6
7
8
9
10
11
.main {
  //...
}

.main .div {
  // ...
}

.main .div p {
  // ...
}

Sass 的嵌套和子选择器,使得有效得减少了一些样式的层叠,但这也并未彻底解决层叠的问题。 并且我觉得,其与个人的能力和对其理解的程度相关。 毕竟,同样的工具,其发挥的效果会跟个人的能力密切相关。

项目中,如何组织好 Sass 的代码结构

最基本的,在我们的 Web 项目里,CSS应该有三种:

1
2
3
4
5
6
stylesheets/
| - reset.css
  - public.css
  - page-1.css
  - page-2.css
  - page-n.css

第一种即重新设定所有标签的默认样式,使得各个浏览器都能保持一致。

第二种就是我们公用的CSS代码啦。

第三种就是我们的页面代码,即每个页面我们都给它一个CSS文件。

通过这种方式,我们至少能够比较好地维护我们的代码。

How to structure a Sass project 文中,阐述了这样的一个基本目录结构

  • modules

    文件夹主要包含三种类型的代码:mixins(混合类)、functions、variables

    这里可以理解为将我们三面的 public.css 分得更细,并且利用 sass, 能够做到更好的抽象,提高代码复用率和维护性。

    比如我们整个网站的按钮样式,就可以放在 modules 里,可取名为:_button.css.scss

    这里面定义了按钮的一些基本样式,如字体大小,边框、圆角、背景颜色等, 之后我们在其他地方使用时就可以直接引进来,并且, 如果我全站要对按钮做一个修改,那么我们也就直接改 _button.css.scss 即可。

    最后,我们可增加一个文件 /modules/_all.css.scss,以便对 modules 进行统一管理, 这样,外面直接 import 这个 all 文件就可以了

  • particals

    我个人理解为 components(组件),为何这么理解呢?

    从文章中阐述到,这里面可以放例如 headercontentsidebarfooter 等一些组件的样式,而这些组件,都是构成某个页面的一部分。

    最后,我们也跟上面一样,可增加一个 base.css.scss 文件来管理 partials。

我喜欢的组织方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
stylesheets/
|
|-- components/
  |-- all.css.scss
  |-- button.css.scss
  |-- footer.css.scss
  |-- ...
|-- reset.css.scss
|-- base.css.scss
|
|-- variables.css.scss
|
|-- _mixins.css.scss
|
|-- page1.css.scss
|-- page2.css.scss
|-- ....
|--
|-- application.css.scss

将网站的组件放在 components 里,然后由 all.css.scss 来维护整个目录, 外面只要 @import 'components/all'; 即可。

mixins.css.scss,定义一些会重用到的代码。

variables,存放网站统一的变量,如字体、颜色等等。

base.css.scss 应该是这样的

1
2
3
4
5
6
7
8
9
10
@import "reset";
@import "mixins";
@import "components/all";


// 全局布局的维护
// ...

// 一些其他公用的代码,如全局统一 a 标签的样式
// ...

application.css.scss 应该是这样的

1
2
3
4
5
6
7
@import 'base';

@import 'page1';
@import 'page2';
@import 'page3';

// ...

几个注意点

根据个人使用经验,在使用 Sass 等框架编写 CSS 代码时,应当注意:

  1. 代码的嵌套不要超过 2 层
  2. 少用 extend
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
// 不建议

#main {
  .main-first {
    a {
      font-size: 12px;
      img {
        width: 20px;
        height: 20px;
      }
    }

  }

  .main-second {
    a {
      font-size: 12px;
    }
  }
}

// 建议

#main .main-first {
  a { font-size: 12px; }
  a img {
    width: 20px;
    height: 20px;
  }
}

#main .main-second {
  a { font-size: 12px; }
}

同类框架

  • Less
  • Stylus

总结

这次学习 Sass,改变以往的习惯,以往就是直接学语法,用得虽然快, 但是这种思维是不行的。

这次的话,我尝试去了解 Sass 出现的原因,其中最重要的就是6个字:分离、抽象、层叠。

因为SASS的语法很简单,所以基本不用怎么学,在 thesassway.com 里看了两篇基础的文章。 怎样构建SASS目录结构和嵌套选择器的一些注意事项,再结合自己的实际经历谈一些想法。

这次这篇写了三个晚上,期间,也重新去看了一下上面提到的两篇文章。

思维中断过,语句组织得也很随便,之后再来看看,也许会有一些新的收获。

对于我来说,写文章,就是跟自己在交流,这样最大的好处就是,把原本并不是很清楚的东西, 通过讲出来,写出来,从而有一个存在感、踏实感!

Comments