Chrome Canary浏览器网页调试sass配置

1.输入chrome://flags/ 开启开发者工具实验性功能,之后重启浏览器

2.打开开发者工具,网页右击,选择检查(ctrl+shift+I)

3.设置开发者工具:

选中:

4.在开发者工具打开下,选择有id或class的标签

选择对应scss文件直接可以调试编辑

5.这时无法修改和保存scss文件需要设置工作目录:

右击souress下空白,选择:

允许:

这时会多出一个文件夹:

这时网页文件和文件目录没有联系,需要关联两种方法:

1.网络关联本地

然后选中对应文件,这时网络文件消失可以直接编辑本地:

 

 

 

sass 常用规则(指令)

1.@import 文件引入

可以引入sass或scss文件,被引入文件中定义的变量或mixins都可以在主文件中使用,默认引用当前目录,也可以同时引入多个文件,如果被引入文件没有扩展名,会自动加上扩展名搜寻当前目录。

编译为:

如果一个文件需要被引入,但又不希望其被编译为css文件,可以在文件名前加_,如_test.scss,这样被引入后,_test.scss文件内容就不会被编译为test.css文件。同一目录下不允许出现同一个带有_同名文件。

编译为:

@import一般在顶层,但是其允许被嵌套。

编译为:

2.@media 指定样式表规则用于指定的媒体类型和查询条件,允许嵌套,可以使用#{变量名}来指定设备类型和条件

@media 设备类型 and (查询条件)

编译为:

嵌套:

编译为:

3.extend 用来扩展选择器或占位符,可以减少输入代码量。可以同时继承多个样式

编译后:

占位符:

不调用:

如果不使用extend编译后,不产生代码

调用:

编译后:

4.@at-root 跳出根元素,不被父元素包含

编译后:

5.@debug 用来做调试,如果编译出错,在命令终端会输出设置的提示信息,编译时产生

6.@warn 警告信息 编译时产生

@warn “警告信息”;

7.@error 错误信息;编译时产生,测试成功

@error “错误信息”

编译为:

 

sass 颜色函数

在sass终端下使用以下命令可以进入函数计算模式:

sass -i

RGB颜色由红,绿,蓝 三色构成

一.RGB颜色函数

1.rgb() 返回一个16进制颜色数值

直接输入rgb(200,40,88),返回16位颜色数值

 

2.red() 获取一个颜色中的红色值

3.green() 获取一个颜色中的绿色值

4.blue() 获取一个颜色中的蓝色值

5.mix() 将两种颜色根据一定的比例混合在一起,返回一个新颜色

mix($color1,$color2,$weight)

$color1和$color2是需要合并的颜色,可以bc

$weight 是合并比例,取值为0-1之间的小数,默认是50%,为两种颜色各占一半,如果是20%,第一种颜色为20%,第二种颜色为80%

编译为:

二.HSL颜色函数

1.lighten()和darken() 改变颜色的亮度值,当颜色的亮度值接近或大于 100%,颜色会变成白色;反之颜色的亮度值接近或小于 0 时,颜色会变成黑色。

lighten($color,亮度值)

变亮,亮度值为0-1的小数

darken($color,亮度值)

变暗,亮度值为0-1的小数

编译为:

2.saturate()和desaturate()改变颜色的饱和度,返回一个新颜色

saturate($color,饱和度)

增加饱和度

desaturate($color,饱和度)

减少饱和度

编译后

3.abjust-hue()调整颜色的色相,返回一个新颜色

abjust-hue($color,色相度)

色相度是:-360deg到360deg之间,当超过360时,取数值-360,当小于-360时,取+360的值

编译后:

4.grayscale()将颜色的饱和度调为0 于函数desaturate($color,100%)功能相同,一般这个函数用来把彩色转为不同程序的灰色。

grayscale($color)

 

三.透明度函数:

1.opacity()和alpha() 获取颜色透明度值,如果没有指定透明度,一般都为1

opacity($color)

alpha($color)

编译为:

2.rgba()将一个颜色根据透明度转换成rgba颜色。主要用来设置透明度

rgba(color,透明度)

color是一个颜色值

透明度是0到1的小数

编译为:

3.opacify()和fade-in()函数(同fade_in()),对透明度做加法运算,返回一个新颜色,更加不透明

opacify($color,参数2)

fade-in($color,参数2)

参数2取0-1的数,当透明度大于1时完全不透明

编译为:

4.transparentize()和fade-out() 让透明度相减,更家透明,返回一个新颜色

transparentize($color,参数2)

fade-out($color,参数2)

编译为:

 

sass Map 数据地图

sass map 是一个数据集合,常用来批量管理变量

$地图名:(键名1:键值,键名2:键值2,键名3:键值3….)

map常用函数:

(1)map-get() 函数 返回指定键值

map-get($map,$key)

$map是地图名

$key是键名

如果$key不存在于map,那么返回值为空

编译为:

(2)map-has-key()判断一个key是否存在于map中

map-has-key($map,key)

如果存在,返回true,如果不存在返回false.

编译为:

也可放要条件判断中:

编译为:

也可以用在自定义函数中:

编译为:

(3)map-keys() 返回列表中所有的key,值为列表

map-keys($map)

编译为:

可以通过此命令遍历出map中所有的值:

编译为:

(4)map-values()返回所有值,值为列表。

map-values($map)

编译为:

(5)map-merge()合并两个map,值为map

map-merge($map1,$map2)

编译为:

(6)map-remove() 删除map中的一个key,得到一个新map,不能删除map中的map,只能删除一个key,如果被删除的key不存在于map中,那么返回一个相同的map

 

编译为:

(7)keywords($args) 动态创建map,待补充

 

 

 

 

 

 

 

 

sass 列表函数:

1.length()返回列表项的个数。如果在参数中直接写入列表项,需要使用空格分隔,不能使用逗号。

编译为:

2.nth() 指定列表中的某个值

nth($list,$n)

$list:列表名

$n:位置,从1开始,必须是大于0的整数

编译为:

3.join() 将两个列表合并,每次只能合并两个,如果有多于三个列表合并需要使用多次join()

join($list1,$list2,参数3)

join((1,2,3),(a,b,c),参数3);

参数3指定列表项的分隔符,默认为auto,逗号为comma,空格为space.

当参数3为自动时:以列表1的分隔符来决定输出列表的分隔符,建议每次都指定

$list1 为逗号分隔,那么输出结果也是逗号分隔,

$list1 为空格分隔,那么输出结果也是空格分隔,

编译为:

4.append() 将一个列表值插入列表结尾

append($list1,$list2,参数三)

$list1,前面的列表

$list2,后面的列表

参数三,为分隔符,默认为auto,可以设置为comma逗号,space空格

编译后:

5.zip() 将多个列表组成一个多维列表,类似数组

编译为:

6.index()索引函数

index($list,值),返回值所在的$list中的位置,从1开始,如果没有返回false

编译为:

7,introspection 自查函数

(1)type-of() 判断一个值是什么类型

返回值:

number 为数值型,可以带单位

string 为字符串型,两边用引号

bool为布尔型,true或false

color为颜色型,#000,red,rgb(0,0,0)等

编译为:

(2)unit() 获取一个值的单位,

如果值是表达式有多个单位,乘除单位可以不同,加减单位必须相同

当除两个单位相同时,返回空

编译为:

(3)unitless() 判断一个值有没有单位,如果没有返回true,如果有false

编译为:

实际中可以判断值有没有单位,如果没有自动给其加上

编译为:

(4)comparable() 判断两个数是否可以进行加 减 或 合并。

可以返回true.不可以返回false

编译为:

(5)三元函数

if($条件,$值1,$值2 )

当条件为真时,值为1

当条件为假时,值为2

编译为:

 

 

 

 

sass 数字函数应用

1.percentage() 将一个数字转换为百分比,单位必须相同

编译为:

2.round() 四余五入为最近整数

编译后:

3.ceil() 将一个数转换为最接近的数,只做入,不做舍

编译后:

4.floor() 将一个数转换为最接近的数,只做舍,不做入,和ceil相反

编译为:

5.abs() 返回一个数的相对值,可以带单位

编译为:

6.取最大值和最小值

min() 在多个数中找到最小的一个,可设置任意多个参数,如果有单位,单位必须相同

编译为:

max()在多个数中找最大值,可设置任意多个参数,如果有单位,单位必须相同

编译为:

7.random()取一个小于1的随机数

编译为:

 

sass 字符串函数应用

1.字串函数:

(1)unquote 函数

unquote($string) 删除字符串两边的单引号,双引号,不能删除中间引号,不能删除单边引号。

编译后:

 

quote($string) 给字符串两边添加双引号,字符串中间不能有空格,不能有单引号或双引号,如果字符串两边已经有单引号会被自动换为双引号,!、?、> 等,除中折号 – 和 下划线_ 都需要使用双引号括起

编译后:

(2)字符串大小写转换函数:

to-upper-case() 将小写转换成大写

编译后:

to-lower-case() 大写转小写

编译后:

 

 

 

sass 中的控制命令:

1.条件语句:@if

@if 条件为真时执行代码块,可以配合@else if 和 @else来用

编译后:

2.循环语句:

(1)@for

@for $i from <start> through <end>

@for $i from <start> to <end>

$i是变量

start:起始

end:结束

through包含end数, to 不包含end这个数

编译为:执行了三次

编译为:执行了两次

做网格案例:

编译为:

(2)@while

@whie 条件{内容 条件变化}

编译为:

(3)@each 循环

@each $var in <list>

$var 列表中对应值

list 列表名

编译为:

sass 中的运算

1.加法:

px可以和in,cm,mm相加,不能和em相加

编译后:

2.减法

px可以和in,cm,mm相减,不能和em相减

编译后:

3.乘法

被乘数和乘数不能同时都带单位,只能有一个带单位或都不带单位

编译后:

4.除法

在单表达式的两边需要加括号

在多运算符表达式中不需要加括号

当在表达式中有变量或函数时,也不需要加括号

当两个数都带单位时,当得一个无单位数

编译后:

多运算符:

编译后:

 

5.变量参于运算

编译:

6.数字运算:

加 减 乘 除 也可以使用括号提高优先集

编译后:

7.颜色运算:

可以颜色之前运算,也可以和数字一起运算,采用分段运算

编译后:

8.字符运算:

使用+号可以链接两个字符串,

编译为: