Sass语法(三)之循环

左手的ㄟ右手 2021-09-14 04:36 532阅读 0赞

# 一、数据类型 #

## 1.数字 ##

如，1、 2、 13、 10px；

## 2.字符串 ##

有俩种类型：

a.有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；  
b.无引号字符串 (unquoted strings)，如 sans-serifbold。

编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 \#\{ \}插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。

## 3.颜色(blue,\#04a3f9) ##

## 4.布尔型(true,false) ##

## 5.空值：null ##

## 6.值列表 ##

值列表是指用空格或者逗号分隔的一系列的值，如，margin: 10px 15px 0 0或是font-face: Helvetica, Arial, sans-serif

# 二、控制命令 #

## 1. 条件语句-@if ##

@if可以用来判断：

p \{  
    　　　　@if 1 + 1 == 2 \{ border: 1px solid; \}  
    　　　　@if 5 < 3 \{ border: 2px dotted; \}  
    　　\}  
  
配套的还有@else命令：  
  
  
@if lightness($color) > 30% \{  
    　　　　background-color: \#000;  
    　　\} @else \{  
    　　　　background-color: \#fff;  
    　　\}

## 2. 循环语句 ##

### ①for循环 ###

在 Sass 的 @for 循环中有两种方式：

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

#### a. @for $i from <start> through <end> ####

//scss

@for $i from 1 through 3 \{  
  .item-\#\{$i\} \{ width: 2em \* $i; \}  
\}  
  
编译出来的 CSS:  
.item-1 \{  
  width: 2em;  
\}  
.item-2 \{  
  width: 4em;  
\}  
.item-3 \{  
  width: 6em;  
\}

####    b.@for $i from <start> to <end> ####

@for $i from 1 to 3 \{  
  .item-\#\{$i\} \{ width: 2em \* $i; \}  
\}  
编译出来的 CSS:  
.item-1 \{  
  width: 2em;  
\}  
.item-2 \{  
  width: 4em;  
\}

#### c.@for应用在网格系统生成各个格子 class  ####

//SCSS $grid-prefix: span !default; $grid-width: 60px !default; $grid-gutter: 20px !default; %grid { float: left; margin-left: $grid-gutter / 2; margin-right: $grid-gutter / 2; } //through @for $i from 1 through 4 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; } } //to @for $i from 1 to 5 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; } }

编译出来的 CSS: .span1, .span2, .span3, .span4{ float: left; margin-left: 10px; margin-right: 10px; } .span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } .span4 { width: 300px; }

### ②while循环 ###

执行表达式，并且会生成不同的样式块，直到表达式值为 false 时停止循环.  
@while 后面的条件为 true 就会执行.

//SCSS $types: 4; $type-width: 20px; @while $types > 0 { .while-#{$types} { width: $type-width + $types; } $types: $types - 1; }

编译出来的 CSS .while-4 { width: 24px; } .while-3 { width: 23px; } .while-2 { width: 22px; } .while-1 { width: 21px; }

### ③each循环 ###

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。  
@each $var in <list>  
  
$var 就是一个变量名，<list> 是一个 SassScript 表达式，他将返回一个列表值。  
变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。

$list: adam john wynn mason kuroir;//$list 就是一个列表 @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; }