zoukankan      html  css  js  c++  java
  • sass进阶

    代码的重用

      基础的部分我们讲述了变量 Mixin 这两种方法可以增加扩展和重用

      现在开始继续学习:extend继承

        .class1 {
        border: 1px solid #ddd;
      }
    
        .class2 {
        @extend .class1;
        font-size:120%;
      }

      引入外部文件

    @import "path/filename.scss";

    引入后就可以用调用里边的变量和mixin,继承里边的类了

    高级语法

      @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);
      }

     sass 教程  完结

  • 相关阅读:
    [D3] 4. d3.max
    [D3] 3. Scaling Basics
    [D3] 2. Basics of SVG
    [PHP] find ascii code in string
    [PHP] csv to xml
    [AngularJS] angular-formly: Extending Types
    [R] Draw a wordcloud
    [AngularJS] Error: $location:nobase
    [Whole Web] [Node.js, PM2] Controlling runaway apps using pm2
    Runoob-Java-高级教程-实例-环境设置实例:3.Java 实例
  • 原文地址:https://www.cnblogs.com/sowhite/p/6393862.html
Copyright © 2011-2022 走看看