記錄Sass的一些用法

$fontsize:12px;

body

$top:top;

div:10px
}

.btn-primary

not(:last-child) //選中除了最後乙個元素並為其加上樣式

.layout:not(:last-child)

mixin的使用(永遠不要使用@extend)

@mixin foo .#-# jaslbw";

}

/*

偽類巢狀
*/.clearfix&:after }

.main 

}}

&的另乙個妙用

.dashboard &-text }

編譯後

.dashboard-text

在sass3.2.0中引入， 可以用來解決css3中 @meidia 或者 @keyframes 帶來的問題。它可以使@mixin接受一整塊樣式，接收的樣式從@content開始

//sass 樣式             
@mixin max-screen($res)}
@include max-screen(480px) }
//css 編譯後樣式
@media only screen and (max-width: 480px) }

使用@content解決@keyframes關鍵幀的瀏覽器字首問題

// 初始化變數

$browser: null;
// 設定關鍵幀
@mixin keyframes($name)  @-moz-keyframes # @-o-keyframes # @keyframes # }
// 引入
@include keyframes(scale) transform: scale(0.8);
}}  
// css編譯後
@-webkit-keyframes scale @-moz-keyframes scale  @-o-keyframes scale  @keyframes scale

高階用法

1）函式 function

sass允許使用者編寫自己的函式，以@function開始

$fontsize: 10px;
@function pxtorem($px) div // css編譯後樣式
div

2）if條件語句&&三目判斷

語法為 if($condition, $if_true, $if_false)。 三個引數分別表示： 條件，條件為真的值，條件為假的值

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
@if語句可以用來判斷
// sass樣式
$type: monster;
div @else if $type == matador @else if $type == monster @else }
// css編譯後樣式
div

3）迴圈語句

for迴圈有兩種形式，分別為：@for $var from through 和 @for $var from to 。 $var 表示變數，start表示開始值，end表示結束值，兩種形式的區別在於 through 包括 end 的值，to 不包括 end 值。

// sass樣式
@for $i from 1 to 4  }
// css編譯後樣式
.item-1 .item-2 .item-3 while迴圈 
// sass樣式
$i: 2;
@while $i > 0  $i: $i - 1;
}// css編譯後樣式
.item-2 .item-1 @each迴圈：語法為@each $var in 。 其中$var表示變數，而list和map表示資料型別，sass3.3.0新加入多欄位迴圈和map資料迴圈
單字段list資料迴圈
//sass 樣式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list -icon .png');
}}//css 編譯後樣式
.puma-icon .sea-slug-icon .egret-icon 多欄位list資料迴圈
//sass 樣式
$animal-data: (puma, black, default),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data -icon .png');
border: 2px solid $color;
cursor: $cursor;
}}//css 編譯後樣式
.puma-icon .sea-slug-icon 多欄位map資料迴圈
//sass 樣式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings  }
//css 編譯後樣式
h1 h2 h3

sass的語句與一些sass函式

判斷第乙個表示式是否為true，為true則返回第二個引數，為false時返回第二個引數 後面不需要加括號，如果成立則執行後面的語句。1.to for var from to 當 var等於的時候便不再執行。2.through for var from through 當 var大於的時候不再執行。...

記錄一些常用golang包的用法

定義flag有兩種方式 flag.int flagname 1000,help message for flagname 返回的是對應型別的指標 第乙個引數 設定flag的名稱 第二個引數 設定flag的預設值 第三個引數 設定flag的提示資訊 flag.intvar var,flagname 1...

記錄一些python和pytorch用法

a 1,3 true a3 a 1,3 false a1 true 返回後者，false 返回前者 for a,b in enumerate torch.randn 4,4 2 print a print b 2tensor 0.5245,0.5983,0.4501,0.6317 3tensor 0...