sass基础语法之 ----------条件判断及循环

sass基础语法 ----------条件判断及循环

这是我的第一篇博客，把项目中的一些问题，心得，知识点，、、等，会总结一些写上来。

想自学sass的可以点击下面链接哦！
语法学习链接：sass语法
http://sass.bootcss.com/docs/sass-reference/

OK，话不多少，进入主题咯~~~~~~~~~~~~~

@if判断

@if可一个条件单独使用，也可以和@else结合多条件使用
sass代码如下：

$lte7: true;
$type: ocean;
.ib {
display: inline-block;
@if $lte7 {
*display: inline;
*zoom: 1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}

css代码：

.ib {
display: inline-block;
*display: inline;
*zoom: 1; }
p {
color: blue; }

三目判断
语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

sass代码如下：

$lte7: false;
$type: ocean;
$px: if( $lte7, 10px, 20px);
p {
height: $px;
}

css代码：

p {
height: 20px; }

@for循环

for循环有两种形式，分别为：@for $var from through 和 ==@for $varfrom<start>to<end>==。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

sass代码：

@for KaTeX parse error: Expected '}', got '#' at position 30: …gh 3 { .item-#̲{i} {width: 2em * $i;}
}

css代码

.item-1 {
width: 2em; }

.item-2 {
width: 4em; }

.item-3 {
width:6em;}

*注意：运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。*

编写文章后感受：
第一次使用Markdown的编辑器，很多功能还没了解透，以后会越来越熟。