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 教程  完结

  • 相关阅读:
    Javascript继承,再谈
    RHEL7使用systemctl管理服务
    centos7进入单用户模式修改root密码
    IBM DS5020 管理口密码重置
    IBM小机拆镜像换盘
    HMC版本支持
    IBM产品系列和AIX系统版本
    AIX 6.1创建逻辑卷并挂载【smitty】
    AIX中的网络管理
    创建AIX克隆盘
  • 原文地址:https://www.cnblogs.com/sowhite/p/6393862.html
Copyright © 2011-2022 走看看