zoukankan      html  css  js  c++  java
  • sass语法(考拉)

    一、sass语法              
    sass功能 :
    它使用自己的语法并编译为可读的CSS
    可以在更少的时间内轻松地编写CSS代码  
    是一个开源的预处理器,被解释为CSS
    可以兼容所有的CSS版本
     
    sass是动态的css
      写一些语法规范    变量   嵌套   类的重用....
             
     
    考拉使用 : 
        拖拽css目录
        设置输出路径  scss文件要输出的css文件
    识别中文 : @charset "utf-8";
     
    sass语法
    1、注释 :  // 不能被css识别      /**/ 可以被css识别
    sass中有哪些注释类型 : //注释     /*注释*/
     
    2、变量定义  :   $变量   
    3、嵌套 : 
    传统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的嵌套的过程中,如果需要用到父元素,在 SASS 中通过(& )符号引用父属性
     
    4、代码重用、混合(函数):   sass如何实现代码重用 ,有几种方式  ~~~
    960px;
    margin:0 auto;
    第一种方案 : 类的继承  使用.定义一个类  然后通过 @extend 调用这个类(缺点:不能定义参数)
    .public{  //无参数   使用 @extend  .public;
         960px;
    }
    总结:sass中定义一个类,要继承这个类,需要使用的关键字是 (@extend)
    第二种方案 :  使用 @mixin 定义一个代码块   使用 @include 调用这个代码块 (先定义 后调用)  该方式可以定义参数 
    该方式用于定义可重复使用的样式,避免了使用无语意的class
    如果参数有默认值  该参数放到后面
     
    @mixin  public{  //可以定义参数   使用 :  @include 导入    先定义 后调用  (混合定义)
         ....
    }
    @mixin public($height:200px){//定义一个默认值
         960px;
        height: $height;
        margin: 0 auto;
    }
    #header{
        @include public(400px);给具体的参数值 默认值无效,如果不传递参数 就按照默认值执行
    }
    总结:sass中使用@mixin定义了一段代码块,需要使用的关键字是 : ( @include)
     
    sass中混合和函数的不同点:
    函数有返回值   sass混合没有
    混合的结果是一段代码
     
    5、导入:  @import "xxx.scss"   将多个scss文件合并成一个css文件
    sass中用于导入一个新文件的关键字是 :@import
     
    6、if语句 :
    $type : monster;
    $flag : false;    
       
         @if $type==monster {
            display :inline ;
        }
     
        @if $flag {
            p {color :red; }
        } @else{
             p {color :blue; }
         }
    例如 : 
    这个代码正确输出是
    p {  
        @if 1 + 1 == 2 { border: 1px solid; }  
        @if 5 < 3 { border: 2px dotted; } 
        @if 5 >6 { border: 4px dotted; }  
        @if null  { border: 3px double; } 
    }
     
     
    7、for 语句:
    @for $i from 1 through 3 {
      .item-#{$i } { 2em * $i ; }    //   .item1   .item2  .item3
    }
     
    循环语句两种写法:
    @for $i from 1 to 4 { 语句;}
    @for $i from 1 through 4{ 语句;}
     
     
  • 相关阅读:
    Python阶段复习
    Python阶段复习
    Python学习笔记
    Python爬虫学习
    Python爬虫学习
    Python学习笔记
    史上最全的Maven Pom文件标签详解
    css3 animation动画技巧
    常用的sass编译库
    compass做雪碧图
  • 原文地址:https://www.cnblogs.com/cqdd/p/10409515.html
Copyright © 2011-2022 走看看