對於 css 來說這門語言就如同是寫給設計者們的。語言本身是不需要編譯的。而且寫起來簡單明瞭，但是對於程式設計師來說沒有一種程式設計的感覺。對於一些重複冗餘的**，無力提高編寫效率。現在推出了兩個工具 sass 和 less，決定嘗試一下，慢慢的適應用程式設計的方式來寫 css。因此寫了這篇入門的部落格，以便以後忘記了的地方能很快撿起來。
變數
// 普通變數：全域性使用屬性值
$maincolor: #666666;
$color
: #ff0000;
body
// 預設變數
$color
: #ff0000;
$color
: #000 !default;
// 元件化開發時有用
// 特殊變數：名字屬性或者其他的
$borderdire = top;
.border-# : $color 1px solid;
}// 多值變數
$plist = 5px 10px 15px 20px;
p $hsize = (h1
: 10px, h2: 15px, h3: 20px);
// 全域性變數(將新增)
$color
: #333333;
$color
: #666666 !global;
// 選擇器巢狀
body
}// 等同於
body
.main
// 屬性巢狀
.main
top: }
}// 等同於
.main
// file: _reset.scss
* // file: test.scss
@import
'reset';
body
}//等同於
* body
.main
// 無參
@mixin
center-block
.main
// 有參
@mixin
box-sizing ($sizing)
.box-border
// 多參
@mixin
border-default($borderwidth:1px, $borderstyle:dashed)
divp
// media問題
@mixin
screen-max($res)
}@include
screen-max(600px)
}
$basefontsize: 10px !default;
$greycolor: #cccccc !default;
@functionpxtorem($px)
p
.main
.left
.right
.main
.left
.right
// 雙目判斷
$size = 10;
$color = red;p }
pdiv @else
if $color ==green @else
}// 三目判斷
if(true, 1px, 2px)
// 1px
// 1-10
@for $ifrom
1through
10 :
}// 1-10
@for $ifrom1to
11 :
}
2.安裝 sass
gem install sass# 單檔案編譯
sass test.scss test.css
# 資料夾監聽編譯
sass --watch scssdir:cssdir
# 逆向轉換
sass-convert test.css test.scss
#
開啟除錯
sass--
watch
scssdir:cssdir--
debug
-info
sass--
watch
scssdir:cssdir--
sourcemap
前端工程化初探
前端工程化可以分成四個方面來說，分別為模組化 元件化 規範化和自動化。模組化是指將乙個檔案拆分成多個相互依賴的檔案，最後進行統一的打包和載入，這樣能夠很好的保證高效的多人協作。其中包含 js 模組化 commonjs amd cmd 以及 es6 module。css 模組化 sass less s...
前端工程化
為什麼出現了前端工程化？09年之前，我們學習的css，div，js只是對頁面設計進行乙個打輔助的功能，當時只能勉強的成為頁面設計師，為什麼會出現前端工程師 1.突然間前端的需求逐漸增多，使用者對介面的要求越來越高，前端範疇越來越大。2.前後端總是保持一致才能進行開發，不能分開開發，提出前端工程化，也...
前端工程化
一 什麼是前端工程化 根據業務特點，將前端開發流程規範化 標準化 包括開發流程 技術選型，規範，構建發布等用於提公升前端工程師開發效率和 質量，提高產品的質量。實現前端工程化的目的 就是通過流程規範 自動化工具來提公升前端的開發效率 效能 質量 多人協作能力以及開發體驗。前端工程化體系分為 元件化 ...