2. 程式人生 > >Sass 的基本特性

Sass 的基本特性

阿新 • • 發佈：2019-02-11

一、[Sass]宣告變數

定義變數的語法：

Sass 使用大家都喜歡的美元符號“$”開頭。我想用一張圖來解釋，我一直堅信，一圖勝千言萬語：

上圖非常清楚告訴了大家，Sass 的變數包括三個部分：

  1. 宣告變數的符號“$”
  2. 變數名稱
  3. 賦予變數的值

二、[Sass]普通變數與預設變數

普通變數

定義之後可以在全域性範圍內使用。

$fontSize: 12px;
body{
    font-size:$fontSize;
}

編譯後的css程式碼：

body{
    font-size:12px;
}


預設變數

sass 的預設變數僅需要在值後面加上 !default 即可。

$baseLineHeight:1.5 !default
 
;
body{
    line-height: $baseLineHeight; 
}

編譯後的css程式碼：

body{
    line-height:1.5;
}


sass 的預設變數一般是用來設定預設值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在預設變數之前重新宣告下變數即可。
 

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

編譯後的css程式碼：

body{
    line-height:2;
}


可以看出現在編譯後的 line-height 為 2，而不是我們預設的 1.5。預設變數的價值在進行元件化開發

的時候會非常有用。

三、[Sass]變數的呼叫

在 Sass 中聲明瞭變數之後，就可以在需要的地方呼叫變數。呼叫變數的方法也非常的簡單。

比如在定義了變數

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color: #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;


在按鈕 button 中呼叫，可以按下面的方式呼叫

.btn-primary {
   background-color: $btn-primary-bg;
   color: $btn-primary-color;
   border: 1px solid $btn-primary-border;
}

編譯出來的CSS:

.btn-primary {
  background-color: #337ab7;
  color: #fff;
  border: 1px solid #2e6da4;
}

四、[Sass]區域性變數和全域性變數

Sass 中變數的作用域在過去幾年已經發生了一些改變。直到最近，規則集和其他範圍內宣告變數的作用域才預設為本地。如果已經存在同名的全域性變數，從 3.4 版本開始，Sass 已經可以正確處理作用域的概念，並通過建立一個新的區域性變數來代替。

全域性變數與區域性變數

先來看一下程式碼例子：

//SCSS
$color: orange !default;//定義全域性變數(在選擇器、函式、混合巨集...的外面定義的變數為全域性變數)
.block {
  color: $color;//呼叫全域性變數
}
em {
  $color: red;//定義區域性變數
  a {
    color: $color;//呼叫區域性變數
  }
}
span {
  color: $color;//呼叫全域性變數
}

css 的結果：

//CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

上面的示例演示可以得知，在元素內部定義的變數不會影響其他元素。如此可以簡單的理解成，全域性變數就是定義在元素外面的變數，如下程式碼：

$color:orange !default;

$color 就是一個全域性變數，而定義在元素內部的變數，比如 $color:red; 是一個區域性變數。

除此之外，Sass 現在還提供一個 !global 引數。!global 和 !default 對於定義變數都是很有幫助的。我們之後將會詳細介紹這兩個引數的使用以及其功能。

全域性變數的影子

當在區域性範圍（選擇器內、函式內、混合巨集內...）宣告一個已經存在於全域性範圍內的變數時，區域性變數就成為了全域性變數的影子。基本上，區域性變數只會在區域性範圍內覆蓋全域性變數。

上面例子中的 em 選擇器內的變數 $color 就是一個全域性變數的影子。

//SCSS
$color: orange !default;//定義全域性變數
.block {
  color: $color;//呼叫全域性變數
}
em {
  $color: red;//定義區域性變數（全域性變數 $color 的影子）
  a {
    color: $color;//呼叫區域性變數
  }
}

什麼時候宣告變數？

我的建議，建立變數只適用於感覺確有必要的情況下。不要為了某些駭客行為而宣告新變數，這絲毫沒有作用。只有滿足所有下述標準時方可建立新變數：

  1. 該值至少重複出現了兩次；
  2. 該值至少可能會被更新一次；
  3. 該值所有的表現都與變數有關（非巧合）。

基本上，沒有理由宣告一個永遠不需要更新或者只在單一地方使用變數。

溫馨小提示：您在學習 sass 時，除了在我們網頁上可以做練習，還有一個便利線上編輯器網址如下：

http://sassmeister.com/

五、[Sass]巢狀-選擇器巢狀

Sass 中還提供了選擇器巢狀功能，但這也並不意味著你在 Sass 中的巢狀是無節制的，因為你巢狀的層級越深，編譯出來的 CSS 程式碼的選擇器層級將越深，這往往是大家不願意看到的一點。這個特性現在正被眾多開發者濫用。

選擇器巢狀為樣式表的作者提供了一個通過區域性選擇器相互巢狀實現全域性選擇的方法，Sass 的巢狀分為三種：

  • **************************************選擇器巢狀*********************************************************

假設我們有一段這樣的結構：

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想選中 header 中的 a 標籤，在寫 CSS 會這樣寫：

nav a {
  color:red;
}

header nav a {
  color:green;
}

那麼在 Sass 中，就可以使用選擇器的巢狀來實現：

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}
  • *****************************************************屬性巢狀***********************************************************

Sass 中還提供屬性巢狀，CSS 有一些屬性字首相同，只是字尾不一樣，比如：border-top/border-right，與這個類似的還有 margin、padding、font 等屬性。假設你的樣式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我們可以這樣寫：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}
  • *****************************************************偽類巢狀**********************************************************

其實偽類巢狀和屬性巢狀非常類似，只不過他需要藉助`&`符號一起配合使用。我們就拿經典的“clearfix”為例吧：

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

編譯出來的 CSS：

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

避免選擇器巢狀：

  • 選擇器巢狀最大的問題是將使最終的程式碼難以閱讀。開發者需要花費巨大精力計算不同縮排級別下的選擇器具體的表現效果。
  • 選擇器越具體則宣告語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。

為了防止此類情況，我們應該儘可能避免選擇器巢狀。然而，顯然只有少數情況適應這一措施。

六、[Sass]混合巨集-宣告混合巨集

如果你的整個網站中有幾處小樣式類似，比如顏色，字型等，在 Sass 可以使用變數來統一處理，那麼這種選擇還是不錯的。但當你的樣式變得越來越複雜，需要重複使用大段的樣式時，使用變數就無法達到我們目了。這個時候 Sass 中的混合巨集就會變得非常有意義。在這一節中，主要向大家介紹 Sass 的混合巨集。

1、宣告混合巨集

不帶引數混合巨集：

在 Sass 中，使用“@mixin”來宣告一個混合巨集。如：

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

其中 @mixin 是用來宣告混合巨集的關鍵詞，有點類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合巨集的名稱。大括號裡面是複用的樣式程式碼。

帶引數混合巨集：

除了宣告一個不帶引數的混合巨集之外，還可以在定義混合巨集時帶有引數，如：

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

複雜的混合巨集：

上面是一個簡單的定義混合巨集的方法，當然， Sass 中的混合巨集還提供更為複雜的，你可以在大括號裡面寫上帶有邏輯關係，幫助更好的做你想做的事情,如：

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

這個 box-shadow 的混合巨集，帶有多個引數，這個時候可以使用“ … ”來替代。簡單的解釋一下，當 $shadow 的引數數量值大於或等於“ 1 ”時，表示有多個陰影值，反之呼叫預設的引數值“ 0 0 4px rgba(0,0,0,.3) ”。

注：複雜的混合巨集中的邏輯關係（@[email protected]）後面小節會有講解。

七、[Sass]混合巨集-呼叫混合巨集

在 Sass 中通過 @mixin 關鍵詞聲明瞭一個混合巨集，那麼在實際呼叫中，其匹配了一個關鍵詞“@include”來呼叫宣告好的混合巨集。例如在你的樣式中定義了一個圓角的混合巨集“border-radius”:

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

在一個按鈕中要呼叫定義好的混合巨集“border-radius”，可以這樣使用：

button {
    @include border-radius;
}

這個時候編譯出來的 CSS:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

八、[Sass]混合巨集的引數--傳一個不帶值的引數

Sass 的混合巨集有一個強大的功能，可以傳參，那麼在 Sass 中傳參主要有以下幾種情形：

A) 傳一個不帶值的引數

在混合巨集中，可以傳一個不帶任何值的引數，比如：

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

在混合巨集“border-radius”中定義了一個不帶任何值的引數“$radius”。

在呼叫的時候可以給這個混合巨集傳一個引數值：

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

這裡表示給混合巨集傳遞了一個“border-radius”的值為“3px”。

編譯出來的 CSS:

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

九、[Sass]混合巨集的引數--傳一個帶值的引數

在 Sass 的混合巨集中，還可以給混合巨集的引數傳一個預設值，例如：

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在混合巨集“border-radius”傳了一個引數“$radius”，而且給這個引數賦予了一個預設值“3px”。

在呼叫類似這樣的混合巨集時，會多有一個機會，假設你的頁面中的圓角很多地方都是“3px”的圓角，那麼這個時候只需要呼叫預設的混合巨集“border-radius”:

.btn {
  @include border-radius;
}

編譯出來的 CSS:

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

但有的時候，頁面中有些元素的圓角值不一樣，那麼可以隨機給混合巨集傳值，如：

.box {
  @include border-radius(50%);
}

編譯出來的 CSS:

.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

十、[Sass]混合巨集的引數--傳多個引數

Sass 混合巨集除了能傳一個引數之外，還可以傳多個引數，如：

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

在混合巨集“center”就傳了多個引數。在實際呼叫和其呼叫其他混合巨集是一樣的：

.box-center {
  @include center(500px,300px);
}

編譯出來 CSS:

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

十一、[Sass]擴充套件/繼承

繼承對於瞭解 CSS 的同學來說一點都不陌生，先來看一張圖：

圖中程式碼顯示“.col-sub .block li,.col-extra .block li” 繼承了 “.item-list ul li”選擇器的 “padding : 0;” 和 “ul li” 選擇器中的 “list-style : none outside none;”以及 * 選擇器中的 “box-sizing:inherit;”。

在 Sass 中也具有繼承一說，也是繼承類中的樣式程式碼塊。在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現程式碼的繼承。如下所示：

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

編譯出來之後：

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

從示例程式碼可以看出，在 Sass 中的繼承，可以繼承類樣式塊中所有樣式程式碼，而且編譯出來的 CSS 會將選擇器合併在一起，形成組合選擇器：

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
十二、[Sass]佔位符 %placeholder

Sass 中的佔位符 %placeholder 功能是一個很強大，很實用的一個功能，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的程式碼冗餘的情形。因為 %placeholder 宣告的程式碼，如果不被 @extend 呼叫的話，不會產生任何程式碼。來看一個演示：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

這段程式碼沒有被 @extend 呼叫，他並沒有產生任何程式碼塊，只是靜靜的躺在你的某個 SCSS 檔案中。只有通過 @extend 呼叫才會產生程式碼：

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

編譯出來的CSS

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

從編譯出來的 CSS 程式碼可以看出，通過 @extend 呼叫的佔位符，編譯出來的程式碼會將相同的程式碼合併在一起。這也是我們希望看到的效果，也讓你的程式碼變得更為乾淨。

十三、[Sass]混合巨集 VS 繼承 VS 佔位符 參見：http://blog.csdn.net/aaa333qwe/article/details/77369007 十四、[Sass]插值#{} 參見：http://blog.csdn.net/aaa333qwe/article/details/77369173 十五、[Sass]註釋

註釋對於一名程式設計師來說，是極其重要，良好的註釋能幫助自己或者別人閱讀原始碼。在 Sass 中註釋有兩種方式，我暫且將其命名為：

1、類似 CSS 的註釋方式，使用 ”/* ”開頭，結屬使用 ”*/ ”，會在編譯出來的 CSS 顯示
2、類似 JavaScript 的註釋方式，使用“//”，在編譯出來的 CSS 中不會顯示

//定義一個佔位符

%mt5 {
  margin-top: 5px;
}

/*呼叫一個佔位符*/

.box {
  @extend %mt5;
}

編譯出來的CSS

.box {
  margin-top: 5px;
}

/*呼叫一個佔位符*/

 十六、[Sass]資料型別

Sass 和 JavaScript 語言類似，也具有自己的資料型別，在 Sass 中包含以下幾種資料型別：

  •  數字: 如，1、 2、 13、 10px；
  •  字串：有引號字串或無引號字串，如，"foo"、 'bar'、 baz；
  •  顏色：如，blue、 #04a3f9、rgba(255,0,0,0.5)；
  •  布林型：如，true、 false；
  •  空值：如，null；
  •  值列表：用空格或者逗號分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。


SassScript 也支援其他 CSS 屬性值（property value），比如 Unicode 範圍，或 !important 宣告。然而，Sass 不會特殊對待這些屬性值，一律視為無引號字串 (unquoted strings)。

十七、[Sass]字串

SassScript 支援 CSS 的兩種字串型別：

  • 有引號字串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
  • 無引號字串 (unquoted strings)，如 sans-serifbold。

在編譯 CSS 檔案時不會改變其型別。只有一種情況例外，使用 #{ }插值語句 (interpolation) 時，有引號字串將被編譯為無引號字串，這樣方便了在混合指令 (mixin) 中引用選擇器名。

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

編譯為：

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

需要注意的是：當 deprecated = property syntax 時 （暫時不理解是怎樣的情況），所有的字串都將被編譯為無引號字串，不論是否使用了引號。

十八、[Sass]值列表

所謂值列表 (lists) 是指 Sass 如何處理 CSS 中： 

margin: 10px 15px 0 0

或者： 

font-face: Helvetica, Arial, sans-serif

像上面這樣通過空格或者逗號分隔的一系列的值。

事實上，獨立的值也被視為值列表——只包含一個值的值列表。

Sass列表函式（Sass list functions）賦予了值列表更多功能（Sass進級會有講解）：

  1. nth函式（nth function） 可以直接訪問值列表中的某一項；
  2. join函式（join function） 可以將多個值列表連結在一起；
  3. append函式（append function） 可以在值列表中新增值； 
  4. @each規則（@each rule） 則能夠給值列表中的每個專案新增樣式。

值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個值列表的值列表。如果內外兩層值列表使用相同的分隔方式，要用圓括號包裹內層，所以也可以寫成 (1px 2px) (5px 6px)。當值列表被編譯為 CSS 時，Sass 不會新增任何圓括號，因為 CSS 不允許這樣做。(1px 2px) (5px 6px)與 1px 2px 5px 6px 在編譯後的 CSS 檔案中是一樣的，但是它們在 Sass 檔案中卻有不同的意義，前者是包含兩個值列表的值列表，而後者是包含四個值的值列表。

可以用 () 表示空的列表，這樣不可以直接編譯成 CSS，比如編譯 font-family: ()時，Sass 將會報錯。如果值列表中包含空的值列表或空值，編譯時將清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。

十九、Sass的基本特性-運算(加減乘除)

程式中的運算是常見的一件事情，但在 CSS 中能做運算的，到目前為止僅有 calc() 函式可行。但在 Sass 中，運算只是其基本特性之一。在 Sass 中可以做各種數學計算，在接下來的章節中，主要和大家一起探討有關於 Sass 中的數學運算。

（一）、***************************************************加法**************************************************

加法運算是 Sass 中運算中的一種，在變數或屬性中都可以做加法運算。如：

.box {
  width: 20px + 8in;
}

編譯出來的 CSS:

.box {
  width: 788px;
}

但對於攜帶不同型別的單位時，在 Sass 中計算會報錯，如下例所示：

.box {
  width: 20px + 1em;
}

編譯的時候，編譯器會報錯：“Incompatible units: 'em' and ‘px'.”

（二）、***************************************************減法**************************************************

Sass 的減法運算和加法運算類似，我們通過一個簡單的示例來做闡述：

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
Sass入門-基本特性

     
  
 
  
  
 四、基本特性 
  
  宣告變數  使用$開頭：  在值後面加！default表示預設值。eg：  $btn-primary-color : #fff !default;  在預設變數之前重新聲明後即可覆蓋它：     $baseLineHeight: 2;
    $baseLine 



  
 

    


    
    
Sass 的基本特性

     
 
                
一、[Sass]宣告變數
定義變數的語法：


Sass 使用大家都喜歡的美元符號“$”開頭。我想用一張圖來解釋，我一直堅信，一圖勝千言萬語：



上圖非常清楚告訴了大家，Sass 的變數包括三個部分：
宣告變數的符號“$”變數名稱賦予變數的值二、[Sass]普通變數與預 



  
 

    


    
    
面向對象三大基本特性,五大基本原則

     
 lose   做到   直接   職責   工程   實體   類結構   ron   依賴   三大特性是：封裝,繼承,多態  
封裝：就是把客觀事物封裝成抽象的類，並且類可以把自己的數據和方法只讓可信的類或者對象操作，對不可信的進行信息隱藏。封裝是面向對象的特征之一，是對象和類概念的主要特性。 簡單的說， 



  
 

    


    
    
無源射頻混頻器的基本特性（1）

     
 tar   media   留下   時域   過程   inter   local   logs   運算   混頻器的一個重要作用就是頻率搬運，即將中頻信號搬運到射頻段，或者將射頻信號搬運到中頻段，前者稱為上變頻，後者稱為下變頻。

以上變頻為例，在實際使用中f0稱為IF（Intermediate Fre 



  
 

    


    
    
++++++++++HTTP基本特性及配置

     
 博客   linux   運維   ASF, 協議實現的軟件程序, HTTPD特性HTTP基本應用,客戶端工具使用(telnet, elinks, curl)ASF: Apache Software Foundation  Apache 軟件基金會FSF: Free Software Foundaton    



  
 

    


    
    
bash基本特性

     
 linuxbash基本特性bash是Linux中最常使用到的shell，它給用戶提供了許多便利的功能和特性，下面就介紹一些bash的基本特性。 1、命令歷史historybash能為我們提供命令的存儲功能，我們也可以借由history命令來查看我們以往輸入過的命令有哪些。 [[email prote 



  
 

    


    
    
zookeeper基本特性與基於Linux的ZK客戶端命令行學習

     
 zookeeper   命令行   客戶端   watcher   事件   zookeeper常用命令行操作

通過 zkCli.sh 來打開zk客戶端：

[root@study-01 ~]# zkCli.sh
[zk: localhost:2181(CONNECTED) 0]

ls 與 ls2 命令： 



  
 

    


    
    
Dubbo基本特性之泛化調用

     
 string   instance   ava   face   處理   eight   long   tle   exceptio   　　Dubbo 是支持泛化調用的，什麽是泛化調用呢？泛化調用的好處是什麽呢，泛化調用說白一點就是服務消費者並沒有服務的接口。
　　在《Dubbo入門—搭建一個最簡單的De 



  
 

    


    
    
菜鳥的linux成長筆記-bash基本特性

     
 路徑   成功   命令行   tom   histfile   返回值   nor   指定   操作   bash基礎特性
一、命令的歷史記錄
history [OPTION]

history環境變量:

HISTSIZE: 命令歷史記錄的條數
HISTFILE: ~/.bash_history
H 



  
 

    


    
    
類有哪三個基本特性？各特性的優點？

     
 封裝   創建   隱藏   目的   多級   變量   成員   表現   解答    類有哪三個基本特性？各特性的優點？
 
解答：類具有封裝性、繼承性和多態性。
 
封裝性：類的封裝性為類的成員提供公有、缺省、保護和私有等多級訪問權限，目的是隱藏類中的私有變量和類中方法的實現細節。
 
繼承性：類的繼 



  
 

    


    
    
20181005  面向對象，三大基本特性，五大基本原則

     
 data   相同   屬性   級別   表現   職責   進行   分離   包含   透切理解面向對象三大基本特性是理解面向對象五大基本原則的基礎.
三大特性是：封裝,繼承,多態  
所謂封裝，也就是把客觀事物封裝成抽象的類，並且類可以把自己的數據和方法只讓可信的類或者對象操作，對不可信的進行信息隱藏 



  
 

    


    
    
面向對象三大基本特性，五大基本原則

     
 基本   原來   原則   分開   基本原則   現在   應該   isp   編寫   三大特性是：

封裝
繼承
多態 

五大基本原則：

單一職責原則SRP(Single Responsibility Principle)
開放封閉原則OCP(Open－Close Principle)
替換原則 



  
 

    


    
    
基礎 | Java的四大基本特性

     
  
 
  
  
 秋招面試時經常被問到 「Java有哪些基本特性？面向物件的特徵有哪些？談談對Java中多型的理解？在專案中哪些地方用到過多型？」，這個問題還是比較基礎的，但基礎問題不見得每個人都能回答的很好，最重要的還是要足夠理解並準確表達。 
 建議重點關注Java中「多型性」的相關問題。 
  
  



  
 

    


    
    
vue2.0的基本特性

     
 本文目前總結的特性如下1.偵聽屬性和計算屬性2.class的繫結3.條件渲染時的注意事項4.v-if和v-for同時使用的注意事項5.插槽6.ref,父元件呼叫子元件的另一種方式7.<keep-alive>標籤 
 
偵聽屬性和計算屬性 
計算屬性computed假設有A、B兩個變數,B的值依賴於 



  
 

    


    
    
1_Java基本特性

     
  
 
  
  
  
  最近打算跟著極客時間的《核心技術36講》擼一下程式碼，結果發現高估了自己，好像是不會寫Java程式碼捏。看《Thinking in Java》乖乖來做個基礎筆記。喵~ 
  
  
 物件導論 
 這一章每次都會看，這次看發現原文寫的超好，翻譯也超棒~  
 哼哧做了個圖，怎麼做 



  
 

    


    
    
Java8基本特性

     
  
 
  Stream：         List<String> strings = Arrays.asList("abc", "", "bc", "efg", "abcd", "", "jkl");     &n 



  
 

    


    
    
Spring學習1：Spring基本特性

     
 情況下   jakarta   .get   開源框架   ext.get   work   jar   就會   spa   http://longliqiang88.github.io/2015/08/14/Spring%E5%AD%A6%E4%B9%A01%EF%BC%9ASpring%E5%9F%BA 



  
 

    


    
    
第4章 ZK基本特性與基於Linux的ZK客戶端命令列學習

     
  
  
  
 
 
  ZK基本特性與基於Linux的ZK客戶端命令列學習
  
   4-1 zookeeper常用命令列操作
   4-2 session的基本原理與create命令的使用
   4-3 set與delete命令的使用
   4-4 zk特性 – 理解watcher機制
   4-5  



  
 

    


    
    
面向物件的基本特性

     
 
							
							
							面向物件
面向物件:將功能封裝進物件,強調了具備功能的物件
面向過程:強調的是功能的行為
oop:繼承 封裝 多型
類之間的關係
關聯關係 本類中其他類的使用
繼承關係 繼承其他類
聚合關係
棧:物件的引用區域性變數
堆:new出來的東西(包含成員變數)
成員變 



  
 

    


    
    
java開發實戰1200例（I）--------176列舉型別的基本特性

     
 
                package enumTest;

public class EnumClass {
    public static void main(String[] args){
        for(Size size:Size.values()){