Sass与Web组件化相关的功能

2023-02-22 09:06:16

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

码农公寓