久草在线视频二维码,夜夜骑夜夜撸狠狠干

首頁免費課 Sass進階篇問答

Sass進階篇

                
                大漠
            Web前端工程師

                    查看講師更多課程 
                    大漠講師的其他課程
                
Sass入門篇
中級·104420
免費課程
                                
玩轉Bootstrap（JS插件篇）
中級·128659
免費課程
                                
玩轉Bootstrap（基礎）
初級·314560
免費課程
                                
十天精通CSS3
初級·243062
免費課程
                                
                難度中級
            
                時長 4小時55分
            
                學習人數
            
綜合評分9.33
                            98人評價
                        查看評價
                                9.4
                                內容實用
                            
                                9.4
                                簡潔易懂
                            
                                9.2
                                邏輯清晰

全部評論問答未解決精華

草莓改二

@mixin ifTest($test:true,$test2:true){
@if $test{
width: $test;
}
@else if $test2{
height: $test2;
}
@else{
width: 50px;
height: 50px;
}
}

.boxs{
@include ifTest(10px)
}
.boxs2{
@include ifTest(false,20px)
}
.boxs3{
@include ifTest(false,false)
}

0 1-5 @while循環

2016-12-19

草莓改二

.boxs { width: 10px; }
.boxs2 { height: 20px; }
.boxs3 { width: 50px; height: 50px; }

0 1-2 @if

2016-12-19

草莓改二

@mixin ifTest($test:true,$test2:true){
@if $test{
width: $test;
}
@else if $test2{
height: $test2;
}
@else{
width: 50px;
height: 50px;
}
}
.boxs{
@include ifTest(10px)
}
.boxs2{
@include ifTest(false,20px)
}
.boxs3{
@include ifTest(false,false)
}

0 1-2 @if

2016-12-19

草莓改二

和寫在外面的效果一樣但保證了嵌套的結構性

0 5-4 @at-root

2016-12-18

草莓改二

創建example.scss就不會編譯失敗了

0 5-1 @import

2016-12-18

草莓改二

#main {

@import "example";

}
編譯不通過。是因為這里的"example"是個scss文件，類名繼承應該用@extend .example

0 5-1 @import

2016-12-18

草莓改二

如果你有一個 SCSS 或 Sass 文件需要引入，但是你又不希望它被編譯為一個 CSS 文件，這時，你就可以在文件名前面加一個下劃線，就能避免被編譯。
就是帶下劃線前綴的scss文件不會編譯成css文件，在koala中編譯時會沒有該文件；
但可以在其他scss中@import該文件后編譯，而且不用加下劃線前綴.

1 5-1 @import

2016-12-18

juanjuan_lh

編譯出來是.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.error.intrusion, .intrusion.seriousError {
background-image: url("/image/hacked.png"); }
.seriousError {
border-width: 3px; }不是.error.intrusion, .seriousError.intrusion {
background-image: url("/image/hacked.png"); }

3 5-3 @extend

2016-12-15