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.scsshtml,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， 保证容器控件， 可以组合容器中子控件的样式。

Sass与Web组件化相关的功能