Sass进阶篇_技术问答

首页免费课 Sass进阶篇问答

Sass进阶篇

                
                大漠
            Web前端工程师

                    查看讲师更多课程 
                    大漠讲师的其他课程
                
Sass入门篇
中级·104427
免费课程
                                
玩转Bootstrap（JS插件篇）
中级·128648
免费课程
                                
玩转Bootstrap（基础）
初级·314544
免费课程
                                
十天精通CSS3
初级·242575
免费课程
                                
                难度中级
            
                时长 4小时55分
            
                学习人数
            
综合评分9.33
                            98人评价
                        查看评价
                                9.4
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.2
                                逻辑清晰

全部评论问答未解决精华

Ryan幕

提交默认的length属性报错是因为什么

0 3-2 length()函数

2017-01-10

偶然的阵雨

先学到，等到大项目用，小页面的话用不太到

0 1-6 @each循环

2017-01-04

偶然的阵雨

一直没用sass，现在学啦过后感觉可以优化不少代码

1 1-2 @if

2017-01-04

肖大飞飞

无fuck可说

0 4-6 HSL函数-lighten()

2016-12-30

钟楼大面包

暂时用不到，知道有这么个东西。等用到再看

1 1-6 @each循环

2016-12-28

我吃四碗饭

@which
$types: 4;
$type-width: 20px;

@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}
@for $i from 4 through 1{
.while-#{$i}{
width:$type-width + $i
}
}

0 1-5 @while循环

2016-12-26

草莓改二

看起来有用但我还是选择控制台算百分比。。

0 2-6 数字函数-percentage()

2016-12-19

草莓改二

$list: archer saber lancer caster rider;
@each $eachTest in $list{
.nav.#{$eachTest}{
width: 10px;
background-image: url("imagers/#{$eachTest}.png");
}
}

0 1-6 @each循环

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-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

首页上一页 18 19 20 21 22 23 24 下一页尾页

开始学习

课程须知: 对CSS有一定的了解，以及最好是学习完成《sass基础篇》课程，才可以更好的学习本课程。

老师告诉你能学到什么？: 1、Sass 的控制命令 2、Sass 的函数功能 3、Sass 的函数的 @ 规则

微信扫码，参与3人拼团

热搜

最近搜索清空

Sass进阶篇