很長時間沒有去寫一些簡單的前端JS之類的甚至是基礎(chǔ)的SQL部分盒件，這次找工作的時候說實(shí)話碰到了很多基礎(chǔ)方面的問題髓堪。
這次趁著自己找工作的時間去重新系統(tǒng)化的學(xué)習(xí)Web開發(fā)~
重新擼一遍代碼~(_) 嘻嘻……
這個文集主要是一些Web開發(fā)向的筆記和學(xué)習(xí)記錄匪傍，一些庫和工具框架的學(xué)習(xí)坛芽。
大部分都是入門級的掉缺。
文集地址
Sass學(xué)習(xí)的第一部分(同樣也是imooc上的第一部分)誉结，如果想看第二部分炼鞠，可以翻看我的文集缘滥。
這部分主要是一些常用函數(shù)和流程控制語句。
為什么使用Sass谒主？
- 可以使得整個項目的CSS的維護(hù)和修改變得容易且風(fēng)格統(tǒng)一（使用變量來進(jìn)行前端的賦值）
- 減少了多余的CSS的寫法朝扼，提高整體的開發(fā)效率
- 增加了語句的嵌套
- SCSS 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是一模一樣霎肯，代碼都包裹在一對大括號里擎颖，并且末尾結(jié)束處都有一個分號。其文件名格式常常以“.scss”為擴(kuò)展名观游。
Sass的基本原理:
- 將
.scss編譯成CSS文件進(jìn)行加載
Sass的安裝：
- ruby環(huán)境
- 使用ruby包管理
gem install sass安裝成功
3.（有可能碰見鏡像問題）
SCSS語法格式：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
---
- ```
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
SCSS文件編譯過程：
- 單文件編譯：
sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
- 多文件批量編譯：
sass sass/:css/
- 常用參數(shù)：
-
--watch自動檢測代碼搂捧，自動重新編譯
- 幾種常見的輸出方式：
- 嵌套輸出方式
-- style nested - **展開輸出方式
-- style expanded** - **緊湊輸出方式
-- style compact** - 壓縮輸出方式
-- style compressed
這幾種不同的輸出方式可以讓有不同習(xí)慣的程序員可以用起來更爽~
Sass的常用知識：
變量：
- 普通變量：
- `$temp: value;`
- 可以在全局范圍內(nèi)使用（存在作用域）
- 默認(rèn)變量：
- `$temp: value ！default;`
- 在值的后邊加上`懂缕！default`只要在**使用**它之前存在一個變量的賦值即不會使用這個變量的默認(rèn)值允跑。
- Sass提供了嵌套功能：
- Sass 中還提供了選擇器嵌套功能
- 但是對于選擇器的嵌套一般不要多層嵌套\
- 提供屬性的嵌套：
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
對于上面的代碼，可以使用下面這種寫法來代替：
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
- 偽類嵌套：
使用&符號配合使用：.clearfix{&:before}=>clearfix:before
宏：
- 聲明混合宏：
- `@mixin` 是用來聲明混合宏的關(guān)鍵詞提佣，有點(diǎn)類似 CSS 中的 `@media`吮蛹、`@font-face` 一樣，但是它可以進(jìn)行傳參拌屏，通過函數(shù)化得調(diào)用潮针，設(shè)置宏中的樣式不同。實(shí)現(xiàn)復(fù)用倚喂。
- `@include`用于調(diào)用宏
- 繼承和擴(kuò)展
- 在 Sass 中是通過關(guān)鍵詞 “@extend”來繼承已存在的類樣式塊每篷，從而實(shí)現(xiàn)代碼的繼承。
- 占位符 %placeholder 功能是一個很強(qiáng)大端圈，很實(shí)用的一個功能焦读。因?yàn)?%placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話舱权，不會產(chǎn)生任何代碼
注釋：
- CSS注釋方式：使用 ”/* ”開頭矗晃，結(jié)尾使用 ”*/ ”會保存在
CSS中 - JS的注釋方式：使用“//”，這種注釋方式是不會被編譯出來的
數(shù)據(jù)類型：
- 數(shù)字
- 字符串（有引號或者是無引號字符串）
- 顏色（
blue,#000000,rgba(255,255,255,0)） - 布爾：true宴倍，false
- 空值：null
- 值列表：
- nth函數(shù)（nth function） 可以直接訪問值列表中的某一項张症；
- join函數(shù)（join function） 可以將多個值列表連結(jié)在一起仓技；
- append函數(shù)（append function） 可以在值列表中添加值；
- @each規(guī)則（@each rule） 則能夠給值列表中的每個項目添加樣式俗他。
對于CSS 四則運(yùn)算：
- 對于基本的CSS運(yùn)算系統(tǒng)會根據(jù)單位進(jìn)行自動轉(zhuǎn)換脖捻。
- 但是對于乘除法不同的單位會報
xxxx isn't a valid CSS value.錯誤 - 除法操作時需要將width: 100px/2=>
width: (100px / 2);第一種寫法不會出現(xiàn)錯誤，但是也不會出現(xiàn)你想要的效果兆衅。 - 顏色運(yùn)算地沮，會自動的進(jìn)行RGB和Alpha各個通道的自動加和。
color: #010203 + #040506; - 字符串的加和羡亩，對于存在
“”的加和摩疑，會自動的加上“”
初級篇結(jié)束啦啦啦
