sass学习笔记一

sass是css预处理器之一，用后感觉比单纯的css要方便快速，且层级关系清晰明了，后缀名.scss。之前也用过，但好久不用语法都忘记了，都说好记性不如烂笔头，把学到的点滴都记下来便于后期查看。

先把sass使用频率最高的记录下，内容如下：

一：变量定义$，如：

$absolute:absolute;
$relative:relative;

.focus{
    width:670px;
    height: 345px;
    position: $relative;
    overflow: hidden;
    ul{
        position: $absolute;
        left:0;
    }
}

二、混合声明@mixin，调用@include，如

 1 @mixin fl{
 2     float: left;
 3     display:inline;
 4 }
 5 @mixin fr{
 6     float: right;
 7     display: inline;
 8 }
 9 .focus{
10     width:670px;
11     height: 345px;
12     position: $relative;
13     overflow: hidden;
14     ul{
15         position: $absolute;
16         left:0;
17     }
18     li{
19         width: 670px;
20         height: 345px;
21         @include fl;
22     }
23 }

三、嵌套标签上定义样式和伪类&

 1 a{
 2     background: rgba(0,0,0,.5);
 3 
 4     &:hover{ 
 5         background: rgba(0,0,0,.8);
 6     }
 7 }
 8 
 9 .dot{
10     position: $absolute;
11     bottom: 10px;
12     left: 0;
13     span{
14         display: inline-block;
15         width: 10px;
16         height: 10px;
17         margin: 0 2px;
18         background: #333;
19         cursor: pointer;
20         &.current{ /*生成后的css为：.dot span.current*/
21             background: #f30;
22         }
23     }
24 }

四、跳出嵌套@at-root。注：只能跳出普通的嵌套层，但不能跳出@media或@support

 1 .dot{
 2         position: $absolute;
 3         @at-root span{
 4             display: inline-block;
 5             background: #333;
 6             cursor: pointer;
 7             &.current{ 
 8                 background: #f30;
 9             }
10         }
11     }
12 
13 或者
14 .dot{
15         position: $absolute;
16         @at-root{ 
17             span{
18                 display: inline-block;
19                 width: 10px;
20                 background: #333;
21                 cursor: pointer;
22                 &.current{ 
23                     background: #f30;
24                 }
25             }
26         }
27     }

 

........

 

posted @ 2017-04-18 16:02  lch880  阅读(155)  评论(0)  编辑  收藏  举报