Sass學習（四）--高級語法

目錄

• 條件語句
• 循環語句

條件語句

語法格式

@if (條件){
   //語句體
}
@else if(){
   //語句體
}
@else{
}

運算符
not:取反
&&/and:且
or:或
條件語句

p{
	@if(true){
	    border:1px solid red
    }
    @else{
        border:1px solid blue
    }

}
//編譯後
#main {
  border: 1px solid red; }

循環語句

for循環
語法格式

@for  $i from start end{
    //....
    //引用索引 #{i}
    
}

@for $i from 1 to 10{
    .border-#{$i}{
        border:#{$i}px solid red
	}
}
//編譯後
.border-1 {
  border: 1px solid red; }

.border-2 {
  border: 2px solid red; }

.border-3 {
  border: 3px solid red; }

.border-4 {
  border: 4px solid red; }

.border-5 {
  border: 5px solid red; }

.border-6 {
  border: 6px solid red; }

.border-7 {
  border: 7px solid red; }

.border-8 {
  border: 8px solid red; }

.border-9 {
  border: 9px solid red; }

while循環

$i:6;
@while ($i>0){
	border-#{$i}{border:#{$i}px solid red}
	$i:$i - 1;

}
//編譯後
border-6 {
  border: 6px solid red; }

border-5 {
  border: 5px solid red; }

border-4 {
  border: 4px solid red; }

border-3 {
  border: 3px solid red; }

border-2 {
  border: 2px solid red; }

border-1 {
  border: 1px solid red; }

each
each接收一個列表

@each $num in [1,2,3,4,5,6]{
	border-#{$num}{
	border:#{$num}px solid red
	}
}
//編譯後
border-1 {
  border: 1px solid red; }

border-2 {
  border: 2px solid red; }

border-3 {
  border: 3px solid red; }

border-4 {
  border: 4px solid red; }

border-5 {
  border: 5px solid red; }

border-6 {
  border: 6px solid red; }