CSS3扩展技术

本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

标签:style   si   使用   代码   sp   文件   as   bs   c   


我们使用扩展技术编写代码时,需要先用编译器将我们的文件进行编译,编译后的文件才能够使用。
 less技术相关语法 

less相对来说比较简单,语法也较少:
    变量的定义:
    @w:20px;
    变量的使用:
    .p2{
    width:@w
    }
    编译后的结果为:
    .p2{
    width:20px;
    }
    
    混合使用:
    先定义:
    .radius{
    border-radius:10px;
    }
    引用:
    .p1{
        .radius
    }
    传参数:
    .radius(@a){
    border-radius:@a;
    }
    引用:
    .p1{
        .radius(10px);
    }
    伪类的定义:
    .p1{
        &:hovor
    }
    以上的&表示当前元素的父元素,上面的代码转译之后为:
    .p1:hovor{ };

 


 sass技术 
    sass的功能比less强大许多,语法也有些不同,sass的文件后缀名有.sass,也有.scss,现在多用.scss。
    下面来看语法:
    导入css文件:
    @import "a.css"
    导入scss文件:
    @import "b"//不用写后缀名
    
    变量的定义:
    $color:blue !default;//default为设置的默认值,可允许修改
    在元素中嵌入一个变量,需要用#{}将变量括起来
    $direct:top;
    .border-#{$direct}{ };
    
     多值变量:
    $num:1px 2px 3px 4px;
    .p1{
        padding:$num
    }
    margin:nth($num,1)//nth:根据下标序号获取数组中的值(1px)
    $num1:1px 2px,3px 4px;
    margin:nth($num1,2)//3px,4px
    
    键值对:
    $map:(a1:10px,a2:5px,a3:3px,a4:1px);
    取值:
    .p{
        width:map-get($map,a1)
        height:map-get($map,a2)
    }
    伪元素的定义:
    .p2{
        &:hovor{
        }
    }//&为此元素的父元素
    
    div{
        @at-root p{
            color:red
        }
    }
    p的执行结果:
    div{};
    p{
        color:red
    }
    @at-root是表示跳出父元素
    
    属性的嵌套:
    .d2{
        border:{
            top:20px;
            left:25px;
        }
    }
    编译为:
    .d2{
        border-top:20px;
        border-left:25px;
    }
    scss中,加了:会编译成(-)属性,不加:为选择器的嵌套
    

    反选:
    .child{
        @at-root .p1 &{
        }
    }
    译成:
    .p1 .child{}
    
    混合:
    先定义:
    @mixin whb{
        width:200px;
        height:100px;
    }
    引用:
    div{
        @include whb
    }
     混合,传参的定义:
    @mixin whb($w,$h){
        width:$w;
        height:$h
    }
    调用:
    div{
        @include whb(20px,10px);
    }
    继承:
    %h1{
        font-size:12px;
    }//%会将h1隐藏,不会显示在CSS代码中
    应用:
    p2{
        @extend %h1
    }
 scss混合和继承
    如果重用的代码里面没有参数,就用继承,有参数,用混合。
    

    
        

CSS3扩展技术

标签:style   si   使用   代码   sp   文件   as   bs   c   

原文:http://www.cnblogs.com/hongxuejiao/p/4947711.html

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

广告推荐

讨论区