很長時間沒有去寫一些簡單的前端JS之類的甚至是基礎(chǔ)的SQL部分，這次找工作的時候說實話碰到了很多基礎(chǔ)方面的問題。
這次趁著自己找工作的時間去重新系統(tǒng)化的學(xué)習(xí)Web開發(fā)~
重新擼一遍代碼~(_) 嘻嘻……
這個文集主要是一些Web開發(fā)向的筆記和學(xué)習(xí)記錄，一些庫和工具框架的學(xué)習(xí)。
大部分都是入門級的。
文集地址
Sass學(xué)習(xí)的第二部分(同樣也是imooc上的第二部分)捆昏，如果想看第一部分，可以翻看我的文集陶衅。
這部分主要是一些常用函數(shù)和流程控制語句屡立。
邏輯與流程控制語句
-
@if:
-
@if語句用于條件判斷。還可以配合@else和@else if進行條件判斷 - 配合函數(shù)式的參數(shù)進行
true||false的判斷。
-
@for：
- 循環(huán)語句膨俐，構(gòu)建類似于
col1-col12這樣的柵格系統(tǒng)非常方便勇皇。 -
@for through不包含最終的數(shù)，但是@for to包含區(qū)間數(shù)焚刺。
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}
-
@while:
-
@while循環(huán)模式敛摘，當(dāng)條件為true時，一直進行循環(huán)
@each
- @each 循環(huán)就是去遍歷一個列表乳愉，然后從列表中取出對應(yīng)的值
-
$list: adam john wynn mason kuroir;//$list 就是一個列表=>@each $var in <list>
@規(guī)則
@import
- 它能夠引入 SCSS 和 Sass 文件
- @import 根據(jù)文件名引入兄淫。 默認(rèn)情況下，它會尋找 Sass 文件并直接引入蔓姚， 但是捕虽，在少數(shù)幾種情況下，它會被編譯成 CSS 的 @import 規(guī)則：
- 如果文件的擴展名是 .css坡脐。
- 如果文件名以 http:// 開頭泄私。
- 如果文件名是 url()。
- 如果 @import 包含了任何媒體查詢（media queries）备闲。
@media
-
min-width等不同的設(shè)備上的不同CSS晌端，坐適配。 - 同樣對應(yīng)CSS的使用方式
@extend
-
@extend是用來擴展選擇器或占位符 -
@extend不止擴展類選擇器恬砂，還可以擴展任何選擇器
@at-root
- 就是跳出根元素咧纠，對于某些元素需要跳出其上層元素時使用此標(biāo)簽。
@debug
-
@debug在 Sass 中是用來調(diào)試的泻骤，當(dāng)你的在 Sass 的源碼中使用了 @debug 指令之后漆羔，Sass 代碼在編譯出錯時，在命令終端會輸出你設(shè)置的提示 Bug:
@warn狱掂、@error
-
@warn和@error,@debug功能類似钧椰，用來幫助我們更好的調(diào)試 Sass
常用函數(shù)
字符串
-
unquote($string)：刪除字符串中的引號，不能刪除文字中的引號符欠； -
quote($string)：給字符串添加引號，自身帶有引號會統(tǒng)一換成雙引號瓶埋。 -
To-upper-case($string)函數(shù)將字符串小寫字母轉(zhuǎn)換成大寫字母希柿。 -
To-lower-case($string)將字符串轉(zhuǎn)換成小寫字母。
數(shù)字
-
percentage($value)將一個不帶單位的數(shù)轉(zhuǎn)換成百分比值养筒。 -
round($value)將數(shù)值四舍五入曾撤，轉(zhuǎn)換成一個最接近的整數(shù)。 -
ceil($value)將大于自己的小數(shù)轉(zhuǎn)換成下一位整數(shù)晕粪。 -
floor($value)將一個數(shù)去除他的小數(shù)部分挤悉。 -
abs($value)返回一個數(shù)的絕對值。 -
min($numbers…)找出幾個數(shù)值之間的最小值巫湘。 -
max($numbers…)找出幾個數(shù)值之間的最大值装悲。 -
random()獲取隨機數(shù)昏鹃。
列表
-
length($list)返回一個列表的長度值。 -
nth($list, $n)返回一個列表中指定的某個標(biāo)簽值诀诊。 -
join($list1, $list2, [$separator])將兩個列給連接在一起洞渤，變成一個列表。 -
append($list1, $val, [$separator])將某個值放在列表的最后属瓣。 -
zip($lists…)將幾個列表結(jié)合成一個多維的列表载迄。 -
index($list, $value)返回一個值在列表中的位置值。
內(nèi)省函數(shù)
-
type-of($value)返回一個值的類型
- number 為數(shù)值型
- string 為字符串型
- bool 為布爾型
- color 為顏色型
-
unit($number)返回一個值的單位抡蛙，碰到了復(fù)雜的運算护昧，如果是* or /會返回一個“多單位的組合”，但是對于加減則會報錯（除 px 與 cm粗截、mm 運算之外）惋耙。 -
unitless($number)判斷一個值是否帶有單位，返回值為bool -
comparable($number-1, $number-2)判斷兩個值是否可以做加慈格、減和合并怠晴，返回一個bool
三元函數(shù)
if($condition,$if-true,$if-false)函數(shù)即當(dāng)$condition成立時，返回值為第二個參數(shù)浴捆，為false時返回第三個參數(shù)
Map函數(shù)
//基本的$map 寫法
$map: (
key1: value1,
key2: (
key-1: value-1,
key-2: value-2,
),
key3: value3
);
1.map-get($map,$key)根據(jù)給定的 key 值蒜田，返回 map 中相關(guān)的值，相當(dāng)于map中取值选泻。
2.map-merge($map1,$map2)將兩個 map 合并成一個新的 map冲粤。
3.map-remove($map,$key)從 map 中刪除一個 key，返回一個新 map页眯。
4.map-keys($map)返回 map 中所有的 key梯捕。
5.map-values($map)返回 map 中所有的 value。
6.map-has-key($map,$key)根據(jù)給定的 key 值判斷 map 是否有對應(yīng)的 value 值窝撵，如果有返回 true傀顾，否則返回 false。
7.keywords($args)返回一個函數(shù)的參數(shù)碌奉，這個參數(shù)可以動態(tài)的設(shè)置 key 和 value短曾。
顏色函數(shù)
-
rgb($red,$green,$blue)，根據(jù)紅赐劣、綠嫉拐、藍三個值創(chuàng)建一個顏色 -
rgba($red,$green,$blue,$alpha)根據(jù)紅、綠魁兼、藍和透明度值創(chuàng)建一個顏色 -
red($color)從一個顏色中獲取其中紅色值婉徘； -
green($color)從一個顏色中獲取其中綠色值； -
blue($color)從一個顏色中獲取其中藍色值； -
mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起盖呼。
HSL儒鹿、Opacity函數(shù):
HSL
-
hsl($hue,$saturation,$lightness)通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個顏色塌计；
2.hsla($hue,$saturation,$lightness,$alpha)通過色相（hue）挺身、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個顏色 -
hue($color)從一個顏色中獲取色相（hue）值锌仅； -
saturation($color)從一個顏色中獲取飽和度（saturation）值章钾； -
lighten($color,$amount)通過改變顏色的亮度值，讓顏色變亮热芹，創(chuàng)建一個新的顏色 -
darken($color,$amount)通過改變顏色的亮度值贱傀，讓顏色變暗，創(chuàng)建一個新的顏色伊脓； -
saturate($color,$amount)通過改變顏色的飽和度值府寒，讓顏色更飽和，從而創(chuàng)建一個新的顏色 -
desaturate($color,$amount)通過改變顏色的飽和度值报腔，讓顏色更少的飽和株搔，從而創(chuàng)建出一個新的顏色； -
grayscale($color)將一個顏色變成灰色纯蛾，相當(dāng)于desaturate($color,100%); -
complement($color)返回一個補充色纤房，相當(dāng)于adjust-hue($color,180deg); -
invert($color)反回一個反相色，紅翻诉、綠炮姨、藍色值倒過來，而透明度不變碰煌。
Opacity
1.alpha($color) /opacity($color)獲取顏色透明度值舒岸；
-
rgba($color, $alpha)改變顏色的透明度值；
3.opacify($color, $amount) / fade-in($color, $amount)使顏色更不透明芦圾； -
transparentize($color, $amount) / fade-out($color, $amount)使顏色更加透明蛾派。
