追求卓越一諾千金

藍藍設計_|-雳剑电视剧,2011年成立---亿贝平台横屏登录地址,主創清華團隊_-_脉搏士,專注軟件和互聯網ui設計開發-淘宝开店费用。擅長企業信息化管理-qq空间克隆6 0、監控-|订舱代理、大數據軟件UIUE谘詢和設計開發服務-_-魏征进谏图的作者。立足UI-_德甲球队队徽,好好學習||冯提莫被清晨潜了,天天進步_|爱唯侦察!


Sass開發注意點

2019-8-26 釋然 前端及開發文章及欣賞


避免選擇器嵌套|--无氨显影液:
選擇器嵌套最大的問題是將使最終的代碼難以閱讀||漯河军嫂被拘留。開發者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現效果__105彩票是正规平台吗。
選擇器越具體則聲明語句越冗長_河南省焊工证查询,而且對最近選擇器的引用(&)也越頻繁_|-青银高速地图。在某些時候意彩会员注册,出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高_盐城地税网上申报,這非常不值得-||长春高新交警大队。

混合宏
在 Sass 中通過 @mixin 關鍵詞聲明了一個混合宏|--德国球员,那麼在實際調用中_騒麦歌词,其匹配了一個關鍵詞“@include”來調用聲明好的混合宏-|永宁县政府公众网。

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

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}

繼承 @extend
在 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 中的占位符 %placeholder 功能是一個很強大-郎酒股票代码,很實用的一個功能--功夫2百度影音,這也是我非常喜歡的功能|-|小狼狗高手论坛。他可以取代以前 CSS 中的基類造成的代碼冗餘的情形|_-优衣库视频bt种子。因為 %placeholder 聲明的代碼|-消防概念股,如果不被 @extend 調用的話--|野火烧不尽打一字,不會產生任何代碼-_|KINGXCON。

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

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

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

編譯後(代碼相同的會自動整合)

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

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


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-|22选5河南最新开奖公告,為期望卓越的國內外企業提供卓越的UI界麵設計金惠明、BS界麵設計 _|镭波吧、 cs界麵設計 ||-定陶教育网、 ipad界麵設計 __易旺彩票网下载、 包裝設計 |张家界工商局长、 圖標定製 |-_温汤散、 用戶體驗 -_滤菌器、交互設計|圈内老鬼、 網站建設 -_钻石夜总会主持人、平麵設計服務__甄情达。
標簽: Sass開發注意點 « 全方位揭秘有讚的產品設計原則 | 關於Vue中的slot的理解»


訂閱Rss