zoukankan      html  css  js  c++  java
  • CSS预处理语言——less与sass的使用

    我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用

    我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动,比较麻烦

    首先我们来说一下Less。

    【Less中的变量】
    1.声明变量使用 @变量名:变量值;
    2.使用变量 @变量名
    >>less中的变量类型:
    ①数字类 1 10px ②字符串:无引号字符串 red 和有引号字符串"gdak"
    ③颜色类 red #000000 rgb()
    ④值列表类型,用逗号或空格分隔
    >>变量使用原则 :
    多次频繁出现的值、需要修改的值设为变量
     
    3.混合(MiXins)
    ①无参混和声明 :.name{} 调用:选择器中调用
    ②带参混合
    无默认值声明: .name(@param){} 调用:.name(parValue); parValue不可以省略
    有默认值声明: .name(param:value()){} 调用:name(parValue); parValue可以省略
    >>无参混合会在CSS中编译同名的class选择器;有参的不会
    4.Less的匹配模式
    使用混合进行匹配,类似于if结构:
    声明
    .name(条件一,参数){}
    .name(条件二,参数){}
    .name(@_,参数){}
    调用: .name(条件值,参数值);
    匹配规则:根据调用时提供的条件值,去寻找与之匹配的miXin执行,其中@_表示永远需要执行的部分
    5.Less中的运算
    *+-/可带单位可不带
    颜色运算时,红绿蓝分三组计算,组内可进位,组间互不干涉。
    6.Less中的嵌套:保留HTML中的代码结构,
    嵌套默认后代选择器,如果需要子代选择器,则在子代前面加>
    &表示上一层,&:hover 表示上一层的hover事件
     
     
     
    
    section p {
      color: red;
      background-color: blue;
      text-align: center;
    }
    section ul {
      padding: 0px;
      list-style: none;
    }
    section ul li {
      float: left;
      margin: 10px;
      width: 100px;
      text-align: center;
      border: 1px solid #000000;
    }
    section ul li:hover {
      background-color: yellowgreen;
    }

    当然,我们最看好less的一点可能就是它的嵌套了就像上边要写这么长的代码,使用less来写就如以下代码所示,是不是看着舒服了很多,用编译器编译完就可以显示为上边代码的样子了

    section{
        p{
            color: red;
            background-color: blue;
            text-align: center;
        }
        ul{
            padding: 0px;
            list-style: none;
            li{
                float: left;
                margin: 10px;
                width: 100px;
                text-align: center;
                border: @bod;
                &:hover{
                    background-color: yellowgreen;
                }
            }
        }
    }

    下边来说与一下Sass

    1. SASS中的变量
    使用 $变量名:变量值 声明变量
    如果变量名需要在字符串中嵌套,则需使用#加大括号包裹:
    2.sass中的运算会将单位也进行运算,使用时需注意最终单位:
    例:10px*10px=100px*px
    3.sass中的嵌套: 选择器的嵌套 属性嵌套 伪类嵌套
    选择器的嵌套 ul{li{}}后代
    ul{>li{}}子代
    &表示上一层 div{ul{li{&=-=div ul li}}}
    属性嵌套 :属性名与大括号之间必须有: 例如boder:{color:red;}
    伪类嵌套: ul{li{&:hover{"ul li :hover"}}}
    4. 混合宏、继承、占位符
    ①混合宏:声明@mixin name($param:value){}
    调用:@include name(value)
    》》声明时,可以有参可以无参;可带默认值,但调用必须符合生命规范
    >>优点:可以传参,不会生成同名class
    >>缺点:会将混合宏的代码copy到对于那个的选择器中
    ②继承: 声明: .class{} 调用: @extend .class
    >>优点:继承的相同代码会提取到并集选择器中,减少冗余代码,
    >>缺点:无法进行传参,会在CSS中生成一个同名class
    ③占位符:声明:%class{} 调用: @extend %class
    >>优点:继承相同代码,会提到并集选择器,不会生成同名的class选择器;
    >>缺点:无法进行传参
     
    综上所述:当要传递参数时用混合宏,当有现成class时用继承,不须参数不需class时候用占位符
    5.if条件结构:
    @if 条件{}
    @else 条件{}
    6.for循环结构
    @for $i from 1 to 10{} 不含十;
    @for $i from 1 through 10{} 含十;
    7.while循环结构
    $j:1;
    @while $j<10{
    .while井{$j}{
    boder:井{$j}px solid red;
    }
    $j:$j+1;
    }
    8.each循环遍历
    @each item in a,b,c,d{
    //item 表示每一项
    }
    9、函数:
    @function func($length){
    $length: $length*5;
    @return $length;
    }
    调用:func(10px);
     

    相信都能看出sass与less的不同了,定义变量Less用的是@符,Sass用的是$符当然,sass可以用if条件结构,循环结构,定义函数比less高大上了许多。所以一般还是用sass来写,以备以后不时之需

  • 相关阅读:
    git线上操作
    IDEA快捷方式
    Java 四种线程池
    java 获取当前天之后或之前7天日期
    如何理解AWS 网络,如何创建一个多层安全网络架构
    申请 Let's Encrypt 通配符 HTTPS 证书
    GCE 部署 ELK 7.1可视化分析 nginx
    使用 bash 脚本把 AWS EC2 数据备份到 S3
    使用 bash 脚本把 GCE 的数据备份到 GCS
    nginx 配置 https 并强制跳转(lnmp一键安装包)
  • 原文地址:https://www.cnblogs.com/cherishli/p/6790631.html
Copyright © 2011-2022 走看看