zoukankan      html  css  js  c++  java
  • Sass

    Sass与Scss的异同

    sass与scss基本是相同的,唯一的不同是,需要使用分号和花括号而不是换行和缩进。

    // sass 写法
    #header{
       30%;
      background-color: red;
    }
    
    // scss写法
    #header
       30%
      background-color: red
    

    变量

    $red: red;
    div{
      color: $red
    }
    
    $side: top;
    div{
      padding-#{$side}: 10px;
    }
    

    计算功能

    div{
      margin: (20px/2);
      padding: 5px + 2px;
       10 * 10%
    }
    

    嵌套

    div{
      p{
        color: red;
      }
    }
    

    编译为

    div p{
      color: red;
    }
    

    div{
      border:{
         1px;
        color: #ccc;
        style: solid;
      }
    }
    

    注意border后面的冒号!!!

    编译为

    div{
      border- 1px;
      border-color: #cccccc;
      border-style: solid;
    }
    

    // 在嵌套的代码块内,可以使用&引用父元素
    div{
      &:hover{
        background: red
      }
    }
    

    注释

    • 标准的CSS注释 /* comment */ ,会保留到编译后的文件。
    • 单行注释 // comment,只保留在SASS源文件中,编译后被省略。
    • 在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
    /*! 
      重要注释!
    */
    

    继承

    .box1{
      border: 1px solid #ddd;
    }
    

    box2要继承box1,就要使用@extend命令

    .box2 {
      @extend .box1;
     font-size: 12px;
    }
    

    Mixin

    重用的代码块
    @mixin left {
      float: left;
      margin-left: 10px;
    }
    
    使用@include命令,调用这个mixin
    div{
      @include left;
    }
    

    强大之处

    @mixin left($value: 10px) {
      float: left;
     margin-right: $value;
    }
    
    div{
      @include left(20px);
    }
    

    颜色函数

    lighten(#cc3, 10%) // #d6d65c
    darken(#cc3, 10%) // #a3a329
    grayscale(#cc3) // #808080
    complement(#cc3) // #33c
    

    条件语句

    // @if可以用来判断
    
    p{
      @if 1 + 1 == 2 { border: 1px solid; }
     @if 5 < 3 { border: 2px dotted; }
    }
    
    // 配套的还有@else命令
    
    @if lightness($color) > 30% {
      background-color: #000;
    } @else {
     background-color: #fff;
    }
    

    循环语句

    // sass支持for循环
    
    @for $i from 1 to 10 {
     .border-#{$i} {
       border: #{$i}px solid blue;
     }
    }
    
    // 当然也支持while循环
    
    $i: 6;
    
    @while $i > 0 {
     .item-#{$i} {  2em * $i; }
     $i: $i - 2;
    }
    
    // each命令,作用与for类似
    
    @each $member in a, b, c, d {
     .#{$member} {
      background-image: url("/image/#{$member}.jpg");
     }
    }
    

    自定义函数

    // SASS允许用户编写自己的函数
    
    @function double($n) {
     @return $n * 2;
    }
    
    #sidebar {
      double(5px);
    }
    
  • 相关阅读:
    strftime和strptime函数对时间的转换操作
    第四章文件和目录学习笔记
    getenv和putenv在获取和设置环境变量中的使用
    SQL 常用语句以及函数(个人收藏)
    详测 Generics Collections TQueue (2): Create、Count、Clear、TrimExcess
    详测 Generics Collections TQueue (1): Enqueue、Dequeue、Peek
    详测 Generics Collections TList (9): BinarySearch
    详测 Generics Collections TList (8): Sort
    详测 Generics Collections TList (4): AddRange、InsertRange、DeleteRange
    详测 Generics Collections TList (7): Items、Contains
  • 原文地址:https://www.cnblogs.com/loveyt/p/10558916.html
Copyright © 2011-2022 走看看