• sass


    sass是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

    sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。

    //文件后缀名为sass的语法

    body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法

    body { background: #eee; font-size:12px; }

    p{ background: #0982c1; }

    条件语句
    @if可以用来判断:
    p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
    }
    配套的还有@else命令:
    @if lightness($color) > 30% {
     
    } @else {
     
    }
     循环语句
    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);
    }
    @import命令,用来插入外部文件。
    @import("path/filename.scss");
    如果插入的是.css文件,则等同于css的import命令。
    @import "foo.css";
     颜色函数
    SASS提供了一些内置的颜色函数,以便生成系列颜色。
    lighten(#cc3, 10%) // #d6d65c
    darken(#cc3, 10%) // #a3a329
    grayscale(#cc3) // #808080
    complement(#cc3) // #33c
  • 相关阅读:
    线程原理 创建方式
    Chapter17 【异常、线程】
    驱动
    java中Super到底是什么意思
    Java 8后的首个长期支持版本Java 11
    OpenJDK和JDK区别
    异常
    模拟斗地主洗牌发牌
    Debug追踪
    Python 垃圾回收机制详细
  • 原文地址:https://www.cnblogs.com/xwchengc/p/4152845.html
Copyright © 2020-2023  润新知