SASS組件開發

時間 2019-11-09

標籤 sass 組件開發简体版

原文原文鏈接

SASS組件開發

SASS預處理器，增長了css所沒有的編程能力，帶來了前端開發的效率提升，以及擴展了css的編寫技巧。css

組件開發

設計一個表單提示層（包括成功success，警告warning，錯誤等狀態error）組件，css須要定義基本樣式字體（font-）、外內邊距（padding，margin）、顯示方式（display）、邊框（border）以及其餘相關的內容，再爲單獨的狀態定義須要的樣式。html

css組件開發

先定義基本樣式，再對每個狀態定義一套樣式前端

.tips { /* 基本顏色設置 */
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

//成功狀態
.tips-success{
    background-color: #47a447;
    color: #fff;
}

//警告狀態
.tips-warning{
    background-color: #ed9c28;
    color: #fff;
}

//錯誤狀態
.tips-error{
    background-color: #ed9c28;
    color: #fff;
}

每一種狀態文字和邊框顏色須要單獨設置，稍顯繁瑣。後期擴展其它狀態，如信息info、危險dange等，就是工做成本的提升。幸虧SASS提供了編程能力，爲咱們解決這種擔心，提升了工做效率。git

sass組件開發

組件是對數據和方法的簡單封裝。github

變量默認值!default

先來看一段js的變量聲明代碼web

var a = 1;
console.log(a);//1

再看一段sass代碼，是否是很簡單。編程

$color:blue;
$color:red; !default;//變量申明帶有!default，表示當前值爲缺省值
p{
    color:$color;//輸出blue
}

聲明!default，在這裏輸出blue，頗有趣吧。簡單說下它的做用：假設變量申明帶有!default，表示此變量爲默認值，可被全局的普通聲明覆蓋。這點還不能體現它的偉大做用。canvas

@mixin應用

先聲明@mixin

在須要的地方使用@include來聲明調用mixins。sass

/* mixin */
@mixin tips($background,$text-color,$tipsStylePadding) {
    background-color: $background;
    color: $text-color;
    padding: $tipsStylePadding;
    margin-bottom: 20px;
    border-radius: 4px;
}

調用功能模塊，當前的組件可擴展出多個組件樣式。ruby

//成功狀態
.tips-success { 
  @include tips($background,$text-color,$tipsStylePadding);
}

//警告狀態
.tips-warning {
  @include tips($background,$text-color,$tipsStylePadding);
}

//錯誤狀態
.tips-error {
  @include tips($background,$text-color,$tipsStylePadding);
}

//信息狀態（再擴展一個）
.tips-info {
  @include tips($background,$text-color);,$tipsStylePadding
}

@include在須要的地方隨意調用，不夠規範，後期難以維護。

組件實例

如今咱們新建個scss文件，這裏暫且叫作_tips.scss。

/* 變量
---------------------------------*/
$background:         #47a447 !default;
$text-color:         #fff !default;
$tipsStylePadding:   15px !default;
/* mixin
---------------------------------*/
@mixin tips($background,$text-color,$tipsStylePadding) {
    background-color: $background;
    color: $text-color;
    padding: $tipsStylePadding;
    margin-bottom: 20px;
    border-radius: 4px;
}
/*樣式
---------------------------------*/
//成功狀態
.tips-success { 
  @include tips($background,$text-color,$tipsStylePadding);
}

//警告狀態
.tips-warning {
  @include tips($background,$text-color,$tipsStylePadding);
}

//錯誤狀態
.tips-error {
  @include tips($background,$text-color,$tipsStylePadding);
}

//信息狀態（再擴展一個）
.tips-info {
  @include tips($background,$text-color,$tipsStylePadding);
}

接下來咱們要在所須要的文件，調用這個文件，這個組件就開發完了

//導入_tpis.scss
@import '_tips';

問題？

組件是重複可調用的，也是對數據和方法的簡單封裝
若是咱們對默認的padding爲15px不滿意，要改成5px，怎麼弄

從新覆寫

從新覆寫，會產生相同的代碼，這不是咱們想要的組件

//導入_tips.scss
@import '_tips';
.tips-success{
     padding:5px;
}
/*編譯後樣式
---------------------------------*/
.tips-success{ 
    background-color: #47a447;
    color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.tips-success{
    padding: 5px;
}

修改參數

改變@include的參數，一樣會產生相同的代碼，也不是咱們想要的組件

//導入_tips.scss
@import '_tips';
.tips-success{
   @include tips($tipsStyleBorder,5px);
}
/*編譯後樣式
---------------------------------*/
.tips-success{ 
    background-color: #47a447;
    color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.tips-success{
    background-color: #47a447;
    color: #fff;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 4px;
}

正確解決方法

這裏就須要使用 !default;特性

//申明$tpisStylePadding爲5px
$tpisStylePadding:  5px;

//導入_tips.scss
@import '_tips';

/*編譯後樣式
---------------------------------*/
.tips-success {
    background-color: #47a447;
    color: #fff;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 4px;
}