很长时间没有去写一些简单的前端JS之类的甚至是基础的SQL部分，这次找工作的时候说实话碰到了很多基础方面的问题。
这次趁着自己找工作的时间去重新系统化的学习Web开发~
重新撸一遍代码~(_) 嘻嘻……
这个文集主要是一些Web开发向的笔记和学习记录，一些库和工具框架的学习。
大部分都是入门级的。
文集地址
Sass学习的第二部分(同样也是imooc上的第二部分)，如果想看第一部分，可以翻看我的文集。
这部分主要是一些常用函数和流程控制语句。
逻辑与流程控制语句
-
@if:
-
@if语句用于条件判断。还可以配合@else和@else if进行条件判断 - 配合函数式的参数进行
true||false的判断。
-
@for：
- 循环语句，构建类似于
col1-col12这样的栅格系统非常方便。 -
@for through不包含最终的数，但是@for to包含区间数。
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}
-
@while:
-
@while循环模式，当条件为true时，一直进行循环
@each
- @each 循环就是去遍历一个列表，然后从列表中取出对应的值
-
$list: adam john wynn mason kuroir;//$list 就是一个列表=>@each $var in <list>
@规则
@import
- 它能够引入 SCSS 和 Sass 文件
- @import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：
- 如果文件的扩展名是 .css。
- 如果文件名以 http:// 开头。
- 如果文件名是 url()。
- 如果 @import 包含了任何媒体查询（media queries）。
@media
-
min-width等不同的设备上的不同CSS，坐适配。 - 同样对应CSS的使用方式
@extend
-
@extend是用来扩展选择器或占位符 -
@extend不止扩展类选择器，还可以扩展任何选择器
@at-root
- 就是跳出根元素，对于某些元素需要跳出其上层元素时使用此标签。
@debug
-
@debug在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:
@warn、@error
-
@warn和@error,@debug功能类似，用来帮助我们更好的调试 Sass
常用函数
字符串
-
unquote($string)：删除字符串中的引号，不能删除文字中的引号； -
quote($string)：给字符串添加引号，自身带有引号会统一换成双引号。 -
To-upper-case($string)函数将字符串小写字母转换成大写字母。 -
To-lower-case($string)将字符串转换成小写字母。
数字
-
percentage($value)将一个不带单位的数转换成百分比值。 -
round($value)将数值四舍五入，转换成一个最接近的整数。 -
ceil($value)将大于自己的小数转换成下一位整数。 -
floor($value)将一个数去除他的小数部分。 -
abs($value)返回一个数的绝对值。 -
min($numbers…)找出几个数值之间的最小值。 -
max($numbers…)找出几个数值之间的最大值。 -
random()获取随机数。
列表
-
length($list)返回一个列表的长度值。 -
nth($list, $n)返回一个列表中指定的某个标签值。 -
join($list1, $list2, [$separator])将两个列给连接在一起，变成一个列表。 -
append($list1, $val, [$separator])将某个值放在列表的最后。 -
zip($lists…)将几个列表结合成一个多维的列表。 -
index($list, $value)返回一个值在列表中的位置值。
内省函数
-
type-of($value)返回一个值的类型
- number 为数值型
- string 为字符串型
- bool 为布尔型
- color 为颜色型
-
unit($number)返回一个值的单位，碰到了复杂的运算，如果是* or /会返回一个“多单位的组合”，但是对于加减则会报错（除 px 与 cm、mm 运算之外）。 -
unitless($number)判断一个值是否带有单位，返回值为bool -
comparable($number-1, $number-2)判断两个值是否可以做加、减和合并，返回一个bool
三元函数
if($condition,$if-true,$if-false)函数即当$condition成立时，返回值为第二个参数，为false时返回第三个参数
Map函数
//基本的$map 写法
$map: (
key1: value1,
key2: (
key-1: value-1,
key-2: value-2,
),
key3: value3
);
1.map-get($map,$key)根据给定的 key 值，返回 map 中相关的值，相当于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)根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
7.keywords($args)返回一个函数的参数，这个参数可以动态的设置 key 和 value。
颜色函数
-
rgb($red,$green,$blue)，根据红、绿、蓝三个值创建一个颜色 -
rgba($red,$green,$blue,$alpha)根据红、绿、蓝和透明度值创建一个颜色 -
red($color)从一个颜色中获取其中红色值； -
green($color)从一个颜色中获取其中绿色值； -
blue($color)从一个颜色中获取其中蓝色值； -
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
HSL、Opacity函数:
HSL
-
hsl($hue,$saturation,$lightness)通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
2.hsla($hue,$saturation,$lightness,$alpha)通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色 -
hue($color)从一个颜色中获取色相（hue）值； -
saturation($color)从一个颜色中获取饱和度（saturation）值； -
lighten($color,$amount)通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色 -
darken($color,$amount)通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色； -
saturate($color,$amount)通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色 -
desaturate($color,$amount)通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色； -
grayscale($color)将一个颜色变成灰色，相当于desaturate($color,100%); -
complement($color)返回一个补充色，相当于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)使颜色更加透明。
网友评论