Sass编写组件

by @大漠

Sass编写组件

message组件

http://www.w3cplus.com/preprocessor/sass-component-10-minutes.html

message组件

You might want to know this.
There might be something wrong.
You should pay attention!
Everything is okay, move on.

CSS制作方式

HTML


<div class="message message-success">成功提示信息</div>
<div class="message message-error">报错提示信息</div>
<div class="message message-warning">警告提示信息</div>
<div class="message message-info">信息提示信息</div>

CSS


.message{
  /*公用样式*/
}
.message-success {
 /*Success样式*/
}
.message-error {
 /*Error样式*/
}
.message-warning {
 /*Warning样式*/
}
.message-info {
　/*Info样式*/
}

Sass改变开发模式

  • 结构与表现层更多的解藕
  • 快速开发
  • 易于维护

Message组件分析

公用部分


.message{
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.15em;
  border: 1px solid;
}

独立部分

.message-success {
  border-color: #d6e9c6;
  background-color: #dff0d8;
  color: #468847; 
}
.message-error {
  border-color: #eed3d7;
  background-color: #f2dede;
  color: #b94a48; 
}
.message-warning {
  border-color: #fbeed5;
  background-color: #fcf8e3;
  color: #c09853; 
}
.message-info {
  border-color: #bce8f1;
  background-color: #d9edf7;
  color: #3a87ad; 
}

Sass基本特性

  • .class VS %placeholder VS @mixin
  • @extend
  • @include

.class VS %placeholder

.class

SCSS

.message {
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius:0.15em;
  border: 1px solid;
}

.message-success {
  @extend .message;
  background: #dff0d8;
}

.message-error {
  @extend .message;
  background: #f2dede;
}

.message-warning {
  @extend .message;
  background: #fcf8e3;
}

.message-info {
  @extend .message;
  background: #d9edf7;
}

CSS

.message, 
.message-success, 
.message-error, 
.message-warning, 
.message-info {
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.15em;
  border: 1px solid; }

.message-success {
  background: #dff0d8; }

.message-error {
  background: #f2dede; }

.message-warning {
  background: #fcf8e3; }

.message-info {
  background: #d9edf7; }

%placeholder

SCSS

%message {
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius:0.15em;
  border: 1px solid;
}

.message-success {
  @extend %message;
  background: #dff0d8;
}

.message-error {
  @extend %message;
  background: #f2dede;
}

.message-warning {
  @extend %message;
  background: #fcf8e3;
}

.message-info {
  @extend %message;
  background: #d9edf7;
}

CSS

.message-success, 
.message-error, 
.message-warning, 
.message-info {
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.15em;
  border: 1px solid; }

.message-success {
  background: #dff0d8; }

.message-error {
  background: #f2dede; }

.message-warning {
  background: #fcf8e3; }

.message-info {
  background: #d9edf7; }

@mixin

@mixin message($color) {
  @extend %message;
  color: $color;
  border-color: lighten($color, 20%);
  background: lighten($color, 40%);
}

@include

SCSS

.message-success {
  @include message(#468847);
}
.message-error {
  @include message(#b94a48);
}
.message-warning {
  @include message(#c09853);
}
.message-info {
  @include message(#3a87ad);
}

CSS

.message-success, 
.message-error, 
.message-warning, 
.message-info {
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.15em;
  border: 1px solid; }

.message-success {
  color: #468847;
  border-color: #7aba7b;
  background: #bdddbd; }

.message-error {
  color: #b94a48;
  border-color: #d59392;
  background: #f1dcdc; }

.message-warning {
  color: #c09853;
  border-color: #dbc59e;
  background: #f7f1e8; }

.message-info {
  color: #3a87ad;
  border-color: #7ab5d3;
  background: #c7e0ec; }

让事情变得更有意思

＠each的魅力

SCSS

$message-types: (
  (success    #468847)
  (error    #b94a48)
  (warning  #c09853)
  (info     #3a87ad)
) !default;

%message {
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius:0.15em;
  border: 1px solid;
}
@mixin message($color) {
  @extend %message;
  color: $color;
  border-color: lighten($color, 20%);
  background: lighten($color, 40%);
}
@each $message-type in $message-types {
  $type:  nth($message-type, 1);
  $color: nth($message-type, 2);

  .message-#{$type} {
    @include message($color);
  }
}

CSS

.message-success, 
.message-error, 
.message-warning, 
.message-info {
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.15em;
  border: 1px solid; }

.message-success {
  color: #468847;
  border-color: #7aba7b;
  background: #bdddbd; }

.message-error {
  color: #b94a48;
  border-color: #d59392;
  background: #f1dcdc; }

.message-warning {
  color: #c09853;
  border-color: #dbc59e;
  background: #f7f1e8; }

.message-info {
  color: #3a87ad;
  border-color: #7ab5d3;
  background: #c7e0ec; }

Sass的Map特性

SCSS

$message-colors: (
  success: (
    text: #468847,
    background: #dff0d8,
    border: darken(adjust-hue(#dff0d8, -10), 5%)
  ),
  error: (
    text: #b94a48,
    background: #f2dede,
    border: darken(adjust-hue(#f2dede, -10), 3%)
  ),
  warning: (
    text: #c09853,
    background: #fcf8e3,
    border: darken(adjust-hue(#fcf8e3, -10), 3%)
  ),
  info: (
    text: #3a87ad,
    background: #d9edf7,
    border: darken(adjust-hue(#d9edf7, -10), 7%)
  )
) !default;

%message {
	padding: 0.5em;
	margin-bottom: 0.5em;
	border-radius:0.15em;
	border: 1px solid;
}

@each $type, $colors in $message-colors {
  .message-#{$type} {
    @extend %message;
    border-color: map-get($colors, border);
    background-color: map-get($colors, background);
    color: map-get($colors, text);
  }
}

CSS

.message-success, 
.message-error, 
.message-warning, 
.message-info {
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.15em;
  border: 1px solid; }

.message-success {
  border-color: #d6e9c6;
  background-color: #dff0d8;
  color: #468847; }

.message-error {
  border-color: #eed3d7;
  background-color: #f2dede;
  color: #b94a48; }

.message-warning {
  border-color: #fbeed5;
  background-color: #fcf8e3;
  color: #c09853; }

.message-info {
  border-color: #bce8f1;
  background-color: #d9edf7;
  color: #3a87ad; }

扩展阅读

  1. 理解Sass的选择占位符%placeholder
  2. 理解SASS的嵌套，@extend，%Placeholders和Mixins
  3. sass揭秘之变量
  4. sass揭秘之@if，@for，@each
  5. Sass基础——颜色函数
  6. 理解Sass的list
  7. Sass:Mixin还是Placeholder
  8. 理解Sass的选择占位符%placeholder
  9. Sass编写组件
  10. Sass系列教程

Q &A

Thanks!