2018-03-04

SASS学习进阶

sass学习进阶

@if语句

@if是一个SassScript，它可以根据条件来处理样式快，如果条件为true则返回一个样式块，反之false返回另一个样式块。在sass中除了@if单独使用以外，还可以配合@else if 和@else 一起使用。

@mixin blockOrHidden($boolean: true){
@if $boolean{
@debug "$boolean is #{$boolean}";  //@debug指令用于调试
display: block;
}
@else {
@debug "$boolean is #{$boolean}";  //@debug指令用于调试
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden {
@include blockOrHidden(false);
}

编译出的css为

.block {
display: block;
}
.hidden {
display: none;
}

for循环

在制作网格系统的时候，我们都需要使用到.col1~.col12这样的类名，在css中需要一个个去写，但是在sass 中可以很容易地使用@for循环来完成。
for循环有两种实现方式

@for $i from <start> through <end>
//$i表示变量 start表示起始值 end表示结束值
@for $i form <start> to <end>
//二者区别是，关键字through表示包括end这个数，而to表示不包括end这个数

@for循环在网格系统生成每个格子的class代码

$grid-prefix: span;
$grid-width: 60px;
$grid-gutter: 20px;
%grid {
float: left;
margin-left: $grid-gutter /2;
margin-right: $grid-gutter /2;
}
@for $i form 1 through 12 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}

编译出的css为

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
float: left;
margin-left: 10px;
margin-right: 10px;
}

.span1 {
width: 60px;
}

.span2 {
width: 140px;
}

.span3 {
width: 220px;
}

.span4 {
width: 300px;
}

.span5 {
width: 380px;
}

.span6 {
width: 460px;
}

.span7 {
width: 540px;
}

.span8 {
width: 620px;
}

.span9 {
width: 700px;
}

.span10 {
width: 780px;
}

.span11 {
width: 860px;
}

.span12 {
width: 940px;
}

将上面的实例做一些修改，将@for through方式换成@for to：：

@for $i from 1 to 13 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}

@while循环

@while指令也需要SassScript表达式，并且会生成不同的代码块，直到表达式值为false时停止循环。

$types: 4;
$type-width: 20px;
@while $types > 0{      //等价于while( types = 4 , types > 0);
.while-#{$types}{   //等价于.while-types{
width: $types-width + $types; //等价于width： 20px - types；
}
$types: $types - 1;  //等价于  4--；
}

@each循环

@each循环就是去遍历一个列表，然后从列表中取出对应的值。
@each命令的形式：

1	@each $var in <list>

$var 是一个变量名，list是一个列表，用于进行引用。

$list: adam john wynn mason kuroir; //列出列表，供下面进行引用
@mixin author-images {
@each $author in $list {
.photo-#{$author}{
background: url("images/avatars/#{$author}.png") no-repeat;
}
}
}
.author-bio {
@include author-images;
}
//编译出的css为
.author-bio .photo-adam {
background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
background: url("/images/avatars/kuroir.png") no-repeat; }

sass函数

字符串函数

sass的字符串函数主要包括两个

unquote($string);
//删除字符串中的引号，如果字符串中没有引号，将返回原始字符串。注：unquote()函数只能删除字符串最前和最后的引号，无法删除字符串中间的引号。
quote($string);
//给字符串添加引号，如果字符串中间有引号或空格时，需要用单引号或者双引号括起，否则编译时会报错。

字符串函数To-upper-case()和To-lower-case()

1 2	To-upper-case():将字符串的小写字母转换成大写字母 To-lower-case():将字符串的啊写字母转换成小写字母

数字函数

percentage($value)：将一个不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数； 0.4999视为0
ceil($value)：将大于自己的小数转换成下一位整数；  0.0001视为1
floor($value)：将一个数去除他的小数部分；   0.0001视为0
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值；
random(): 获取随机数

列表函数

列表函数主要包括一些对列表参数的函数使用，主要包括以下几种：

length($list)：返回一个列表的长度值； //括号内的值算一个
nth($list, $n)：返回一个列表中指定的某个标签值，$n表示第几个
join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值。以1开始

Introspection函数

Introspection函数包括了几个判断型函数：

type-of($value)：返回一个值的类型
unit($number)：返回一个值的单位
unitless($number)：判断一个值是否带有单位
comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并

sass Maps函数

借助于map功能，为同一量下，多个有名字的变量进行处理。

map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
map-keys($map)：返回 map 中所有的 key。
map-values($map)：返回 map 中所有的 value。
map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

sass的@规则

sass支持所有css3的@规则，以及一些sass专属的规则，也被成为指令。这些规则在sass 中具有不同的功效。

@import规则

sass扩展了css的@import规则，使其能够引入scss和sass文件。所有引入的scss文件和sass文件都会被合并输出一个单一的css文件。被导入的文件中所定义的变量或mixins都可以在主文件中使用。
sass会在当前目录下寻找其他sass文件，也可以通过:load_paths选项或在命令行中使用–load-path 选项来制定额外的搜索目录。
@import根据文件名引入。默认情况下，它会寻找sass文件并直接引入，但是在少数几种情况下，它会被编译成css的@import规则：

如果文件的扩展名是 .css。
如果文件名以 http:// 开头。
如果文件名是 url()。
如果 @import 包含了任何媒体查询（media queries）。

如果上述情况都没有出现，且扩展名是.sass或者是.scss，则该名称的sass
或scss文件就会被引入。

@media规则

sass中的@media规则和css中的使用规则类似，但它有另外一个功能，可以嵌套在css规则中。有点类似于JS中的冒泡功能一样。如果使用@media指令，他将冒泡到外面。

.sidebar {
width: 300px;
@media screen and (orientation: landscape){
width: 500px;
}
}
//编译结果
.sidebar {
width: 300px;
@media screen and (orientation: landscape){
.sidebar{
width: 500px;
}
}
}

@extend规则

sass中的@extend是用来扩展选择器或占位符（类似于继承）

@at-root规则

@at-root规则从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用@at-root。

.a {
color: red;
.b {
color: orange;
.c {
color:yellow;
@at-root .d {
color: green;
}
}
}
}
//编译之后
.a {
color: red;
}
.a .b{
color: orange;
}
.a .b .c {
color:yellow;
}
.d {
color: green;
}

@debug规则

@debug在sass中是用来调试的，当你在sass的源码中使用了@debug规则之后，sass代码在编译出错时，在命令终端会输出你设置的提示bug：

1
2
3

@debug 10em + 12em;
//输出内容
Line 1 DEBUG: 22em;

@warn规则

@warn 和@debug 类似，用来帮助我们很好的调试sass。

@error

@error 和@debug、@warn 类似，用来帮助我们很好的调试sass。

本文标题:SASS学习进阶

文章作者:ChangerHe

发布时间:2018-03-04, 19:37:41

原始链接:http://blog.changerhe.cn/2018/03/04/testForMac/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。