zoukankan      html  css  js  c++  java
  • sass

    css预处理语言
    写sass然后使用工具将其编译成css
    sass比css多了很多功能,比如定义变量/循环/嵌套等
     
    sass的语言版本有两种,老版本的后缀名是.sass,新版本的后缀名是.scss
     
    在项目中准备使用sass代替css,所以需使用gulp-sass来对sass进行编译需下载(node-sass    gulp-sass)
     
     
     
     
    动态的css            
    sass  动态的css
      写一些语法规范    变量   嵌套   类的重用....
     
    sass
    body
        background:red;
        font-size:12px;
     
    scss
       body{
            ...
        }
     
    考拉使用 :
    拖拽css目录
    设置输出路径  scss文件要输出的css文件
    识别中文 : @charset "utf-8";
     
    sass语法:
    注释 
        // 不能被css识别      
        /**/ 可以被css识别
     
    变量定义
        $变量   
     
     
    传统css嵌套
       .nav {
         ...
         }
       .nav  ul{
              ...
         }
       .nav ul li{
        ...
         }
     
    嵌套方式
         .nav{
              960px;
              height : 40px;
              ul{
                   margin-left : 20px;
                   li{
                        float: left;
                   }
              }
         }
     
    符合属性嵌套
    border:{
         color: red;
         style:solid;
         1px;
    }
     
    &表示继承父级标签
        a{
          &:hover{ color:red }
        }
     
    代码重用(函数)   
    sass如何实现代码重用 ,有几种方式  ~~~
    960px;
    margin:0 auto;
    .public{  //无参数   使用 @extend  .public;
         960px;
    }
    @mixin  public{  //可以定义参数   使用 :  @include 导入    先定义 后调用  (混合定义)
         ....
    }
    @mixin public($height:200px){//定义一个默认值
         960px;
        height: $height;
        margin: 0 auto;
    }
    #header{
        @include public(400px);给具体的参数值 默认值无效,如果不传递参数 就按照默认值执行
    }
    导入:  @import "xxx.scss"   将多个scss文件合并成一个css文件
     
    if语句
    $type : monster;
    $flag : false;    
       
         @if $type==monster {
            display :inline ;
        }
        @if $flag {
            p {color :red; }
        } @else{
             p {color :blue; }
         }
     
    for语句
    @for $i from 1 through 3 {
      .item-#{$i } { 2em * $i ; }    //   .item1   .item2  .item3
    }
  • 相关阅读:
    优秀 Java 程序员写代码的风格
    最新!Apache Struts 又爆安全漏洞(危害程度特别大)
    Spring bean初始化及销毁你必须要掌握的回调方法
    Shiro Realm 权限的验证流程和缓存机制
    国人开源了一款小而全的 Java 工具类库,厉害啊!!
    Spring 解决循环依赖的 3 种方式!
    图解高内聚与低耦合,傻瓜都能看懂!
    五分钟搞懂 Linux 重点知识,傻瓜都能学会!
    微信扫码登录是如何实现的?
    shell实现group by聚合操作统计
  • 原文地址:https://www.cnblogs.com/tis100204/p/10297390.html
Copyright © 2011-2022 走看看