scss控制指令學習

1、@if

混合巨集定義中

book.scss

@mixin blockorhidden($boolean:true) ";//@debug;@warn,@error

display: block;
}@else ";//#{} 插值 會執行
display: none;
}}.block 
.hidden

執行 sass --watch  e:\sass/book.scss:e:\sass/books.css

books.css

.block 

.hidden

book.scss 中@ debug的作用實際上會在ruby命令列 列印資訊

e:\sass/book.scss:3 debug: $boolean is true

e:\sass/book.scss:7 debug: $boolean is false

相應@warn提示警告，@error報錯不能編譯

2、@for

@for $i  start through/to end

$i變數（固定），through包括end，to反之

book.scss

@for $i from 1 through 3  

}

.item-1 

.item-2 
.item-3

$grid-prefix: span !default;

$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid 
@for $i from 1 through 
12 # 
}

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 

.span1 
.span2 
.span3 
.span4 
.span5 
.span6 
.span7 
.span8 
.span9 
.span10 
.span11 
.span12

$types: 4;

$type-width: 20px;
@while
$types > 0 
$types: $types - 1;
}

$list: adam john wynn mason kuroir;//$list 就是乙個列表

@mixin author-images .png") no-repeat;}}
}.author-bio

.author-bio .photo-adam 

.author-bio .photo-john 
.author-bio .photo-wynn 
.author-bio .photo-mason 
.author-bio .photo-kuroir

sass 控制指令

控制指令 控制指令主要有 if for while each 四種，控制指令是一種高階功能，主要與混合指令 mixin 配合使用 尤其是在 compass 庫中 if 跟 if 條件語句一樣，也可以跟多個 else if 用返回值來判斷輸出的 當返回值為 true 時候輸出後面 中的 當返回值是 f...

sass的控制指令

if 條件語句 判斷語句 for 迴圈語句 while 迴圈語句 each 迴圈語句 html結構 選擇器 多選一吧 邏輯運算子 if 表示式表示式 可以是關係運算 或者 邏輯運算 關係運算子 邏輯運算子 與 或 非 and 邏輯與 or 邏輯或 not 邏輯非 scss示例 max 101 min...

Angular 流程控制指令

基本介紹 1 ng repeat，類似於for迴圈，對陣列進行遍歷 2 ng switch on，ng switch when，類似於switch，case 基本使用 ng repeat doctype html html lang en head meta charset utf 8 title ...