zoukankan      html  css  js  c++  java
  • Less和Sass的使用

    【Less中的变量】
      1、声明变量:@变量名:变量值;
         使用变量:@变量名
    @length:100px;
    @color:yellow;
    @opa:0.5;
      >>>Less中变量的类型:
        ①数字类:1 10px
        ②字符串:无引号字符串 red 有引号字符串 "haha"
        ③颜色类:red #000000 rgb()
        ④值列表类:用逗号或空格分隔10px solid red
      >>>变量使用原则:多次频繁出现的值、需要修改的值,设为变量。
    #div1{
         @length;
        height: @length;
        background-color: @color;
        opacity: @opa;
        .borderRadius;
        .setMargin(top_,10px);
    }
    

      

    2、混合(Mixins)
      ①无参混合
       声明:.name{}; 选择器中调用 .name
      ②带参混合
       无默认值声明:.name(@param){} 调用:.name(parValue);
       有默认值声明:.name(@param:value){} 调用:.name(parValue); parValue可省
        >>>如果声明时,参数没有默认值,则调用时必须赋值,否则报错
        >>>无参混合,会在css中编译出同名的class选择器;有参的不会
    3、Less的匹配模式
      使用混合进行匹配,类似于if结构;
      声明:.name(条件一,参数){} .name(条件二,参数){} .name(条件三,参数){} .name(@_,参数){}
    .setMargin(top_,@width){
        margin-top: @width;
    }
    .setMargin(bottom_,@width){
        margin-bottom: @width;
    }
    .setMargin(@_,@width){
        padding: 10px;
    }
      调用:.name(条件值,参数值);
    .setMargin(top_,10px);
      匹配规则:根据调用时提供的条件值,去寻找与之匹配的"Mixins"执行。其中@_表示永远需要执行的部分。
    4、Less中的运算
      + - * /
      颜色计算时,红绿蓝分三组计算。组内可进位,组间互不干涉
    【Less中的嵌套】
      1、嵌套默认是后代选择器,如果需要子代选择器,则在子代前面加>
      2、& 表示上一层,&:hover 表示上一层的hover事件
    section{
        p{
            color: blueviolet;
            background-color: #00FFFF;
            text-align: center;
        }
        ul{
            padding: 0px;
            list-style: none;
            li{
                float: left;
                margin: 10px;
                 100px;
                border: 3px solid #00CED1;
                text-align:center; 
                &:hover{
                    background-color: cornflowerblue;
                    color: white;
                }
            };
        }
    }
     
    【Sass中的变量】
      1、声明变量:$变量名:变量值
      2、变量在字符串中嵌套,需使用#{}包裹
    border: #{$i}px solid red; 
      3、Sass中的运算:会将单位也进行运算。使用时需注意最终单位
        10px*10px=100px*px
      4、混合宏、继承、占位符
        ①混合宏:声明@mixin name($param:value){}
    @mixin hong($color:yellow){
        color: $color;
    }
    

             调用@include name(value);

    @include hong;
    

      

        >>>声明时可以有参,也可无参;可带默认值,也可不带;但是调用时必须符合声明规范,同less
        >>>优点:可以传参
        >>>缺点:会将混合宏中代码copy到对应的选择器中,产生冗余代码
        ②继承:声明:.class{}
    .class{
        padding: 10px;
    }
    

            调用:@extend.class;

    @extend .class;
    

        >>>优点:继承的相同代码,可以提取到并集选择器;不会生成同名的class选择器

        >>>缺点:无法进行传参
      综上所述:当需要传递参数时,用混合宏;当有现成class时用继承;当不需要class时,用占位符
      5、if条件结构
        @if 判断条件{}
        @else{}
      6、for循环结构
        @for $i from 1 to 10{} 不含10
        @for $i from 1 through 10{} 包含10
    @for $i from 1 through 4{
        .border#{$i}{
            border: #{$i}px solid red;
        }
    }
    

      7、while循环结构

        $j:1,
        @while 判断条件{}
    $j:1;
    @while $j<4{
        .while#{$j}{
            border:#{$j}px solid red;
        }
        $j:$j+1;
    }
    

      8、each循环遍历

        @each $item in a,b,c,d{}
      9、函数
        @function func($name){}
    @function func($length){
        $length:$length*5;
        @return $length;
    }  
    

      【Sass中的嵌套】

      1、选择器嵌套 ul{ li{} } 后代
        ul{ >li{} } 子代
        &表示上一层 div{ ul {li{ &=="div ul li" } } }
      2、属性嵌套:属性名与{之间必须有: 例如 border:{color:red;}
      3、伪类嵌套:ul{li{ &:hover{ "ul li:hover " } } }
        
    section{
        p{
            color: #2173B6;
            background-color: #00FFFF;
        }
        ul{
            padding: 0px;
            list-style: none;
            li{
                float: left;
                 100px;
                text-align: center;
                margin: 10px;
                border: {
                    color: #4E81BD;
                    style:solid;
                     10px;
                };
                &:hover{
                    background-color: #6495ED;
                    color: white;
                }
            }
        }
    }
    

      

     
  • 相关阅读:
    my first android test
    VVVVVVVVVV
    my first android test
    my first android test
    my first android test
    ini文件
    ZZZZ
    Standard Exception Classes in Python 1.5
    Python Module of the Week Python Module of the Week
    my first android test
  • 原文地址:https://www.cnblogs.com/dealblog/p/6792731.html
Copyright © 2011-2022 走看看