sass頭腦風暴
來自專欄鋼彈一號
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width_=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
sass中都有哪些東東：number,string,null,array,object,function，$,@mixin,@extend,if,@if,@else if ,@for,@each,@while,through,to,,@at-root，@import,and,or,not,&,@media,@debug,@warn,@error,sass嵌套規則,sass輸出規則
$XX：{
$:
變數的值可以為number,string,null,array,object
♥ 如果變數沒有值的時候，可以給變數設置默認值，如果有值，則不能給變數設置默認值
1,number: {
1，1,2,3,4,5...等，
2，> >= < <= +-*/% == !=等運算符
♥
1，運算符前後最好都加空格
2，除法運算的時候需要主意:一下三種情況是為除法運算：
3，如果是變數或者函數返回值 $width:100px;width:$width/2 | abs(-5)/2
4，如果值被小括弧包括 width:(10px/2)
5，如果是算術表達式的一種 width:10px/2px + 5
6,如果想使用/，又不想讓其做除法運算：可以使用 #{100px}/#{2px} 這裡可以是值，也可以是變數或者函數
♥ number類型的循環
1,@for $i from 1 through 4{ //$i從1循環到4 其中through包括4
.item#{$i}{width:$i*10px}
}
2,@for $i from 1 to 4{ //$i從1循環到4 其中to不包括4
.item#{$i}{width:$i*10px}
}
3，
$a:1
@while $a < 50{
.item#{$a}{width:$a*10px}
$a:$a+1; ♥sass不支持++操作
}
上面的三個循環似乎只能循環number類型的
}
2,string：{
100px等
♥
#{}:很想es6中的字元串${}，#{這裡可隨意}
}
3,null
4，array：{
以空格和逗號進行分割，10 10 10 /10，10，10 /(10,10 10)/((10,10),(a,b))
♥
有數組就要談到循環：
1，
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url(/images/#{$animal}.png);
}
}
2,有循環就要談到判斷,判斷有一下類型:
1,基礎判斷:and,or,not 類似於js中的&& || !
2,if函數:類似於js中的三元表達式
3,@if @else if :和js中的if else if一樣
4,有判斷就要驗證傳入的參數是否正確:這時就需要報錯,以及警告的功能 @warn @error 注意:error,warn都只能出現在函數,mixin模塊中 ,如果遇到error或者warn都會報錯,打斷編譯
@mixin adjust-location($x, $y) {
@if unitless($x) {
@warn "$x may not be unitless, was #{$x}.";
}
@if unitless($y) {
@warn "$y may not be unitless, was #{$y}.";
}
position: relative; left: $x; top: $y;
}
$a:1;
@while $a<50{
.item#{$a}{width:$a*10px;@include adjust-location(1,2px)}
$a:$a+1;
}
}
5,object:{
在sass中稱為maps
Maps可視為鍵值對的集合， 和Lists不同Maps必須被圓括弧包圍，鍵值對被都好分割(a:1,b:1)
@each $header, $color in (h1: red, h2: green, h3: blue) {
#{$header} {
color: $color;
}
}
其他的見array
}
6,function{
包括兩塊:@mixin,@function
@mixin:簡答的是@mixin{width:10px} 複雜的是@mixin a($a,$b){width:$a}
$first-width: 5px;
$second-width: 5px;
@function adjust_width($n) {
@return $n * $first-width + ($n - 1) * $second-width;
}
#set_width { padding-left: adjust_width(10); }
二者的區別@mixin是可以直接@include到樣式表中,@function是比較高級的變數,可以根據傳的值做出相應的變化,@function可以放在minxin中,也可以放在樣式表中對應的樣式上
二者中均可以使用...args,作用和es6中的...args作用一樣,但是這個不會分解數組
2,談到函數必須要講繼承:
但是此處的繼承和js中的繼承不一樣,這裡的繼承只能繼承佔位符,具體樣式等,還有一個
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
編譯成:
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em; }
},
7雜項:{
1,@import:一般在頭部引入其他的sass文件,建議:引入文件的名字都改為sass/scss,
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
可以在前面用變數或者函數的方式,來實現引入文件的動態化
此外,@import還有一個導入具體樣式到某個樣式中,個人不建議使用
2,@media :在@media{使用繼承的時候,只能繼承大括弧中的樣式}
3,@at-root 使當前的元素和根元素處於同級
4,sass嵌套規則
a{
b{}
font{
size:,
family:
}
}
5,&代表父級,和this比較相似,是處於作用域中所在的父級,使用方法: &:hover & a &-a
6,sass輸出規則:這個沒玩過,不知道,還請各位大神不吝指教
}
}
</body>
</html>
推薦閱讀：
※關於前端開發技術有哪些值得推薦的書籍？
※CSS定位的4件注意事項
※辭職無基礎自學3星期html和css，現在感覺，動手能力差，基礎掌握不好？求大神指導啊，衷心感謝！