#### @for 循環
~~~
@for $i from 1 to 13{
.col-#{$i}{
width: 100%/12*$i;
}
}
@media(min-width:768px) and (max-width:992px){
@for $i from 1 to 13{
.col-sm-#{$i}{
width: 100%/12*$i;
}
}
}
~~~
* * * * *
#### @import 引入其他css
@import "base.css";
* * * * *
#### 嵌套
~~~
div{
p{
color: yellow;
&:hover{
color: green;
}
}
&:hover{
color: aliceblue;
}
}
~~~
* * * * *
//可以做定制化的傳參
//下面默認值為100px;可以自由改變,通過$w,$h可以改變元素
//定義公共的css樣式
#### @mixin
~~~
@mixin wh($w:100px,$h:100px){
width: $w;
height:$h;
}
.one{
@include wh;
background: red;
}
.two{
@include wh(200px,200px);
background:yellow;
}
~~~
* * * * *
#### @extend實現繼承
.head{
width: 100px;
height: 100px;
background: #333;
}
.foot{
@extend .head;
}
* * * * *
#### 能定義變量
$bg: #ff2d51;
$fontColor: #333;
$m-font:14px;
body{
background: $bg;
color: $fontColor;
font-size: $m-font;
background-color: yellow;
}
- 1.基本樣式
- 0.樣式初始化
- 1. 漸變色
- 2. hover問題
- 3. 陰影
- 4. 選擇器
- 5. border.畫邊線
- 6. 水平垂直居中
- 7.input 輸入框需要縮進
- 8.文字問題
- 2. 方法
- 1. 定位浮動和flex
- 1. 阮一峰
- 2. position
- 3. flex
- 2. bootstrap 3
- 3. sass語法
- 4.margin-top bug 解決方法
- 5. iconfont圖標
- 3. 動畫特效
- 特效總結
- 動畫
- css2d轉換
- 過渡
- 1. 入場從無到有
- 2. 兩面切換
- 3. 小三角及原理
- 4. 點擊圖片單獨顯示
- 5. 導航條吸頂
- 6. 進度條
- 7. animate效果 jquery
- 8.3D透視旋轉
- 4.grid布局
- 1.grid布局 網格居中對齊
- HTML
- 第一節、學習網站
- 第二節、封裝
- 第三節、快捷鍵使用