Sass与Web组件化相关的功能

Sass

https://en.wikipedia.org/wiki/Sass_(stylesheet_language)

 

Sass (Syntactically Awesome Stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.^[2][3] After its initial versions, Weizenbaum and Chris Eppstein continu

 

官网

http://sass-lang.com

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

 

认识：

实际上Sass规定了一套CSS语法， 此语法不是在浏览器上执行的， 而是为了编写css文件便利， 以及维护便利，  由Sass工具在编译环境中，将sass文件转换为css文件， 此文件可以在浏览器上跑。

http://sass-lang.com/guide

 

git

https://github.com/sass/sass

 

安装：

http://sass-lang.com/install

 

http://www.ruanyifeng.com/blog/2012/06/sass.html

功能

http://sass-lang.com/guide

Variables

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

不过太深的嵌套， 也不利于维护， 不建议使用。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

Partials

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

_partial.scss

Import

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

 

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Extend/Inheritance

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

 

Operators

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

组件化相关

组件化牵扯到如下功能：

1、 Partials， 保证每个组件的css文件可以独自管理。

2、 Extends/Inheritance， 继承 可以保证相同组件， 继承同一个父亲样式。

3、 Mixins， 可以让相同功能的一套代码， 以函数的方式， 定义在一起。

4、 Imports， 保证容器控件， 可以组合容器中子控件的样式。

 

动手实验

1 官方介绍的ruby gem安装方法：

http://sass-lang.com/install

安装完 ruby，  再执行gem install sass， 结果报错。 应该是国内被墙了。

 

2 解决方法， 下载 sass gem 文件

https://rubygems.org/gems/sass/versions/4.0.0.alpha.1

 

3 安装此gem文件， gem install --local filename.gem。

http://www.cnblogs.com/tambor/archive/2011/12/25/Ruby_gem_Windows_mysql.html

 

4 实验demo

https://github.com/sunningQD/sass