• <abbr id="chdyf"></abbr>
    <ruby id="chdyf"><acronym id="chdyf"><meter id="chdyf"></meter></acronym></ruby>
    <bdo id="chdyf"></bdo>
    <dfn id="chdyf"><menu id="chdyf"></menu></dfn>

    1. 

      <menuitem id="chdyf"></menuitem><strong id="chdyf"><menu id="chdyf"></menu></strong>
      <rt id="chdyf"><menu id="chdyf"></menu></rt>
      
成人小说一区二区三区,伊人精品成人久久综合全集观看,久久HEZYO色综合,中文字幕精品人妻熟女,影音先锋成人网站,我要看免费一级毛片,中国女人做爰A片,中文字幕av久久爽Av 
  
      
    

      

	
      
		
      
			
      
				
      Sass開發(fā)注意點(diǎn)
      
				
      
					
       2019-8-26      seo達(dá)人      
      
					
					
      
						
					
      
				
      
				
			
      
			
      
				
      避免選擇器嵌套：

      
選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發(fā)者需要花費(fèi)巨大精力計(jì)算不同縮進(jìn)級(jí)別下的選擇器具體的表現(xiàn)效果。

      
選擇器越具體則聲明語(yǔ)句越冗長(zhǎng)，而且對(duì)最近選擇器的引用(&)也越頻繁。在某些時(shí)候，出現(xiàn)混淆選擇器路徑和探索下一級(jí)選擇器的錯(cuò)誤率很高，這非常不值得。

      


      
混合宏

      
在 Sass 中通過 @mixin 關(guān)鍵詞聲明了一個(gè)混合宏，那么在實(shí)際調(diào)用中，其匹配了一個(gè)關(guān)鍵詞“@include”來調(diào)用聲明好的混合宏。

      


      
@mixin border-radius{

      
  -webkit-border-radius: 3px;

      
  border-radius: 3px;

      
}

      


      
.box {

      
  @include border-radius;

      
  margin-bottom: 5px;

      
}

      


      
.btn {

      
  @include border-radius;

      
}

      


      
繼承 @extend

      
在 Sass 中也具有繼承一說，也是繼承類中的樣式代碼塊。在 Sass 中是通過關(guān)鍵詞 “@extend”來繼承已存在的類樣式塊，從而實(shí)現(xiàn)代碼的繼承。如下所示：

      


      
//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 中的占位符 %placeholder 功能是一個(gè)很強(qiáng)大，很實(shí)用的一個(gè)功能，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因?yàn)?%placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會(huì)產(chǎn)生任何代碼。

      


      
//SCSS

      
%mt5 {

      
  margin-top: 5px;

      
}

      
%pt5{

      
  padding-top: 5px;

      
}

      


      
.btn {

      
  @extend %mt5;

      
  @extend %pt5;

      
}

      


      
.block {

      
  @extend %mt5;

      


      
  span {

      
    @extend %pt5;

      
  }

      
}

      


      
編譯后（代碼相同的會(huì)自動(dòng)整合）

      


      
//CSS

      
.btn, .block {

      
  margin-top: 5px;

      
}

      


      
.btn, .block span {

      
  padding-top: 5px;

      
}

      


      


      
藍(lán)藍(lán)設(shè)計(jì)( www.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
      				
      
								
			
      
		
      
		
		
	
      


      
    
  
      
    
      日歷
      
    
      
        
      
        
    
      
  
      
    
    
      
      
      鏈接
      
      
        
                
      
    
      
    
      
      
      個(gè)人資料
      
      
    
      
    
      
      
      存檔